Custom TabBarIcon hidden under DrawerNavigator

[domlimm]

Current Behavior

I have tried searching on issues here, StackOverflow and other articles but can't seem to find a solution. Initially, I suspected it could be because of the styling of the custom-made TarBarIcon component but much reading later I found out it's because of how my BottomTabsNavigator is nested inside DrawerNavigator. I tried vice versa but it gave me weird behaviours.

Navigation flow:

AppNavigator
  Authenticated ? DrawerNavigator : AuthNavigator

// Inside DrawerNavigator:
DrawerNavigator
  BottomTabsNavigator
  Rest of the screens

Expected Behavior

• What do you expect should be happening? The custom-made TabBarIcon should be completely visible.

How to reproduce

For easier viewing, this is the repo link (i.e. ./navigation, ./screens/Auth

AppNavigator (main file i.e. NavigationContainer)

AppNavigator.js:

// AppNav uses StackNavigation
<NavigationContainer>
  <Navigator headerMode='none'>
    {authenticated && !isLoading ? (
      <Screen name='DrawerNavigator' component={DrawerNavigator} />
    ) : !authenticated && !isLoading ? (
      <Screen name='AuthNavigator' component={AuthNavigator} />
    ) : (
      <Screen name='Loading' component={LoadingScreen} />
    )}
  </Navigator>
</NavigationContainer>

DrawerNavigator

// I am using a UI library, UI kitten for the Drawer. But I don't think this is the cause
const { Navigator, Screen } = createDrawerNavigator();

const DrawerNavigator = () => (
  <Navigator
    drawerContent={props => <DrawerContent {...props} />}
    initialRouteName='BottomTabsNavigator'
  >
    <Screen name='BottomTabsNavigator' component={BottomTabsNavigator} />
    <Screen name='ChangePassword' component={ChangePasswordScreen} />
    <Screen name='AuthNavigator' component={AuthNavigator} />
    <Screen name='UserProfile' component={UserProfileScreen} />
    <Screen name='EditProfile' component={EditProfileScreen} />
    <Screen name='ActivityFeed' component={ActivityFeedScreen} />
  </Navigator>
);

BottomTabsNavigator

const BottomTabs = createBottomTabNavigator();

const BottomTabsNavigator = ({ navigation }) => {
  return (
    <BottomTabs.Navigator
      tabBarOptions={{
        showLabel: false,
        activeTintColor: '#407BFF'
      }}
      initialRouteName='Home'
    >
      <BottomTabs.Screen
        name='Home'
        component={MainAppScreen}
        options={{
          tabBarIcon: Some Icon
        }}
      />
      <BottomTabs.Screen
        name='TeamUp'
        component={TeamUpScreen}
        options={{
          tabBarIcon: () => <TeamUpBottomTab navigation={navigation} /> // Custom made 'Icon'
        }}
      />
      <BottomTabs.Screen
        name='ChatOverview'
        component={ChatOverviewScreen}
        options={{
          tabBarIcon: Some Icon
        }}
      />
    </BottomTabs.Navigator>
  );
};

The Icon:

import { Pressable, Animated, Image } from 'react-native';

<Pressable onPress={pressHandler} style={styles.teamUp}>
  <Animated.View style={[{ transform: [{ scale: animatedScale }] }]}>
    <Image
      style={styles.logo}
      source={require('../../assets/images/orbital-logo.png')}
    />
  </Animated.View>
</Pressable>

Your Environment

software	version
iOS or Android	Android
@react-navigation/native	^5.9.4
@react-navigation/bottom-tabs
react-native-screens	^5.11.11
react-native	https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz
expo	~41.0.1
node	14.16.1
npm or yarn	npm

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[stharvey]

I'm having the exact same issue. @domsterthebot Did you find a solution to this? If not I'll put together snack example showing the issue.

[stharvey]

Hello again,

I have created a Snack to demonstrate this issue. Excuse the crudeness of the code, I just put it together quickly to demonstrate the issue.

With version "@react-navigation/bottom-tabs": "5.11.4" and above the large center icon is clipped to the bounds of the tab bar:

With version "@react-navigation/bottom-tabs": "5.11.3" and below it shows as intended:

I have only tested on Android.

Here are the snack links:

Working as intended: https://snack.expo.io/@pebbls/icon-issue---bottom-tabs-5-11-3

Not working as intended: https://snack.expo.io/@pebbls/icon-issue---bottom-tabs-5-11-4

[stharvey]

I have tried reducing the @react-navigation/bottom-tabs version number in my actual app down to 5.11.3 and that hasn't fixed the issue so there must be more to it than that.

Interestingly, in my app, if I wrap the Tab.Navigator element in a touchable component (such as TouchableOpacity) the icon shows as expected with the large center icon showing fully.

Update: By wrapping the Tab.Navigator with <Pressable style={{ flex: 1 }} disabled> the layout appears as intended... and with "disabled" set it appears that this doesn't affect the function of the app.

[domlimm]

I'm having the exact same issue. @domsterthebot Did you find a solution to this? If not I'll put together snack example showing the issue.

Hello @stharvey ! Sincere apologies for the late reply! No, I still haven't found a solution for it. I did search high and low for like 5 days but to no avail. Saw from a YouTube video that people are facing this issue too. This is actually my school project which is due in Aug 21. Decided to leave it as a View for now.

With that said, let me look at what you've commented below and will update you then! Thanks Harvey!

[domlimm]

Hi @stharvey , thanks so much for the effort of providing the Snacks and trying to workaround the issue! Seriously, thank you! so funny thing... My teammate and I had to create new nested stack navigators for various reasons, and I refactored the entire App Navigation, somehow the custom tabBarIcon is fixed!

The DrawerNavigator now holds a StackNavigator and the BottomTabsNavigator is in it.

[jimpala]

Also facing this issue and can confirm that wrapping the <BottomTab.Navigator> with <Pressable style={{ flex: 1 }} disabled> functions as a workaround for me, thanks @stharvey !

[ydv0121]

I have tried reducing the @react-navigation/bottom-tabs version number in my actual app down to 5.11.3 and that hasn't fixed the issue so there must be more to it than that.

Interestingly, in my app, if I wrap the Tab.Navigator element in a touchable component (such as TouchableOpacity) the icon shows as expected with the large center icon showing fully.

Update: By wrapping the Tab.Navigator with <Pressable style={{ flex: 1 }} disabled> the layout appears as intended... and with "disabled" set it appears that this doesn't affect the function of the app.

Great workaround. worked like a charm. Thank you