Every activity in react native has its own static navigationOptions method used to style the header of Title Bar. This method has many sub properties and one of them is headerStyle{} used to set background color of Action Bar header. The headerStyle{} has a property named as backgroundColor used to Change Activity Actionbar Header Background Color in Android iOS Example Tutorial.
Contents in this project Change Activity Actionbar Header Background Color in Android iOS React Native Example Tutorial:
1. We are using the React Navigation official library to implement Activity Structure in our react native app. To install the React Navigation library in your existing project Open your App_Project_Folder and execute the
npm install —save react–navigation command like i did in below screenshot.
Screenshot after successfully installed this library:
2. Import StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
|
3. Import StackNavigator from react navigational library.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
4. Create a class named as MainActivity in your App.js file, this would be our main class. We are only creating 1 class in this project to make this easier to understand if you want to learn more about Activity then read my this tutorial.
|
1
2
3
4
|
class MainActivity extends Component {
}
|
5. Create static navigationOptions in your class.
title : Used to Set Action Bar Title Heading.
headerStyle : Used to style the header.
backgroundColor : Used to set background color of Activity Action bar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#00BCD4’
}
};
}
|
6. Creating render’s return block in MainActivity class with some text.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 20}}> Hello Guys </Text>
</View>
);
}
|
7. Complete Source code of MainActivity 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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#00BCD4’
}
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 20}}> Hello Guys </Text>
</View>
);
}
}
|
8. This step is very important, So finally we have to create a StackNavigator() class calling objects. This would used to navigate between activities.
|
1
2
3
4
5
6
7
|
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#fff’
}
});
|
10. 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
|
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: ‘#00BCD4’
}
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={{fontSize: 20}}> Hello Guys </Text>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#fff’
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
System UI isn’t responding Android Emulator React Native Error Solution
React Native Create ViewPager with Tab Title Dot Indicators iOS Android
React Native WebView Android iOS Installation Example Tutorial
React Native Add Items To FlatList Dynamically using TextInput on Button Click
React Native Set Change Text Component Value Dynamically on Button Click
