How to add an indicator under the active bottom tab?

Question

I need to add an indicator for the active tab I tried to add a borderBottom with tabStyle but we can't check focused with that.

Using react-navigation v5 and createBottomTabNavigator for bottom tabs.

Here's my code:

<BottomTab.Navigator
      tabBarOptions={{
        activeTintColor: colors.brown,
        labelPosition: 'below-icon',
      }}>
      <BottomTab.Screen
        name="Home"
        component={HomeTabNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused}) => {
            return focused ? (
              <HomeSelectedIcon height={ms(24)} width={ms(24)} />
            ) : (
              <HomeIcon height={ms(24)} width={ms(24)} />
            );
          },
        }}
      />
     ...
    </BottomTab.Navigator>
  );
};

Thanks in advance!

Answer 1

I figured it out myself by making a custom tabbar icon if someone needs to achieve this using the bottom-tab bar only.

Here's the code.

<BottomTab.Navigator
      tabBarOptions={{
        activeTintColor: colors.brown,
        showLabel: false,
        tabStyle: styles.tabStyle,
        style: styles.tabContainerStyle,
      }}>
      <BottomTab.Screen
        name="Home"
        component={HomeTabNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused}) => {
            return focused ? (
              <View style={styles.labelFocusedContainer}>
                <HomeSelectedIcon height={24} width={24} />
                <Text style={styles.labelFocusedStyle}>Home</Text>
              </View>
            ) : (
              <View style={styles.labelContainer}>
                <HomeIcon height={24} width={24} />
                <Text style={styles.labelStyle}>Home</Text>
              </View>
            );
          },
        }}
      />
   ...
</BottomTab.Navigator>

const styles = StyleSheet.create({
  labelContainer: {
    alignItems: 'center',
    width: '100%',
  },
  labelFocusedContainer: {
    alignItems: 'center',
    width: '100%',
    borderBottomWidth: 3,
    borderBottomColor: colors.brown,
  },
  labelFocusedStyle: {
    textAlign: 'center',
    marginVertical: 8,
    color: colors.brown,
    backgroundColor: 'transparent',
    fontSize: 10,
  },
  labelStyle: {
    textAlign: 'center',
    marginVertical: 8,
    color: colors.veryDarkgray,
    backgroundColor: 'transparent',
    fontSize: 10,
  },
});

But the best and easy way to do this is by using createMaterialTopTabNavigator and using these props.

tabBarPosition="bottom"
      tabBarOptions={{
        showIcon: true,
        pressOpacity: 1,
        iconStyle: styles.iconStyle,
        showLabel: true,
        activeTintColor: colors.brown,
        indicatorStyle: {
          borderWidth: 2,
          borderColor: colors.brown,
        },