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.

npm install --save react-navigation

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

import React, { Component } from 'react';
import { AppRegistry, View, Text, TouchableOpacity, ListView, StyleSheet } from 'react-native';

import { StackNavigator } from 'react-navigation';

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

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

class RenderList extends Component
{
    static navigationOptions = 
    {
        title: 'List Items'
    };

    constructor()
    {
        super();
        this.state = { dataSource: ds.cloneWithRows(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday']) };
    }

    clickedItemText(clickedItemValue)
    {
        this.props.navigation.navigate('Item', { item: clickedItemValue });
    }

    render()
    {
        return(

            // Implement List View Component
     
        );
    }
}

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.

<View style = { styles.container1 }>
    <ListView
        dataSource = { this.state.dataSource }
        renderRow = {( rowData ) =>
            <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind(this, rowData)}>
                <Text style = { styles.text }>{ rowData }</Text>
            </TouchableOpacity>
        }
        renderSeparator = {() =>
            <View style = { styles.separator }/>
        }/>
</View>

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

class ClickedItem extends Component
{
    static navigationOptions = 
    {
        title: 'Selected Item'
    };

    render()
    {
        return(
            <View style = { styles.container2 }>
                <Text style = { styles.text }>You Selected: { this.props.navigation.state.params.item }</Text>
            </View>
        );
    }
}

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.

const App = StackNavigator(
{
    List: { screen: RenderList },
    Item: { screen: ClickedItem }
});

Step – 7: Implement styles for all required components.

const styles = StyleSheet.create(
{
    container1:
    {
        flex: 1
    },

    container2:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 15
    },

    item:
    {
        padding: 15
    },

    text:
    {
        fontSize: 18
    },

    separator:
    {
        height: 2,
        backgroundColor: 'rgba(0,0,0,0.5)'
    }
});

Complete Source Code:

import React, { Component } from 'react';
import { AppRegistry, View, Text, TouchableOpacity, ListView, StyleSheet } from 'react-native';

import { StackNavigator } from 'react-navigation';

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

class RenderList extends Component
{
    static navigationOptions = 
    {
        title: 'List Items'
    };

    constructor()
    {
        super();
        this.state = { dataSource: ds.cloneWithRows(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday']) };
    }

    clickedItemText(clickedItemValue)
    {
        this.props.navigation.navigate('Item', { item: clickedItemValue });
    }

    render()
    {
        return(
            <View style = { styles.container1 }>
                <ListView
                    dataSource = { this.state.dataSource }
                    renderRow = {( rowData ) =>
                        <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind(this, rowData)}>
                            <Text style = { styles.text }>{ rowData }</Text>
                        </TouchableOpacity>
                    }
                    renderSeparator = {() =>
                        <View style = { styles.separator }/>
                }/>
            </View>     
        );
    }
}

class ClickedItem extends Component
{
    static navigationOptions = 
    {
        title: 'Selected Item'
    };

    render()
    {
        return(
            <View style = { styles.container2 }>
                <Text style = { styles.text }>You Selected: { this.props.navigation.state.params.item }</Text>
            </View>
        );
    }
}

const App = StackNavigator(
{
    List: { screen: RenderList },
    Item: { screen: ClickedItem }
});

const styles = StyleSheet.create(
{
    container1:
    {
        flex: 1
    },

    container2:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 15
    },

    item:
    {
        padding: 15
    },

    text:
    {
        fontSize: 18
    },

    separator:
    {
        height: 2,
        backgroundColor: 'rgba(0,0,0,0.5)'
    }
});

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 *