React Native Set Header Bar Title Text in React Navigation 5.x

Header Bar also known as Action bar in android and iOS devices is used to display useful information about application screen in single text. There are always a title present on header bar which is known as Header bar Title text. In latest version of react navigation 5.x we can use the options={{}} prop of Stack Screen to show Title text on header bar. So in this tutorial we would React Native Set Header Bar Title Text in React Navigation 5.x Android iOS Example.

Contents in this project React Native Set Header Bar Title Text in React Navigation 5.x Android iOS Example Tutorial:

1. The first step before started the coding is to install the latest version of React Navigation in your react native app. I have already make few tutorials regarding to installation of React Navigation latest version in react native project. So you can read them here. You have to read installation tutorial because without the installation we cannot use react navigation features.

2. After done installing we have to import react-native-gesture-handler and StyleSheet, Text, View component in your project’s main App.js file.

3. Import NavigationContainer and createStackNavigator component in your app’s main App.js file.

4. Create a function named as HomeActivity. This is our first home screen for application. In latest version of react navigation the defining structure has changed. So we would functions instead of classes.

5. Create a constant type of createStackNavigator(). We would use this Stack with Navigator to set the screens.

6. Create a function named as App(). Now we would make a Navigation Container in the return area of App. Inside the return area we would define the Screen using Stack.Screen. We would here use options={{}} prop to set the Action Header bar title text for particular screen.

7. Creating Style.

8. Creating Style.

9. Now we have to finally export our default main App() function.

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

Screenshot:

React Native Set Header Bar Title Text in React Navigation 5.x

Leave a Reply

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