In react navigation 5.x there are options available to set the app screen Title text. There are sometimes developer is required to update the Title on active screen using navigation.setOptions({}) method. This method would allow us the update the active screen style on button click events. In navigation.setOptions() there are a prop named as title which is used to update the header title. So in this tutorial we would learn about React Navigation 5.x Change Header Title on Button Click in React Native Dynamically Android iOS Example Tutorial.
Contents in this project React Navigation 5.x Change Header Title on Button Click in React Native Dynamically Android iOS Example:
1. The first step before start coding is to download and install the React Navigation and its supporting libraries in our current react native project. I have already make a post on this topic containing installation guide. Here is the link of my React Navigation 5.x installation guide. Visit the post and follow Step 1, 2 and 3.
2. Open your project’s main App.js file and import StyleSheet, Text, View, Button, NavigationContainer, createStackNavigator and react-native-gesture-handler component.
|
1
2
3
4
5
6
7
8
9
|
import * as React from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import ‘react-native-gesture-handler’;
|
3. Create a functional component named as Home with navigation prop argument. Here we would use the navigation to control the navigation options like Title and update the title text using navigations.
- navigation.setOptions({ title: ‘Updated!’ } : Is used to Change the Title text dynamically on app run time on button click.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function Home({ navigation }) {
const updateHeader=()=>{
navigation.setOptions({ title: ‘Updated!’ });
}
return (
<View style={styles.MainContainer}>
<Text style={styles.textStyle}> Home Screen </Text>
<Button
title={‘Click Here To Update Header Title Dynamically’}
onPress={updateHeader} />
</View>
);
}
|
4. Making a createStackNavigator() object named as Stack and here we would also define Stack.Screen wrap inside NavigationContainer -> Stack.Navigator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home”
component={Home}
options={{ title: ‘Screen Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
|
5. 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’
},
textStyle: {
textAlign: ‘center’,
fontSize: 28,
fontWeight: “100”,
},
});
|
6. Now in the final step we have to call the export default method which would call this Stack on app start time.
|
1
|
export default App;
|
7. 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
62
63
|
import * as React from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import ‘react-native-gesture-handler’;
function Home({ navigation }) {
const updateHeader=()=>{
navigation.setOptions({ title: ‘Updated!’ });
}
return (
<View style={styles.MainContainer}>
<Text style={styles.textStyle}> Home Screen </Text>
<Button
title={‘Click Here To Update Header Title Dynamically’}
onPress={updateHeader} />
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=“Home”
component={Home}
options={{ title: ‘Screen Title Text’ }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textStyle: {
textAlign: ‘center’,
fontSize: 28,
fontWeight: “100”,
},
});
export default App;
|
Screenshots:
Also Read :
Custom Material Style Star Rating Bar component in React Native iOS Android
Create Simple Splash Screen in React Native Android iOS App Tutorial
React Native Change Text Component Height Width Dynamically
React Native Change Button Upper Title Text Using State Dynamically
React Native Add Show Header Footer on FlatList in Android iOS Tutorial
