Let Tab.Screen overflow the Tab.Navigator with material bottom tab navigator | React Native

Question

I want to overflow my center button the navigator bar so it looks like this:

But when I try to overflow the tab screen it cuts off the whole view and it looks like this:

How can I fix this issue?

This is the code for the App.tsx:

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { FontAwesome5 } from '@expo/vector-icons'; 
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { useTheme } from 'react-native-paper';
import Overview from './app/screens/Overview'
import Friends from './app/screens/Friends';
import { View } from 'react-native';

const Tab = createMaterialBottomTabNavigator();
export default function App() {
  const theme = useTheme();
  theme.colors.secondaryContainer = "transperent"
  return (
      <NavigationContainer>
        <Tab.Navigator 
          sceneAnimationEnabled={false}
          shifting={true}
          labeled={false}
          initialRouteName='Overview' 
          activeColor='lime'
          inactiveColor='white'
          barStyle={{ backgroundColor: '#5CB724', height: 80, overflow: 'visible'}}
        >
          
          <Tab.Screen 
            name="Home" 
            component={Overview}
            options={{
              tabBarColor: '#FF0022',
              tabBarIcon: ({color}) => (
                <Ionicons name="person" color={color} size={26} />
              ),
            }}
          />
          <Tab.Screen 
            name="Chart" 
            component={Friends}
            options={{
              tabBarIcon: ({color}) => (
                <AntDesign name="linechart" color={color} size={26} />
              ),
            }}
          />
          <Tab.Screen 
            name="AddWeight" 
            component={Overview}
            options={{
              tabBarIcon: ({color}) => (
                <View
                  style={{
                    position: 'absolute',
                    bottom: 10,
                    height: 100,
                    width: 100,
                    justifyContent: 'center',
                    alignItems: 'center',
                    zIndex: 10000,
                    overflow: 'visible'
                  }}
                >
                  <AntDesign name="pluscircleo" size={60} color={color} />
                </View>
                
              ),
            }}
          />
          <Tab.Screen 
            name="Friends" 
            component={Friends}
            options={{
              tabBarIcon: ({color}) => (
                <FontAwesome5 name="user-friends" size={26} color={color} />
              ),
            }}
          />
          <Tab.Screen 
            name="Settings" 
            component={Friends}
            options={{
              tabBarIcon: ({color}) => (
                <Ionicons name="settings" size={26} color={color} />
              ),
            }}
          />

        </Tab.Navigator>
      </NavigationContainer>
  );
}

I tried to render a view for the icon so I can add some style and let the icon overflow. I also changed the zIndex on the actual screens and on the icon view. I expected that this would let the view overflow so my button is outside of the navigator. But somehow it just cuts off the button.

Answer 1

I believe you should use tabBarButton prop with the absolute styling and stuff and the tabBarIcon should be for the icon itself

tabBarButton: (props) => <TouchableOpacity {...props} />;

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarbutton