Sending data between components with ReactNavigation

As we know, React Native Components can be put in stack with the help of React Navigation.

React navigation creates a stack of screens (components) and also keeps a (props) property called “navigation” injected to all components. Remember, we called this.props.navigation.navigate('NameOfTheComponent') in previous example.

Using this “navigation” property, Not only we could navigate between component but also bundle and send some payloads along.

Let’s create a new project

$ react-native init MyNavSendProject

$ cd MyNavSendProject

Add react-navigation and react-native-gesture-handler and link dependancies

$ npm install --save react-navigation react-native-gesture-handler

Link

$ react-native link react-native-gesture-handler

Let’s create screen folder and create Main.js and Next.js files

Main.js

import React, { Component } from 'react';
import { Button, View, TextInput } from 'react-native';

export default class Main extends Component {

    static navigationOptions = {
        title:'Home'
    };

    constructor(props) {
        super(props);
        this.state = {textValue:''}
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <TextInput style={{width:200,height:40,borderWidth:1,borderColor:'blue',borderRadius:4, margin:10}} 
                value={this.state.textValue} keyboardType='default' onChangeText={(text)=> this.setState({textValue:text})}
                placeholder="Type here"
                />
                <Button title="Click this" onPress={() => { this.props.navigation.navigate('Next',{text:this.state.textValue})}}  />
            </View>
        );
    }
}

Next.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class Next extends Component {
  static navigationOptions = {
    title: 'Next'
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>{this.props.navigation.getParam('text')}</Text>
      </View>
    );
  }
}

in Main.js component, the state object keeps track of TextInput values as this.setState set in onChangeText, When the user press the button, the state object property textValue is bundled as on object {text:this.state.textValue} and added as an argument along with destination component name like below

this.props.navigation.navigate('Next',{text:this.state.textValue});

in Next.js

We will be capturing it with the property name ‘text’ (the property name it is bundled while sending)

this.props.navigation.getParam('text')

Let’s see them in action. Create Stack and AppContainer in MyAppNavigator.js (Refer previous example to get an idea on how StackNavigator and AppContainer works)

import React, {Component} from 'react';
import {createAppContainer,createStackNavigator} from 'react-navigation';
import Main from './screens/Main';
import Next from './screens/Next';

const Route = createStackNavigator(
    {
        Home:{screen:Main},
        Next:{screen:Next}
    },
    {
        initialRouteName:'Home'
    }
);

const AppContainer = createAppContainer(Route);

export default class MyComponent extends Component{
    render(){
        return <AppContainer/>
    }
}

App.js

import React, {Component} from 'react';
import MyComponent from './MyAppNavigator';

export default class App extends Component {
  render() {
    return <MyComponent/>
  }
}

Start the emulator and issue $ react-native run-android

Thus we can send data from one component to another using this.props.navigation.navigate('ComponentName',payloadObject) and the same is captured using this.props.navigation.getParam('properyName')

Notice, we have used static navigationOptions object to declare title to the component view. We will see them in detail in next example. Also we will see how to get back (receive) the data in reverse direction in subsequent examples.

Download source code

Leave a Reply

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