React Native Change Activity Action Bar Title Text Color StackNavigator

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.

3. Create a Class named as MainActivity, This would be our first activity class.

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.

5. Creating a Root View with some text in render’s return block.

6. Complete Source Code of MainActivity class.

Note : We are only creating 1 class in this tutorial.

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.

8. Creating Style.

9. Complete source code for App.js File :

Screenshot in Android device:

Change Activity Action Bar Title Text ColorScreenshot in iOS device:

Leave a Reply

Your email address will not be published. Required fields are marked *