I just added drawer navigator recently and wrapped my screens in createDrawerNavigator()
These are my current routes:
When a user navigates from Home to Post I pass a param that has the post data.
onPress={() => this.props.navigation.navigate('Post', {postData: postData})}
When ever the user goes back to Home from Post, then post will be unmounted. and mounted back again with fresh data when another post is clicked.
My issue is that with implementing the drawer, the Post screen does not get unmounted when navigating back to home, I keep gettings the same props and screen of the first post opened, over and over again.
This is my route setup:
import React from "react";
import { createDrawerNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './screens/Home';
import Post from './screens/Post';
import Settings from './screens/Settings';
import SideBar from './screens/sidebar';
const Drawer = createDrawerNavigator(
{
Home: {screen: Home},
Post: {screen: Post},
Settings: {screen: Settings}
},
{
initialRouteName: "Home",
backBehavior: 'initialRoute',
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />,
}
);
const AppNavigator = createStackNavigator(
{
Drawer: {screen: Drawer},
},
{
initialRouteName: "Drawer",
headerMode: "none",
}
);
export default createAppContainer(AppNavigator);
What am I doing wrong?
I want each post screen to open and re render as new when navigating to it from Home.
This article will demonstrate via examples how to resolve the How To Unmount Inactive Screens In Bottom Tab React Native error . You can unmount screens in bottom tab by adding option in navigation screenOptions: unmountOnBlur: true You can do it in Tab & Drawer Navigations but not in Stack Navigation.
Here is how you can pass the props to the components from Drawer. Screen easily by replacing the simple component from component={} and replacing it with an anonymous function which will return our component where we need to navigate.
DrawerNavigator is used to develop hamburger menu. StackNavigator is used Simple Navigation. if you new in React native StackNavigator is very easy for you. For Simple App you can use StackNavigator and if really required tabview then use. you can use following link for stack navigation.
For those using react-navigation v5. I faced the same issue my component was not unmounting by using goBack()
for a screen link in drawer. After little research I found our that in latest version of react-navigation they have added an attribute unmountonblur
in screen options for drawer navigator by default its false that's why component doesn't unmount. I am using this to solve my problem.
Here is my code
<Drawer.Screen name="ResetLogsStack" component={ResetLogsStack} options={{unmountOnBlur:true}}/>
Here is the link for that: unmountonblur
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With