Search code examples
react-nativeexporeact-navigation-v5react-navigation-drawerreact-navigation-bottom-tab

expo react-navigation 5.x, Bottom Tab Navigator works differently on IOS and Android when wrapped in Drawer Navigator


wanted to implement Bottom Tab Navigator with a Custom Styled Central Tab Icon and a DrawerNavigator. When the BottomTab is wrapped with DrawerNavigator, the Center Button that has roundness gets clipped on Android (ok on IOS)

For Android

enter image description here

For IOS it is fine, with or without Drawer wrap enter image description here

A working snack of above is below to toggle both states (with DrawerNavigator + Bottom Navigator Vs Bottom Navigator)

Again issue is only on Android

https://snack.expo.dev/@haniq313/bottomtab-custom-center-icon

The issue is not there with react-navigation 6.x. But need to make this work on React-Navigation 5.x


Solution

  • https://github.com/react-navigation/react-navigation/issues/9615

    for this looking for a solution. It is a known bug in navigation 5.x and as metioned can be fixed by Wrapping the whole Tab.Navigator in a

    <Pressable style={{ flex: 1, }} disabled > <Tab.Navigatior> ......... </Tab.Navigator>