React Native Show Image Icon Inside Activity Header Title Bar in React Navigation

Image icon in activity action bar is used to mostly display user image while creating a social chatting application in react native. We are using many social apps like Whats’App and Hike and all of them usages this feature. When we open our friends profile then it will show us his picture at the top left side of screen inside Title bar. We can render the image using headerLeft property of static navigationOptions. So in this tutorial we would going to add Show Image Icon Inside Activity Header Title Bar at left side in React Navigation android iOS react native application. So let’s get started 🙂 .

Contents in this project Show Image Icon Inside Activity Header Title Bar in React Navigation iOS Android react native app:

1. Before going further we need to install the latest version of React Navigation library in our react native project. So open your project folder in command prompt like i did in below screenshot and execute below command.

2. Screenshot of Command prompt after successfully installed React Navigation library.

3. Import StyleSheet, View, Text, Image component in your project.

4. Import StackNavigator module from react navigation library.

5. Create a new class named as ActionBarImage, We would used this class to render Image Profile Icon at the top left side of Header in react navigation. I am using my image from Gravatar URL.

6. Create your main class named as MainActivity, This class is our main class and used as our Main Application screen.

7. Create static navigationOptions in your MainActivity class, This method is inbuilt method of React Navigation and used to main header style options.

title : Used to set Header Title.

headerLeft : We would call the ActionBarImage class as render component, This would render the Image icon inside Action bar.

backgroundColor : Used to set background color of Header.

headerTintColor : Used to set Header Title text color.

8. Create render’s return block in MainActivity and render your components inside it.

9. Create StackNavigator project activity calling method and define your Activity as FirstScreen. You need to define all of your Activity classes inside this block to navigate them correctly.

10. Creating Style.

11. Complete source code for App.js File :

Screenshot in Android device:

Show Image Icon Inside Activity Header Title BarScreenshot in iOS device:

2 Comments

  1. how add a event with navigate another page on pressing on that header image?

Leave a Reply

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