In React Navigation latest 5.x version we can easily manage header bar options using screenOptions={{}} prop. The screenOptions prop has multiple header bar styling sub-prop like headerStyle, headerTintColor and headerTitleStyle. Using all of these available props we can properly configure header bar background color, header bar text color, header bar text style and also text alignment. So in this tutorial we would React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native Android iOS Example Tutorial.
Contents in this project React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native Android iOS Example Tutorial:
1. Before getting started using react navigation latest version 5.x we have to install the library in our current react native project. So i have already make a tutorial on it, Read it here before getting started.
2. After successfully installed the react navigation 5.x, Open your project’s main App.js file and import react-native-gesture-handler, StyleSheet, Text, View, NavigationContainer and createStackNavigator components.
|
1
2
3
4
5
6
7
8
9
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
|
3. Create a function named as HomeActivity. In react native latest version all the screens will be handled using functions. We have to create a return() method in current function and pass the View inside it. This is our first screen.
|
1
2
3
4
5
6
7
8
9
10
|
function HomeActivity({ navigation }) {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> Home Screen </Text>
</View>
);
}
|
4. Create a constant named as Stack works as createStackNavigator() object.
|
1
|
const Stack = createStackNavigator();
|
5. Create a function named as App. This is our main portion of code where we would define Stack wrap inside NavigationContainer. If your app has multiple screens then you have to pass them all here.
- backgroundColor : Used to set background color Header Bar.
- headerTintColor : Used to set Title text color.
- headerTitleStyle : Used to set header bar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: ‘#FF6D00’,
},
headerTintColor: ‘#ffff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},}}>
<Stack.Screen name=“Home”
component={HomeActivity}
options={{ title: ‘Activity Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
|
6. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 10,
fontSize: 25,
},
});
|
7. Calling our default main function App using export default syntax.
|
1
|
export default App;
|
8. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
function HomeActivity({ navigation }) {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}> Home Screen </Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: ‘#FF6D00’,
},
headerTintColor: ‘#ffff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},}}>
<Stack.Screen name=“Home”
component={HomeActivity}
options={{ title: ‘Activity Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 10,
fontSize: 25,
},
});
export default App;
|
Screenshots:
Also Read :
React Navigation Latest Version 5.x in React Native Example Tutorial
React Native Custom Checkbox Component iOS Android Example
Example of Creating Bar Chart Graph in React Native Android iOS
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
How To Enable Disable JavaScript Code in WebView React Native
