Add Image Icon inside Navigation bar in React native

Hi guys, In this article, we going to learn about Add Image Icon inside Navigation bar in React Native. as you all know in React Native we use React Navigation to navigate between screens in the React Native application. Sometimes developers need to add an Image Icon on the header navigation bar. so there are three ways to add an Image Icon inside the navigation bar in React Native application.

First, we can add an image in stack.navigator which shows an Image Icon for all screens header inside Stack navigator. Second, Add an Icon for a particular screen defined inside Stack Navigator. Third, Add a navigation bar inside a particular screen. so let's start with examples one by one.

To setup React Navigation v6 check this post.

How to add Image Icon inside Navigation bar in React native

 

1. Add a global Image Icon

After doing complete setup for React Navigation v6. add following code in you App.js in your React-Navigation setup.

This will display the Image Icon on all screens in your application. Add this code to your App.js file inside React NavigationContainer. After adding these screenOptions to Stack.Navigator you don't need to add an Image Icon to each and every screen.

  <Stack.Navigator
          initialRouteName="Dashboard"
          screenOptions={({navigation}) => {
            return {
              // headerLeft: () => <HeaderLeft navigation={navigation} />,
               headerTitle: () => <HeaderTitle navigation={navigation} />,
              //headerRight: () => <HeaderRight navigation={navigation} />,
            };
          }}>
          <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

2. Add an Image Icon to the particular screen

The above code will display Image Icon on a particular screen header navigation bar. This options will use when you want to add different header Images Icon for different screen. so, First It will displayed screenOptions from Stack.Navigator then It will render header options added for particular Stack.Screen.

<NavigationContainer>
      <Stack.Navigator
        initialRouteName="Dashboard">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
        <Stack.Screen
          name="Dashboard"
          component={Dashboard}
          options={({navigation}) => {
            return {
              // headerLeft: () => <HeaderLeft navigation={navigation} />,
               headerTitle: () => <HeaderTitle navigation={navigation} />,
              //headerRight: () => <HeaderRight navigation={navigation} />,
            };
          }}
        />
      </Stack.Navigator>
</NavigationContainer>

3. Add Image Icon inside screen function

You can add this code inside the function in each UI screen. you need to use React.useLayoutEffect to show the Navigation bar option inside the screen. This navigation.setOptions will use when you want to do some dynamic changes in on Navigation header.

const HomeActivity = ({navigation}) => {
 React.useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => {
        return <HeaderTitle navigation={navigation} />;
      },
    });
  }, [navigation]);
  return (
   <View></View>
  );
}

4. Output

 

Thank you đŸ™‚

Leave a Reply

Your email address will not be published.