react-nativereact-native-navigationreact-native-paper

How to remove overflow from Material Bottom Tabs navigator, react native

I'm trying to add a big button in the middle of a material bottom tabs navigator.

The version i'm using is 6.2.17,

I get that it is easy to do with createBottomTabsNavigator, but I would like to stick with the createMaterialBottomTabsNavigator because of all the animations that it provides,

Using the MaterialBottomTabs whenever i add a button that goes on top of the edges it just cuts of as it has an overflow hidden, my question is how to remove this overflow in order to show the middle button

enter image description here

Solution

  • The alternative solution is to place the button outside of the tab navigator and use absolute position to place it on top of the tab bar. Something like this:

    <>
  <View
    style={{
      position: 'absolute',
      bottom: 20,
      alignSelf: 'center',
      zIndex: 1
    }}>
    <TouchableOpacity>
      ...
    </TouchableOpacity>
  </View>
  <Tab.Navigator>
...
  </Tab.Navigator>
</>

    See Absolute & Relative Layout for details.