Pass Data between Pages in React native

by

Note

This answer was written for react-navigation: "3.3.0". As there are newer versions available, which could bring changes, you should make sure that you check with the actual documentation.

Passing data between pages in react-navigation is fairly straight forward. It is clearly explained in the documentation here

For completeness let’s create a small app that allows us to navigate from one screen to another passing values between the screens. We will just be passing strings in this example but it would be possible to pass numbers, objects and arrays.

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Screen1.js and Screen2.js

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

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Here we have 4 files. The App.js which we will import the MainNavigation.js. The MainNavigation.js sets up a StackNavigator with two screens, Screen1.js and Screen2.js. Screen1 has been set as the initial screen for our StackNavigator.

Navigating between screens

We can navigate from Screen1 to Screen2 by using

this.props.navigation.navigate('Screen2');

and we can go back to Screen1 from Screen2 by using

this.props.navigation.goBack();

So code in Screen1 becomes 

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go to screen 2'} onPress={() => this.props.navigation.navigate('Screen2')} />
      </View>
    )
  }
}

And code in Screen2 becomes:

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go back'} onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

Now we can navigate between Screen1 and Screen2

Sending values from Screen1 to Screen2

To send a value between Screen1 and Screen2, two steps are involved. First we have to send it, secondly we have to capture it.

We can send a value by passing it as a second parameter. Notice how the text value is contained in an object.

this.props.navigation.navigate('Screen2', {text: 'Hello from Screen 1' });

And we can capture it in Screen2 by doing the following, the first value in getParams is the key the second value is the default value.

const text = this.props.navigation.getParams('text','nothing sent');

So Screen1 now becomes

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button 
         title={'Go to screen 2'} 
         onPress={() => this.props.navigation.navigate('Screen2',  { 
           text: 'Hello from screen 1' 
         })} />
      </View>
    )
  }
}

And code in Screen2 becomes:

