React navigation tutorial 8: How to add one image as the header title

Introduction :

In this post, I will show you how to add one image as the header title using react native navigation library. Mostly we use a text as the title for a screen. But, sometimes we might need to use one image or logo to display instead of a title. Thankfully, the react-navigation library provides an easy way to do that and without doing any major change, we can achieve it.

Example program :

To use one Image as the header image, we need to pass it as the headerTitle. We can pass one function to headerTitle props that returns one Image that is used as the header image. We can give the height and width of the title image to make it fit in the header.

Let’s take a look at the example screen below :

<Stack.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{
    headerTitle: () => (
        <Image
        style={{width: 50, height: 50}}
        source={require('./logo.png')}
        />
    ),
    }}
/>

logo.png is placed on the root folder with App.js and we are using the Stack.Navigator in App.js.

If you run this program, it will give the below result :

react navigation add image

logo.png is the robot image that is showing in the header.

Height and widths are important :

In the above example, we are providing one height and one width to the image. If we don’t provide any of them, it will not automatically adjust it. You will get the below output if you remove the style props :

react navigation add image header

It distorted the image.

Placing the image on left and right end :

headerTitle placed the logo in center. If you want to place it on left, you can use headerLeft or if you want it on right, you can use headerRight.

For the below change :

<Stack.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{
    headerLeft: () => (
        <Image
        style={{width: 30, height: 30, margin: 20}}
        source={require('./robot.png')}
        />
    ),
    }}
/>

react navigation header icon left

Similarly, you can use headerRight to place the logo to the right end of the header.

Where is the color and why codevscolor ?

Long story short, I love paintings and I paint on weekends. We(me and my wife) have one Youtube channel. Don't forget to subscribe ❤️❤️🤩