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.

In most cases, we use text as the title for a screen. But, we might need to use one image or logo to display instead of a title in some cases. Thankfully, the react-navigation library provides an easy way to do that, and without doing any major code 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 return one Image which will be 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 :

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 these, it will not automatically adjust it. You will get the below output if you remove the style props :

It distorted the image.

Placing the image on the left and right end :

headerTitle placed the logo in the 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")}
      />
    ),
  }}
/>

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

CodeVsColor

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

Introduction :

Example program :

Height and widths are important :

Placing the image on the left and right end :

You might also like: