React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial

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.

3. Import StackNavigator from react navigational library.

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.

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.

6. Creating render’s return block in MainActivity class with some text.

7. Complete Source code of MainActivity class.

8. This step is very important, So finally we have to create a StackNavigator() class calling objects. This would used to navigate between activities.

9. Creating Style.

10. Complete source code for App.js File :

Screenshot in Android device:

Change Activity Actionbar Header Background ColorScreenshot in iOS device:

Leave a Reply

Your email address will not be published.