Header Bar also known as Action bar in android and iOS devices is used to display useful information about application screen in single text. There are always a title present on header bar which is known as Header bar Title text. In latest version of react navigation 5.x we can use the options={{}} prop of Stack Screen to show Title text on header bar. So in this tutorial we would React Native Set Header Bar Title Text in React Navigation 5.x Android iOS Example.
Contents in this project React Native Set Header Bar Title Text in React Navigation 5.x Android iOS Example Tutorial:
1. The first step before started the coding is to install the latest version of React Navigation in your react native app. I have already make few tutorials regarding to installation of React Navigation latest version in react native project. So you can read them here. You have to read installation tutorial because without the installation we cannot use react navigation features.
2. After done installing we have to import react-native-gesture-handler and StyleSheet, Text, View component in your project’s main App.js file.
|
1
2
3
4
5
|
import ‘react-native-gesture-handler’;
import * as React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
|
3. Import NavigationContainer and createStackNavigator component in your app’s main App.js file.
|
1
2
3
|
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
|
4. Create a function named as HomeActivity. This is our first home screen for application. In latest version of react navigation the defining structure has changed. So we would functions instead of classes.
|
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>
);
}
|
5. Create a constant type of createStackNavigator(). We would use this Stack with Navigator to set the screens.
|
1
|
const Stack = createStackNavigator();
|
6. Create a function named as App(). Now we would make a Navigation Container in the return area of App. Inside the return area we would define the Screen using Stack.Screen. We would here use options={{}} prop to set the Action Header bar title text for particular screen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home”
component={HomeActivity}
options={{ title: ‘Screen Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home”
component={HomeActivity}
options={{ title: ‘Screen Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
|
9. Now we have to finally export our default main App() function.
|
1
|
export default App;
|
10. 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
|
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>
<Stack.Screen name=“Home”
component={HomeActivity}
options={{ title: ‘Screen Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
export default App;
|
Screenshot:
Also Read :
Create and Call State in Functional Component in React Native Hooks
React Native Create Auto Image Slider Gallery Android iOS with Page Indicator
React Native Fetch API Tutorial to Insert Into MySQL Database Using PHP iOS Android Example
React Native Apply Easing Animation on View Object Explained Example Tutorial
Add Image Icon Inside TextInput in React Native Android iOS Example
