Search code examples
react-nativestylesreact-navigation

Applying an indicator border to selected tab in react native tab navigation

I am trying to apply a top border to selected tabs in react (native) tab navigation but was not able to figure it out.

I saw in other solutions that there is an "indicatorStyle" but I could not add it, looks like it is deprecated or something.

Please see the images and code below:

My tab navigator:

My tab navigator

Desired tab navigator example:

Desired tab navigator

This is my Tab navigator:

import * as React from 'react';
import {  Text, View, Dimensions } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import {mainColor, seperatorColor, textColor} from '../../styles'

//Components stacks
import HomeStackScreens from './HomeStack'
import JoinStackScreens from './JoinStack'
import ProfileStackScreens from './ProfileStack'
import CreateRideStackScreens from './CreateRideStack'

import {homeIcon, profileIcon, messagesIcon, addRideIcon, JoinIcon} from '../../components/global/Icons'

import {navigationConsts, stackNavigationsConsts} from '../../constants/NavigationConsts'
import { color } from 'react-native-reanimated';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!12</Text>
    </View>
  );
}

const AnotherStack = createStackNavigator();

function AnotherStackScreen() {
  return (
    <AnotherStack.Navigator>
      <AnotherStack.Screen name="Details" component={DetailsScreen} />
    </AnotherStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function MainTabNavigator() {
  return (
      <Tab.Navigator 
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      
      tabBarOptions={{
        tabStyle:{
          borderTopColor:mainColor.MainBackgroundColor, 
          // borderTopWidth:1.2, 
          // paddingVertical: 2,
          
        },
        activeTintColor: mainColor.MainBackgroundColor,
        inactiveTintColor: textColor.tabIcon,
        activeBackgroundColor: mainColor.backgroundColorWhite,
        inactiveBackgroundColor: mainColor.backgroundColorWhite,
        keyboardHidesTabBar: true,
        showLabel: false,
        borderTopWidth:24,
        borderTopColor:'red'
      }}
     
      
      >
        <Tab.Screen name={stackNavigationsConsts.HOME_STACK} component={HomeStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.HOME,
          tabBarIcon: ({ color, size }) => (
            homeIcon(color)
          ),
          }}
          tabStyle={{
            borderTopWidth:24,
            borderTopColor:'red'
          }}
          />
          <Tab.Screen name={stackNavigationsConsts.PROFILE_STACK} component={ProfileStackScreens} options={{ 
          tabBarLabel: navigationConsts.PROFILE ,
          tabBarIcon: ({ color, size }) => (
            profileIcon(color)
          ),
         
          }}/>
        <Tab.Screen name={stackNavigationsConsts.JOIN_STACK} component={JoinStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.JOIN ,
          tabBarIcon: ({ color, size }) => (
            JoinIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.NOTIFICATIONS_STACK} component={AnotherStackScreen} options={{ 
          tabBarLabel: navigationConsts.NOTIFICATIONS ,
          tabBarIcon: ({ color, size }) => (
            messagesIcon(color)
          ),
          tabBarBadge: 12
          }}/>
        <Tab.Screen name={stackNavigationsConsts.ADD_RIDE_STACK} component={CreateRideStackScreens} options={{ 
          tabBarLabel: navigationConsts.ADD_RIDE ,
          tabBarIcon: ({ color, size, focused }) => (
            addRideIcon(color)
          ),
          }}/>
        
      </Tab.Navigator>
  );
}
Solution

  • The solution is to create a custom TabBar component and pass it as the tabBarButton in the options when creating tab screens.

    You can view the answer in this thread - How to add a line at top of the bottom tab when the current tab is active in react navigation 5