export default class Screen extends React.Component {
  render() {
    const text =  this.props.navigation.getParam('text', 'nothing sent')
    return (
      <View style={styles.container}>
        <Text>{text}</Text>
        <Button 
         title={'Go back'} 
         onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

Sending values from Screen2 back to Screen1

The easiest way I have discovered to send a value from Screen2 to Screen1 is to pass a function to Screen2 from Screen1 that will update the state in Screen1 with the value that you want to send

So we can update Screen1 to look like this. First we set an initial value in state. Then we create a function that will update the state. Then we pass that function as a parameter. We will display the captured value from Screen2 in a Text component. 

export default class Screen1 extends React.Component {

  state = {
    value: ''
  }

  receivedValue = (value) => {
    this.setState({value})
  }

  render() {
    return (
      <View style={styles.container}>
        <Button 
          title={'Go to screen 2'} 
          onPress={() => this.props.navigation.navigate('Screen2', {
            text: 'Hello from Screen 1', 
            receivedValue: this.receivedValue } 
            )} />
          <Text>{this.state.value}</Text>
      </View>
    )
  }
}

Notice that we are passing the function receivedValue in the same way that we passed the text earlier.

Now we have to capture the value in Screen2 and we do that in a very similar way that we did previously. We use getParam to get the value, remembering to set our default. Then when we press our Go back button we update it to call the receivedValue function first, passing in the text that we want to send back. 

export default class Screen2 extends React.Component {

  render () {
    const text =  this.props.navigation.getParam('text', 'nothing sent');
    const receivedValue = this.props.navigation.getParam('receivedValue', () => {});
    return (
      <View style={styles.container}>
        <Button 
          title={'Go back'} 
          onPress={() => {
            receivedValue('Hello from screen 2')
            this.props.navigation.goBack()
          }} />
          <Text>{text}</Text>
      </View>
    );
  }
}

Alternatives to using getParam

It is possible to not use the getParam method and instead access the values directly. If we were to do that we would not have the option of setting a default value. However it can be done.

In Screen2 we could have done the following:

const text = this.props.navigation.state.params.text;
const receivedValue = this.props.navigation.state.params.receivedValue;

Capturing values in lifecycle events (Screen1 to Screen2)

react-navigation allows you to capture values using the lifecycle events. There are a couple of ways that we can do this. We could use NavigationEvents or we could use listeners set in the componentDidMount

Here is how to set it up using NavigationEvents

import React, {Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation'; // you must import this


export default class Screen2 extends React.Component {

    state = {
      text: 'nothing passed'
    }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <NavigationEvents
        onWillFocus={this.willFocusAction}

        />
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

Here is how to do it using listeners in the componentDidMount

export default class Screen2 extends React.Component {

  componentDidMount () {
    // we add the listener here
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
  }

  componentWillUmount () {
    // we remove the listener here
    this.willFocusSubscription.remove()
  }

  state = {
    text: 'nothing passed'
  }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

Passing navigation via components

In the above examples we have passed values from screen to screen. Sometimes we have a component on the screen and we may want to navigate from that. As long as the component is used within a screen that is part of a navigator then we can do it.

If we start from our initial template and construct two buttons. One will be a functional component the other a React component.

MyButton.js

// this is a functional component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export const MyButton = ({navigation, value, title}) => {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }
});

MyOtherButton.js

// this is a React component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export default class MyOtherButton extends React.Component {

  render() {
    const { navigation, value, title } = this.props; 
    return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow'
  }
});

Regardless of the type of component, notice that navigation is a prop. We must pass navigation to the component otherwise it will not work.

Screen1.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import { MyButton } from './MyButton';        
import MyOtherButton from './MyOtherButton';  

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 1</Text>
        <MyButton 
          title={'Press my button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyButton'}
        />
        <MyOtherButton 
          title={'Press my other button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyOtherButton'}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Notice in Screen1.js as it is contained in a StackNavigator it will have access to this.props.navigation. We can pass that through to our component as a prop. As long as we use that in our component then we should be able to navigate by using the components own functionality. 

<MyButton 
  title={'Press my button'} 
  navigation={this.props.navigation} // pass the navigation here
  value={'this is a string passed using MyButton'} 
/>

Snacks

More Related Contents:

  1. React Native – Device back button handling
  2. Conditional Text Rendering in React Native
  3. Render HTML in React Native
  4. How to build .ipa application for react-native-ios? [closed]
  5. React Native: Possible unhandled promise rejection
  6. How to upload file to server using react-native
  7. React-native fetch() from https server with self-signed certificate
  8. React Native error: “Could not determine java version from ‘9.0.1’.”
  9. react-native-fbsdk error: No resource found that matches the given name: attr ‘android:keyboardNavigationCluster’
  10. Want to share multiple images with separate caption to each image Whatsapp, react native share
  11. React Native Error: ENOSPC: System limit for number of file watchers reached
  12. How to navigate between different nested stacks in react navigation
  13. Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle
  14. componentWillMount is deprecated and will be removed in the next major version 0.54.0 in React Native
  15. ES6, how can you export an imported module in a single line?
  16. FlatList inside ScrollView doesn’t scroll
  17. How to make Metro (React Native packager) ignore certain directories
  18. Renaming a React Native project?
  19. Invariant Violation: requireNativeComponent: “RNSScreen” was not found in the UIManager
  20. React-native: How to control what keyboard pushes up
  21. KeyboardAvoidingView not Working Properly
  22. React-Native, Scroll View Not Scrolling
  23. Getting “Cannot read property ‘pickAlgorithm’ of null” error in react native
  24. Auto scale image height with React Native
  25. Facing issue ” Failed to install the app. Make sure you have the Android development environment ” in react native
  26. emulator-5554 unauthorized for adb devices
  27. React Native – React Navigation transitions
  28. How to set default font family in React Native?
  29. What is react-native link?
  30. Call child function from parent component in React Native

Leave a Comment