React Navigation: Configuring Screen Options
Treat screen options like CSS for your React Navigation screens, letting you style headers and tabs. Apply styles to a single Screen with the options prop, or to a Group of screens with screenOptions.
Why it exists
React Navigation needs a way to customize the appearance and behavior of individual screens without forcing you to create entirely new, complex components. Screen options provide a declarative API to manage common UI elements like header titles, colors, and buttons directly in your navigation structure.
The mental model
Think of screen options as CSS for your navigation stack. You can define style and behavior rules at different levels of specificity: the whole Navigator, a Group of screens, or a single Screen. Just like CSS, the most specific rule wins, allowing you to set a global theme and then override it for special cases.
How it works
You configure screens using props at two main levels. First, the options prop on a Screen component applies settings to that single screen. Second, the screenOptions prop on a Group component applies the same settings to all screens within that group. The settings are merged, with Screen options taking precedence over Group options. For dynamic values, you can pass a function to options that receives the navigation and route objects, letting you create buttons that navigate or titles based on route params.
When to use it
This is your primary tool for UI customization in React Navigation. Use it to set a screen's header title, change header styles like background color, add custom header buttons (e.g., a settings icon), or configure tab bar icons and labels.
When not to use it
Avoid placing complex business logic or application-wide state management inside your screen options. While the function form gives you access to navigation and route, its purpose is presentational logic. Heavy data fetching or state updates should be handled in your components or dedicated state management libraries.
One canonical example
Imagine a stack navigator with a group of "Settings" screens that should all have a gray header, but the main "Account" screen needs a specific title. You would set screenOptions on the Group for the color, and an options prop on the "Account" Screen for its unique title. The "Account" screen would get both the gray header from the group and its own specific title.
Interview question
If a React Navigation Group sets a header background color via screenOptions, and a Screen within it sets a different header background color via its options prop, which color will apply?
- a.Both colors will be applied, resulting in a blended or combined effect.
- b.An error will occur due to conflicting header background color definitions.
- c.The color from the Group's screenOptions, as it defines the default for the group.
- d.The color from the Screen's options, as it is more specific.Correct
Why? this is the answer
Screen options take precedence over Group options for the same property, meaning the more specific setting on the individual Screen will override the broader setting from the Group. The settings merge, but specific overrides general, rather than causing an error or blending.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react-native
- #react-navigation
- #mobile-development
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles