Customize the StackNavigator Header with React Navigation in a React Native App

Chris Achard
InstructorChris Achard

Share this video with your friends

Send Tweet
Published 3 years ago
Updated a year ago

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.

Arup
Arup
~ 3 years ago

I am not getting the navigation header navigation color at all. Here is my git repo https://github.com/arupsarkar/jollibee

Arup
Arup
~ 3 years ago

FYI: If any of you are using react navigation version 3, navigationOptions is changed to defaultNavigationOptions and it works as expected.

Chris Achard
Chris Achardinstructor
~ 3 years ago

Thanks Arup, yes. The API has changed since recording, so I’ll have to redo this part. Thanks for pointing out the fix!