React applications have state that gets passed down to components that render features and require state data. For example, imagine that you're designing an app that uses react-navigation and different screens depend on the same state data. How do you get state data into these screen components? How do they update the application state?
To start with, let's think about where to put your application state. The most natural place to put it would be the App component. So far in this chapter, the examples have directly exported calls to createStackNavigator(). This function is a higher-order function—it returns a new React component. This means that you can wrap your own stateful component around the navigation component that's returned by createStackNavigator().
To illustrate this idea, let's revisit the example from earlier in which you have a Home screen that lists item buttons that navigate to a Details screen. Here's what the new App component...