Tab Navigation bottom Icon as per selection

Question

I want to make custom tab navigation icon as per below

So i make code like below

const Tab = createBottomTabNavigator();

function TabNavigationStack(props: any) {
  return (
   <Tab.Navigator
     tabBarOptions={{
    activeTintColor: colors.kBlack,
    visible: false,
    keyboardHidesTabBar: true,
   }}>
    <Tab.Screen
     name="Shop"
     component={ShopScreen}
     options={({route}) => ({
      tabBarIcon: ({focused}) => (
        <TabBarIconsView icon={images.Shop} focused={focused} />
      ),
    })}
   />
  <Tab.Screen
    name="Bag"
    component={BagScreen}
    options={({route}) => ({
      tabBarIcon: ({focused}) => (
        <TabBarIconsView icon={images.Bag} focused={focused} />
      ),
    })}
  />
  <Tab.Screen
    name={'Kollection'}
    component={KollectionScreen}
    options={({route}) => ({
      tabBarIcon: ({focused}) => (
        <TabBarIconsView icon={images.Kollection} focused={focused} />
      ),
    })}
  />
  <Tab.Screen
    name="Profile"
    component={ProfileScreen}
    options={({route}) => ({
      tabBarIcon: ({focused}) => (
        <TabBarIconsView icon={images.Profile} focused={focused} />
      ),
    })}
  />
</Tab.Navigator>

); }

My custom tabIcon Component as below

const TabBarIconsView = (props: TabViewProps) => {
const {focused, icon} = props;
return (
<>
  <ImageView
    source={icon}
    style={[styles.imageStyle]}
    resizeMode="contain"
    tintColor={focused ? colors.kBlack : colors.IBlack}
  />
  {focused && (
    <ImageView
      source={images.TabStar}
      style={styles.imageStarStyle}
      resizeMode="contain"
    />
  )}
  </>
 );
};

 const styles = StyleSheet.create({
  imageStyle: {
   height: 20,
   width: 20,
  },
  imageStarStyle: {
   height: 10,
   width: 10,
   },
 });

So when i run this i got below output

Can anybody tell me how I can achieve star icon below text in Tab Navigation ?

Answer 1

You can do this by rendering the custom label as:

<Tab.Screen
      name="Shop"
      component={ShopScreen}
      options={({route}) => ({
        tabBarLabel: ({focused}) => (
          <>
            <Text style={[styles.tabBarlabel, focused && styles.labelFocused]}>
              {route.name}
            </Text>
            {focused && (
              <ImageView
                source={images.TabStar}
                style={styles.imageStarStyle}
                resizeMode="contain"
              />
            )}
          </>
        ),
      })}
    />

Add the styling as needed and this will render the star under text.