React Native Tutorial #23 - Navigation Options

Hey gang, in this React Native tutorial we'll take a look at a few extra navigation options we can use for our header - things like background colour, height & text colour.
----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🐱‍💻 🐱‍💻 Other Related Courses:

[KundoKun]

Every time i hear "Okay, gang!" from Shaun, i feel some kind of pride for being part of the Shaun Gang. Thank you for all your effort and vivid eloquence to put us, your gang, in the right way of learning. You're amazing!

[halfish]

UPDATED VERSION: To pass options to multiple Stack.Screens you can surround it with Stack.Group and add the screen options here.

import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';

const Stack = createNativeStackNavigator();

export default function Navigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Group
screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}>
<Stack.Screen
name="Home"
component={Home}
options={{
title: 'GameZone',
}}
/>
<Stack.Screen
name="ReviewDetails"
component={ReviewDetails}
options={{
title: 'Review Details',
}}
/>
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
}

[DanFlakes]

They've made some changes to React Navigation on version 4.x. This is how you define the options property :

<Screen
name="Home"
component={Home}
options={{
title: 'GameZone'
}}
/>

[carolinagarcia-loygorri]

Thanks Shaun for your incredible tutorials! I just wanted to share that in my case the title of the page just showed up automatically with the name of the screen, I didn't have to do anything :D! Anyway, I can still change it if I want ^_^

[terry_swd]

January 2022: This is how you set the global header style now:

screenOptions={{
headerStyle: {
backgroundColor: "#c4c4c4"
},
headerTintColor: "#fff"
}}

[TheNerdyDev]

Merry Christmas, Ninja. Your videos are already a Christmas Delight for us :)

[vijaytiwari]

changes in AppNavigator.js (new Navigator version):

const { Navigator, Screen } = createStackNavigator();

export const HomeNavigator = () => (
<Navigator
headerMode='screen'
screenOptions={{
headerStyle: {
backgroundColor: '#eee',
},
headerTintColor: '#444',
height: 60
}}
>
<Screen
name='Home'
component={Home}
options={{ title: 'GameZone' }}
/>
<Screen
name='ReviewDetails'
component={ReviewDetails}
options={{ title: 'Review Details' }}
/>
</Navigator>
);

[ugx]

Thank you, Ninja.
We are waiting for the next videos ;-)

Merry Christmas.

[sundayay]

why until now i can find your channel, Love your video

[akasadulloh]

Thanks Shaun for All you do! I love your tutorials! ❤️
Keep up the good work!

Not sure, but looks like these few series might need some update.
Because I could not use the CreateAppContainer method, and it's not listed in react-native docs too.
Instead, I used

// And implement in the App.js just like we do in React

function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);}
// if you know React
// Stack.Screen - here is like <Route path="/Home" component={HomeScreen}/> .
// As a whole everything is good - Thanks for these tutorials, it helps a lot!👍

[curledanimation]

This is really the best react naitve tutorial in the internet but the site where you download the navgation module got updated will you make an updated video?

[kallbacks]

'HO HO HO HOOO'!!!
Thanks Shaun epic video as usual.

[eduardoocrespo]

if you are stuck because of the new navigator version go
and ctrl+f or command+f 'defaultNavigationOptions'

[learnedcurve]

Updated navigation Options:
const { Navigator, Screen } = createStackNavigator();

const HomeNavigator = () => (
<Navigator
headerMode="float"
initialRouteName="GameZone"
Options for all
screenOptions={{
headerStyle: {
backgroundColor: "#333",
height: 60,
headerTintColor: "#444",
},
}}
>
<Screen
name="Home"
component={Home}
screen options
options={{
headerShown: true,
title: "GameZone",
headerStyle: {
backgroundColor: "#eee",
},
}}
/>
<Screen
name="ReviewDetails"
component={ReviewDetails}
options={{
headerBackTitleVisable: false,
headerStyle: {
backgroundColor: "#eee",
},
}}
/>
</Navigator>
);

[paristar]

Amazing tutorial. Best all over YouTube

[derickasane]

Thanks very much dear, am learning alot from your trutorials, it very informative.

[sylvielmna]

Messing around with the header bar height wasn't a great idea for Google Pixel phones. I needed to set height: 120. Leaving it default might be the best option for cross-compatibility.

[elgizhasanzada]

Again again and again great tutorial <3

[vaibhawkr]

What if I wanna use a custom header and not the one provided by Stack Navigator?

[leoamato]

you ninja are osom, u r the messi of react natve haha