React Native Custom icon / image in Tab.Screen navigation

Question

I have a bottomtab in my React Native setup;

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="News" component={News} />
    <Tab.Screen name="Mens" component={Mens} />
    <Tab.Screen name="Ladies" component={Ladies} />
    <Tab.Screen name="Watch" component={Fixtures} />
  </Tab.Navigator>
</NavigationContainer>

What I'd like to do is add in the middle a dummy Tab so I can add a custom icon;

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="News" component={News} />
    <Tab.Screen name="Mens" component={Mens} />
    <Tab.Screen name="logo" />
    <Tab.Screen name="Ladies" component={Ladies} />
    <Tab.Screen name="Watch" component={Fixtures} />
  </Tab.Navigator>
</NavigationContainer>

The challenge I'm having is where to start (TabBarOptions doesn't appear to work within the tab.screen). I've found loads of explains (they seem like overkill for adding an icon), but they all use pre-defined icon sets. What I want to do is create an icon from a custom image and then use that for the logo tab so it appears in my bottom navigation.

A custom png file. I can make ico, svg, etc... graphics, but I'd rather just be able to specify a image inline of the Tab.Screen name="logo" — Carl Bruiners

Guruparan Giritharan Guruparan Giritharan · Accepted Answer · 2020-05-31T12:31:40

You can set the tabbaricon like below. The there are parameters for focused as well which you can use to set images based on condition.

       <Tab.Screen
          name="Settings1"
          component={SettingsScreen}
          options={{
            title: 'My profile',
            tabBarIcon: ({size,focused,color}) => {
              return (
                <Image
                  style={{ width: size, height: size }}
                  source={{
                    uri:
                      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
                  }}
                />
              );
            },
          }}
        />

React Native Custom icon / image in Tab.Screen navigation

1 Answers