Customize the StackNavigator Header with React Navigation in a React Native App
React Navigation’s StackNavigator has a default header, which you may or may not want for your application. We’ll look at how to totally disable the header, as well as how to customize the default header on a per-screen basis.
Instructor: [00:00] In restaurantlist.js, we can remove the header by specifying a static navigation options on the React component class itself. We don't want any automatic header at all here. We can specify header null. When we reload, we can see the default stack navigation header is gone.
[00:21] The background color of the stack navigator is still showing through, however. We'll add a white background color to our root view. When we click through to the info screen, we can see that header is still there because we only disabled it for the root list view.
[00:38] We can customize this header by opening restaurantinfo.js and defining a static navigation options. This time, we want to keep the header but set the title to "Restaurant Info." When we reload now, the info page header has that title.
[00:58] We can customize more of this header bar, like setting the style of the header itself, setting the tint color for the default back button, and setting the style for the title. When we reload, we can see those changes as well.
[01:20] We could also take these style options. Back in app.js, where we define the stack navigator, we can specify additional options as an object as the second parameter to the create stack navigator call.
[01:36] Here, we can specify navigation options and paste in the options that we had previously just defined on the info page. Now, these options will be the default for the header on any screen in that stack navigator. We don't have to worry about repeating those options for every screen.