React Native Show ListView Selected Item on New Activity Tutorial from Scratch

Guys, through this tutorial I am going to explain and show you how we can add Items in React Native ListView Component and how you can show ListView selected item on new Activity/Screen.

In brief, what will we do in Show ListView Selected Item on New Activity tutorial?

  • First of all, we have to download react-navigation  library in our react native project for navigation across multiple screens. If you don’t know how we can download and link third party libraries in our existing react native project then follow this tutorial.
  • Create two custom components. First one is responsible for showing list items and another one is responsible for showing ListView selected item’s value on new activity/screen.
  • Register both custom components in StackNavigator to enable navigation across multiple screens.

Now let’s begin…

Step – 1: Install react-navigation  library into your existing react native project through this command.

Step – 2: Import all required components from react , react-native  and react-navigation .

Step – 3: Create first custom component which is responsible to show a list of items and declare it’s render  and return  methods.

Explanation:

  • The most important statement is  this.props.navigation.navigate('Item', { item: clickedItemValue }); . The navigate  method is used to navigate from one screen to another screen. In our case we have to pass two parameters when we call navigate method. First one is Item  which is the name of the other custom component which we want to load as Activity/Screen and Second one is the params object which is used to send params form current Activity to other Activity/Screen.

Process of passing and getting values:

  • First of all we pass a selected value of ListView  Component into route.
  • Then through route we can access selected value of ListView  Component into other Activity/Screen.

Step – 4: Implement  ListView component’s code of our first custom component.

Step – 5: Create other custom component which will show the selected item’s value of ListView  component.

Explanation:

  • The most important statement is  this.props.navigation.params.item which is used to access the value passed by first component. In our case, our first custom component ( RenderList ) sends selected value of ListView component to other custom component ( ClickedItem ) through this.props.navigation.navigate( 'Item', { item: clickedItemValue }) method and you can access clickedItemValue  on the other Activity/Screen through  this.props.navigation.params.item.

Step – 6: Register your both custom components into StackNavigator module of react-navigation.

Step – 7: Implement styles for all required components.

Complete Source Code:

Step – 8: Execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshot:

  • Android Screenshot:

Enjoy Guys… have fun.

2 Comments

  1. Simply a smiling visitor here to share the love (:, btw great layout.

Leave a Reply

Your email address will not be published. Required fields are marked *