React Native activity(React Navigation) structure has its own Static navigationOptions, which is used set Activity action bar background color, title text color and title text itself and some style options. But the both are by default set only statically once in react native application and sometimes application developer needs to update them dynamically. So in this tutorial we would going to Dynamically Change Static navigationOptions Value on Button Click in iOS Android React Native application using this.props.navigation.setParams() inbuilt method. So let’s get started .
What we are doing in this project:
We would dynamically change the Static navigationOptions using this.props.navigation.setParams() method and change the Activity action bar background color, Text and Text color on button onPress event.
Contents in this project Dynamically Change Static navigationOptions Value on Button Click in iOS Android React Native App:
1. Before going further we need to install the React Navigation Library in our react native project in order to use the Activity structure. So open your project folder in Command Prompt(Terminal) and execute the below command.
|
1
|
npm install —save react–navigation
|
Screenshot after done installing the library:
2. Import StyleSheet, View, Text, YellowBox and TouchableOpacity component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, YellowBox, TouchableOpacity } from ‘react-native’;
|
3. Import StackNavigator component in your project from React Navigation library.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
4. We are using only 1 Activity in our project, So create a class named as MainActivity.
|
1
2
3
4
5
|
class MainActivity extends Component {
}
|
5. Create constructor() in your MainActivity class and write the YellowBox.ignoreWarnings() code to remove the isMounted(…) is deprecated yellow page error.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor(props) {
super(props);
YellowBox.ignoreWarnings(
[‘Warning: isMounted(…) is deprecated’, ‘Module RCTImageLoader’
]);
}
|
6. Create static navigationOptions with navigation prop in your MainActivity class. We would use the navigation.getParam() with object to set their values dynamically. If we do not change the value then it will by default call the Right side value as default value and the First object value we can change from function.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(‘Title’, ‘Default Title’),
headerStyle: {
backgroundColor: navigation.getParam(‘BackgroundColor’, ‘#E040FB’),
},
headerTintColor: navigation.getParam(‘HeaderTintColor’, ‘#fff’)
};
};
|
7. Create function named as apply_Green(), Inside this function we would dynamically update the static navigationOptions using this.props.navigation.setParams(). We would update both 3 values of Title, background color and Header tint color.
|
1
2
3
4
5
|
apply_Green=()=>{
this.props.navigation.setParams({Title: ‘Green Activity’, BackgroundColor : ‘#1B5E20’, HeaderTintColor : ‘#fff’});
}
|
8. Create another function named as apply_Sky_Blue(), Inside this function we would done the same as above function.
|
1
2
3
4
5
|
apply_Sky_Blue=()=>{
this.props.navigation.setParams({Title: ‘Sky Blue Activity’, BackgroundColor : ‘#2979FF’, HeaderTintColor : ‘#fff’});
}
|
9. Create another function named as apply_Orange(), Inside this function we would also update all the values.
|
1
2
3
4
5
|
apply_Orange=()=>{
this.props.navigation.setParams({Title: ‘Orange Activity’, BackgroundColor : ‘#FF3D00’, HeaderTintColor : ‘#fff’});
}
|
10. Create 3 Buttons using TouchableOpacity component inside render’s return block and call the above 3 functions on button onPress event.
|
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
|
render()
{
return(
<View style = {styles.MainContainer}>
<TouchableOpacity onPress={this.apply_Green} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> APPLY GREEN COLOR </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.apply_Sky_Blue} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> APPLY SKY BLUE COLOR </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.apply_Orange} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> APPLY ORANGE COLOR </Text>
</TouchableOpacity>
</View>
);
}
|
11. Create StackNavigator activity calling structure and call the MainActivity inside it. This step is very important.
|
1
2
3
4
5
6
|
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
|
12. Create CSS Style 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
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#FAFAFA’
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#9E9E9E’,
borderRadius:7,
marginTop: 12
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
13. Complete source code for App.js File :
|
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, YellowBox, TouchableOpacity } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
constructor(props) {
super(props);
YellowBox.ignoreWarnings(
[‘Warning: isMounted(…) is deprecated’, ‘Module RCTImageLoader’
]);
}
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(‘Title’, ‘Default Title’),
headerStyle: {
backgroundColor: navigation.getParam(‘BackgroundColor’, ‘#E040FB’),
},
headerTintColor: navigation.getParam(‘HeaderTintColor’, ‘#fff’)
};
};
apply_Green=()=>{
this.props.navigation.setParams({Title: ‘Green Activity’, BackgroundColor : ‘#1B5E20’, HeaderTintColor : ‘#fff’});
}
apply_Sky_Blue=()=>{
this.props.navigation.setParams({Title: ‘Sky Blue Activity’, BackgroundColor : ‘#2979FF’, HeaderTintColor : ‘#fff’});
}
apply_Orange=()=>{
this.props.navigation.setParams({Title: ‘Orange Activity’, BackgroundColor : ‘#FF3D00’, HeaderTintColor : ‘#fff’});
}
render()
{
return(
<View style = {styles.MainContainer}>
<TouchableOpacity onPress={this.apply_Green} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> APPLY GREEN COLOR </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.apply_Sky_Blue} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> APPLY SKY BLUE COLOR </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.apply_Orange} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> APPLY ORANGE COLOR </Text>
</TouchableOpacity>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#FAFAFA’
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#9E9E9E’,
borderRadius:7,
marginTop: 12
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshots:
Also Read :
React Native Show Realm Database Data into ListView Android iOS Example Tutorial
React Native Create App Intro Slider Welcome Walk-through Screen
React Native flexDirection Row Column Explained iOS Android example
React Native Simple Custom GridView Layout Android iOS Tutorial
Create PDF File using HTML Text in React Native Android iOS Example
