How To Pass Data Between React Native Screens?

Hey I am new to react native. So basically I have a stack navigator with two screen option: Screen 1 (Default) and Screen2. I already set up a button so that when pressed it will t

Solution 1:

The easiest way to pass the data is when you are navigating. To do that it is better that you put your array in a state an then use the following method:

onPress=()=>{
     this.props.navigation.navigate('Screen2', {
          yourArray: this.state.yourArray, });
      }
}

Then in the next screen(Screen2) you can find the array(your data) in the props.So in your constructor in scrren2 you can find the data here:

constructor(props) {
    super(props);

    var params = props.navigation.state.params.yourArray;

}

Also to come back to your previous screen without touching your states you can use this code in your back button:

const { goBack } = this.props.navigation;
      goBack();

Solution 2:

To pass data from Screen1 to Screen2. Here we're storing the array in a state.

onPress={() => this.props.navigation.navigate('Screen2', {array: this.state.array})}

To get the data from Screen1 in Screen2

this.props.route.params.array

The source of this response is official documentation. I have tried it as well because the above solution didn't work for me. For more information you can go to this React Navigation Docs.