im using react navigation v6 and have a drawer navigator that i want to remove the hamburger button from the header
Related
I read the documentation of react-navigation to create drawer and tab navigator.
The drawer is good but the tab navigator does not meet my need.
I wish a bottom tab navigation was a shorcut to drawer menu and it should be displayed to all other screen.
Drawer menu I have :
Menu A / Menu B / Menu C / Menu D
And in a bottom tab I don't want new screen navigation but just a shortcut navigation to Menu A and Menu D.
I managed to initiate what I wish with this
<>
<Drawer.Navigator>
<Drawer.Screen ...>
<Drawer.Screen ...>
</Drawer.Navigator />
<CustomBottomNavigation />
</>
The CustomBottonNavigation use BottomNavigation of react-native-paper.
Work fine but the drawer menu does not pass in front of the bottom navigation (expected implementation behaviour)
So my question, is a better way to do this ?
I search about a way to pass a component that should be displayed to all drawer screen but react-navigation drawer don't have a param to do this (to my knowledge).
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
For IOS it is fine, with or without Drawer wrap
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
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>
How can I change React Native UI Kitten Change hamburger icon color and Status bar icon colors?
I set the fill="#color" like a Svg and it work for me
<MenuIcon fill="#fff" />
Is it possible to add a PanResponder to Stack.Navigator or Stack.Screen inside of the react-navigation v5?
I'm using React Navigation and I have a DrawerNavigator and I want the drawer to be below the status bar. This is an example:
In the drawer configuration I have setted a contentComponent with a View inside, I tried changing the view height, margin, top, etc por the View is actually inside the drawer so it doesn't affect the white box.
I know It's late now but may some others can take benefit from this.
<DrawerContentScrollView {...props} contentContainerStyle={{paddingTop: 10}}>
contentContainerStyle property has by default some paddingTop so you can over right.
Thanks