React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native

In React Navigation latest 5.x version we can easily manage header bar options using screenOptions={{}} prop. The screenOptions prop has multiple header bar styling sub-prop like headerStyle, headerTintColor and headerTitleStyle. Using all of these available props we can properly configure header bar background color, header bar text color, header bar text style and also text alignment. So in this tutorial we would React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native Android iOS Example Tutorial.

Contents in this project React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native Android iOS Example Tutorial:

1. Before getting started using react navigation latest version 5.x we have to install the library in our current react native project. So i have already make a tutorial on it, Read it here before getting started.

2. After successfully installed the react navigation 5.x, Open your project’s main App.js file and import react-native-gesture-handler, StyleSheet, Text, View, NavigationContainer and createStackNavigator components.

3. Create a function named as HomeActivity. In react native latest version all the screens will be handled using functions. We have to create a return() method in current function and pass the View inside it. This is our first screen.

4. Create a constant named as Stack works as createStackNavigator() object.

5. Create a function named as App. This is our main portion of code where we would define Stack wrap inside NavigationContainer. If your app has multiple screens then you have to pass them all here.

  1. backgroundColor : Used to set background color Header Bar.
  2. headerTintColor : Used to set Title text color.
  3. headerTitleStyle : Used to set header bar.

6. Creating Style.

7. Calling our default main function App using export default syntax.

8. Complete Source Code for App.js file class:

Screenshots:

React Navigation 5.x Configure Header Bar Title Text Style Background Color in React Native

Leave a Reply

Your email address will not be published.