I have a bottom tab inside drawer navigation. When I switch the tab,lets say from "Home" tab screen to "Profile" tab screen, I want to hide the drawer header, it is hiding via navigtion.setOptions inside componentDidMount but it is hiding after the components inside "Profile" screen are rendered. How can I make sure the drawer header will hide before rendering of components inside "Profile" tab screen?
Related
Bottom navigation tabs don't hide without animation. Whenever I use the text input in react native bottom navigation tab is pushed up by the keyboard. That was somewhat solved by using:
screenOptions={{
tabBarHideOnKeyboard: true,
}}
However, even after trying that bottom tab is seen for a moment. Is there a way to not see that bottom tab or turn off that bottom tab appearing and disappearing animation? I'm using react-navigation bottom tabs.
I have the following structure inside my main screen:
DrawerNavigator
drawer with a list of screens to navigate
Drawer.Screen
MaterialTopTabNavigator
TopTab.Screen
TopTab.Screen
TopTab.Screen
I need when I click at an item inside the drawer, navigate to a new rote without the drawer, what's the best approach to do it?
I tried with a StackNavigator inside the Drawer to prevent the error of the navigate without an handled navigator not found, but it's navigate with the drawer presents.
Solved with changes on the navigation level:
Stack Navigator
DrawerNavigator
drawer with a list of screens to navigate
Drawer.Screen
MaterialTopTabNavigator
TopTab.Screen
TopTab.Screen
TopTab.Screen
Stack.Screen (the screens on the drawer that I want to navigate)
Special thanks to expo discord community! Hope this helps someone with the same problem.
I resolved this specific problem separating in different files the navigation components, with this way the component doesn't rerender anymore
First of all: i'm using React Native. I have a TabNavigator nested into a DrawerNavigator
i'm trying to change the color of the drawer header based on a specific screen into the Material Top Tab Navigator.
I tried to do it with screenListeners of the TabNavigator with a boolean state but when i made a setState the TabNavigator is rerendered and jump to the Home screen again.
PD: The App have a top header from the drawer and the bottom tab from the tabNavigator. I need that both of them change the color when X screen is focus.
To do this for the bottom tab i used route.name but i can't access to this property from the parent navigator.
....
screenOptions={({route}) => ({
tabBarStyle: {
backgroundColor:
route.name === '[targetScreen]' ? '#6600A1' : theme.PRIMARY_COLOR,
},
...
There are various options to provide a state in both directions, Redux, Recoil, Context Provider. If you are not already using one of them I think the Context Provider is the easiest. Basically it is a container around your outer navigator and inside you can access and change the state.
I use native base to change back button in stack navigator pages,
but I don't know how to change back button icon in drawer navigator
The Icons (Home, Search, Notification etc.) in the TabNavigator and the StackNavigator hides for a while when navigating.
I posted when it happens in the TabNavigator.
Any idea what could be wrong?