In React Navigation StackNavigator is a major component because it is the base of every activity screen. Every single screen is managed by StackNavigator in react navigation. There are a lot’s of options to customize the StackNavigator is available in react native and one of them is Dynamically Change React Navigation Header Title Text of StackNavigator in react native. We would use react navigation’s setParams() and getParam() method in our this tutorial to modify the Activity title text at application runtime dynamically on button onClick event. So let’s get started .
Content in this project React Native Dynamically Change React Navigation Header Title Text of StackNavigator:
1. Before getting stated the coding part we need to install the React Navigation library in our current project. So open your react native project folder in command prompt or Terminal and execute below command.
|
1
|
npm install react–navigation —save
|
Screenshot of CMD:
2. Next step is to install the Gesture Handler library. The React Native Gesture Handler library is used to give the best touch base experience to application users. This library is necessary to install with react native . So again execute below command to install the library.
|
1
|
npm install react–native–gesture–handler —save
|
Screenshot of CMD:
3. Now in final step of installation process we need to manually link both of the libraries to or react native project using link command. So execute the below command in your react native project folder.
|
1
|
react–native link
|
4. Now its time to start the coding part. Import StyleSheet, Text, View and TouchableOpacity component in your project’s App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity } from ‘react-native’;
|
5. Import createStackNavigator and createAppContainer component from React Navigation library in your current project.
|
1
|
import { createStackNavigator, createAppContainer } from ‘react-navigation’;
|
6. Create Static Navigation Options inbuilt function of react navigation in your application main class with Navigation parameter. Now we would return the title text of activity header using navigation.getParam() method. In this method first we would set a key named as title and set some random text to it. This is the Default Title of stack navigator.
|
1
2
3
4
5
|
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(‘Title’, ‘Default Title’),
};
};
|
7. Create a function named as changeTitleText() in your app’s main class. In this function we would call the navigation.setParams() method with default props of the class. In this function we would simply update the title value.
|
1
2
3
4
5
6
7
8
|
changeTitleText = () => {
var that = this;
that.props.navigation.setParams({
Title: ‘New Activity Title’
});
}
|
8. Create a Touchable opacity button in render’s return block and on button onPress event we would call the above function. So when application user click the button it will update the Stack Navigator title text value.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity style={styles.button} onPress={this.changeTitleText.bind(this)}>
<Text style={styles.text}>Click Here to Change The Activity Action Bar Screen Title Text</Text>
</TouchableOpacity>
</View>
);
}
|
9. Now we need to create a constant Root object and pass the createStackNavigator() in it with our main activity class , We would also call the export default createAppContainer() and pass the Root in it.
|
1
2
3
4
5
6
7
8
9
10
|
const Root = createStackNavigator(
{
Home: MainActivity
},
{
initialRouteName: “Home”
}
);
export default createAppContainer(Root);
|
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
button: {
width: ‘80%’,
paddingTop: 5,
paddingBottom: 5,
backgroundColor: ‘#00BCD4’,
borderRadius: 7,
margin:10
},
text: {
color: ‘#fff’,
fontSize: 24,
textAlign: ‘center’,
padding: 10
}
});
|
11. 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
64
65
66
67
68
69
70
71
72
73
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity } from ‘react-native’;
import { createStackNavigator, createAppContainer } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(‘Title’, ‘Default Title’),
};
};
changeTitleText = () => {
var that = this;
that.props.navigation.setParams({
Title: ‘New Activity Title’
});
}
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity style={styles.button} onPress={this.changeTitleText.bind(this)}>
<Text style={styles.text}>Click Here to Change The Activity Action Bar Screen Title Text</Text>
</TouchableOpacity>
</View>
);
}
}
const Root = createStackNavigator(
{
Home: MainActivity
},
{
initialRouteName: “Home”
}
);
export default createAppContainer(Root);
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
button: {
width: ‘80%’,
paddingTop: 5,
paddingBottom: 5,
backgroundColor: ‘#00BCD4’,
borderRadius: 7,
margin:10
},
text: {
color: ‘#fff’,
fontSize: 24,
textAlign: ‘center’,
padding: 10
}
});
|
Screenshots:
Also Read :
Set View Height Width in Percentage Flex Dimensions in React Native
RNCSafeAreaView was not found in the UIManager React Native iOS Error Solution
React Native Getting Started With NativeBase Cross Platform UI Components
Where can We Find Bundle Identifier for React Native iOS Project
React Native Set View Width Height in Fixed Dimensions Android iOS
