Passing Data Using React-native Navigation

Im trying to pass data between screens in my app. Currently I am using 'react-native': '0.46.0', 'react-navigation': '^1.0.0-beta.11' I have my index.js import React, { Compon

Solution 1:

In your code, props.navigation and this.props.navigation.state are two different things. You should try this in your second screen:

const {state} = props.navigation;
console.log("PROPS " + state.params.user);

the const {state} line is only here to get an easy to read code.

Solution 2:

All the other answers now seem outdated. In the current react navigation version, ("@react-navigation/native": "^5.0.8",), you first pass value between one screen from another like this:

functionHomeScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
            title="Go to Details"
            onPress={() => {
              /* 1. Navigate to the Details route with params, passing the params as an object in the method navigate */navigation.navigate('Details', {
                itemId: 86,
                otherParam: 'anything you want here',
              });
            }}
          />
        </View>
      );
    }

and then in the component you are redirecting, you get the data you passed like this:

functionDetailsScreen({ route, navigation }) {
  /* 2. Get the param */const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <Viewstyle={{flex:1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text><Text>itemId: {JSON.stringify(itemId)}</Text><Text>otherParam: {JSON.stringify(otherParam)}</Text></View>
  );
}

So, basically, the data now is inside this.props.route.params. In those examples above, I showed how to get them from functional components, but in class components is similar, I did something like this:

First I passed the data from this ProfileButton, within it's handleNavigate function, like this:

// these ProfileButton and ProfileButtonText, are a Button and a Text, respectively,// they were just styled with styled-components 
<ProfileButton
 onPress={() =>this.handleNavigate(item) 
  <ProfileButtonText>
      check profile
  </ProfileButtonText>
</ProfileButton>

where the handleNavigate goes like this:

   handleNavigate = user => {
        // the same way that the data is passed in props.route,// the navigation and it's method to navigate is passed in the props.const {navigation} = this.props;
        navigation.navigate('User', {user});
    };

Then, the function HandleNavigate redirects to the user page, which is a class component, and I get the data like this:

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

exportdefaultclassUserextendsComponent {
    state = {
        title: this.props.route.params.user.name,
    };


    render() {
        const {title} = this.state;
        return (
            <View><Text>{title}</Text></View>
        );
    }
}

In class components, the way I found out is making this quite long line title: this.props.route.params.user.name, but it works. If anyone knows how to make it shorter in the current version of react-native navigation, please enlighten me. I hope this solves your problem.

Solution 3:

react-navigation 3.*

Parent Class

this.props.navigation.navigate('Child', {
    something: 'Some Value',
});

Child Class

this.props.navigation.state.params.something // outputs "Some Value"

Solution 4:

You can access your param which is user, with props.navigation.state.params.user in related component (SecondScreen).

Solution 5:

From react navigaton 3.x docs, you can use getParam(params).

classSecondScreenextendsReact.Component {
        render() {
          const { navigation } = this.props;
          const fname = navigation.getParam('user');
          return (
            <View><Text>user: {JSON.stringify(fname)}</Text></View>
          );
        }
    }