I have a setup where I have a TabNavigator and the screen for one of the tabs is a DrawerNavigation, which in turn has StackNavigators. I have a couple of problems:
I can swipe from the left to open the drawer and open the StackNavigator screens, but it does not close the drawer when selecting an item. Calling closeDrawer() from the loaded screen does nothing.
When calling openDrawer() from a child screen I only get a semitransparent dark screen, but the drawer does not show.
Any ideas what's wrong?
I solved the first issue by passing the closeDrawer() method onPress before navigating like so:
onPress={() => { this.props.navigation.dispatch(DrawerActions.closeDrawer()), this.props.navigation.navigate(item.screen.toString())
}}
Related
App using react-navigation 6
App have TabNavigator and I need to have Drawer that rendered on top of TabNavigator that render Items, that could be selected, and based on what Item was selected I need to change screen in the same Tab in TabNavigator.
The DrawerNavigator solution doesn't fit my needs. Because when user select another Tab from TabNavigator I should change Drawer content for another Tab and lock DrawerLayout on some Tabs
I tried to do the same with DrawerNavigator with CustomLayout but I can't get current routeName in DrawerNavigator to change content based on Tab, I could use TabPress listener but then how I could update DrawerNavigator route from TabNavigator?
I am using DrawerLayout to set up Drawer for my react-native app. And I just wrap TabNavigator with DrawerLayout like that(pseudo code):
const TabNavigator = ({ route, navigation }) => {
return (
<DrawerLayout route={route} navigation={navigation}>
<Tab.Navigator>
<Tab.Screen>
...rest of tabs
</Tab.Navigator>
</DrawerLayout>
)
}
And I am navigation to another screen in DrawerLayout like this when user press on Item:
const onPressItem = () => {
// if Item is not selected then navigate to new screen in the same tab
if(TabSelectedItem !== 'New_Screen_In_The_Same_Tab') {
navigation.replace('New_Screen_In_The_Same_Tab')
navigation.setParams({
TabSelectedItem: 'New_Screen_In_The_Same_Tab',
})
}
// if tab was already selected close the drawer
closeDrawer()
}
So basically everything works except one thing, I noticed that if I just close DrawerLayout everythings is fine, but when I am navigating to new screen I feel like DrawerLayout is lagging, I suppose it could be because I do navigation and all TabNavigator do re-render
Question is:
Could I fix it, or better to use any another solutions for this specific case?
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.
If I open a modal (on iOS), and this modal navigates to another modal, I don't get a "right to left" navigation. I have a bottom to top navigation everytime the target is modal, but I just want this behavior on the first openned modal, then, the rest right to left.
How can I make this navigation? It feels weird openning twice from bottom to top.
React Navigation v6
You can review this tutorial here
Or you can use transitionConfig for each screen you want.
transitionConfig: () => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}),
I've created a ReactNative app that uses StackNavigator. Whenever the app navigates from one screen to another, it animates the navigation. Is there a way to remove the animation or customize it? StackNavigator also adds a title to each of my screen. Is there a way to remove the screen title? I tried setting the 'title' property of navigationOptions to an empty screen and the screen was rendered without a title. However, navigating from this screen to another one will cause an exception.
e.g. the "welcome" title in these sample screens
To remove the header from a stackNavigator screen, set headerMode in StackNavigatorConfig to none. So, your stackNavigator should look like so:
import HomeScreen from 'path/to/screen';
const stack = StackNavigator({
Home: {
screen: HomeScreen
}
}, {
headerMode: 'none' // <= here
});
There is an active proposal to allow the customization of animation in react navigation. You can follow this open issue