Pass Data Between Screens when Navigating with StackNavigator
Once navigation is setup, we’ll pass data between screens using params.
Instructor: [00:00] In restaurantrow.js, where we're calling navigate, we can pass params as a second argument. In particular here, we can pass the restaurant object that is in our props in as the place key.
[00:14] Then in restaurantinfo.js, we can put a debug in the render and see that the place object is being passed under this.props.navigation.state.params.place, and we can access it there directly.
[00:35] We can also see a get param function which is another option to access the param. In restaurantinfo.js, let's start with the first option by extracting the place from the params. Unfortunately, this params will be null if no params are passed. We need to check for null first, which works, but it's long and cumbersome.
[00:58] We can do the second option, which is to use the get param function, which automatically checks for null params. When we've done that, we can see the local place variable, which is filled with the restaurant info.
[01:13] Let's take that info and show it on the screen. First by importing what we need, then by building up the component, and finally, by adding the styles that we need. Now when we reload, each info button passes the restaurant data onto the info page and displays the proper info.