StackNavigator’s default Title Text Color is chilled black but some times user required to change it according to its need. Using the headerTintColor: ‘ ‘ style’s property of navigationOptions we can set the ActionBar’s inside Text color. So in this tutorial we would going to set Change Activity Action Bar Title Text Color in StackNavigator in react native Android iOS application.
Contents in this project Change Activity Action Bar Title Text Color in StackNavigator in React Native iOS Android app:
1. First step is to install the Latest version of React Navigation library from its official website. To install open your react native project folder in command prompt and execute
npm install —save react–navigation command.
Screenshot of CMD after successfully installing this library:
2. Import StyleSheet, View and Text component in your project, We have to also import the StackNavigator module from react navigation library to use Activity structure.
|
1
2
3
4
5
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
|
3. Create a Class named as MainActivity, This would be our first activity class.
|
1
2
3
4
|
class MainActivity extends Component {
}
|
4. Create static navigationOptions in your MainActivity class.
title : Used to Set Title of Activity shows inside Action Bar.
backgroundColor : Used to Set background color of Action bar.
headerTintColor : Used to set Text Color of Title display inside Action bar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#FFC107’
},
headerTintColor: ‘#fff’,
};
|
5. Creating a Root View with some text in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 22}}> Hello Friends </Text>
</View>
);
}
|
6. Complete Source Code of MainActivity class.
Note : We are only creating 1 class in this tutorial.
|
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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#FFC107’
},
headerTintColor: ‘#fff’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 22}}> Hello Friends </Text>
</View>
);
}
}
|
7. Creating Creating StackNavigator’s default activity calling method and define your created Activity inside it, Without this method we cannot call Activities in our project.
|
1
2
3
4
5
6
7
|
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#fff’
}
});
|
9. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#FFC107’
},
headerTintColor: ‘#fff’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 22}}> Hello Friends </Text>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#fff’
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native Show Realm Database Data into ListView Android iOS Example Tutorial
React native Download Image from URL into Gallery folder Android iOS Example
React Native Create FlatList using JSON Parsing Data Example Tutorial
React Native Make a Phone Call – Open Phone Number in Dial Screen
React Native Change Image Source Dynamically using State on Button Click
