Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.