Unmount or re-render screen in drawer navigator - react-native

Question

I just added drawer navigator recently and wrapped my screens in createDrawerNavigator()
These are my current routes:
Home.js
Post.js
Settings.js
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.

Answer 1

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

Answer 2

I use to face the same issue. I made my screen Post listen to navigation focus event triggered by react-nativation here instead of componentDidMount.
import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
const Post = () => (
<View>
<NavigationEvents
onWillFocus={payload => console.log('will focus',payload)}
onDidFocus={payload => console.log('did focus',payload)} //
onWillBlur={payload => console.log('will blur',payload)}
onDidBlur={payload => console.log('did blur',payload)}
/>
{/*
Your view code
*/}
</View>
);
With onDidFocus, you may get the navigation param, fetch data, and/or update state. You may clear screen state with onDidBlur if needed.
Alternatively, you can do imperative coding as this doc here
Update :
By the way, I am wondering why you put Post with Drawer? Is it just to have a link in the drawer that can access to the Post page?
In my opinion, you should move Home and Post to new stack and make Home as initial Route. This will make sure that the Post is unmounted after navigating back to Home.
Check out my sample below
const HomeStack = createStackNavigatior({
Home: {screen: Home},
Post: {screen: Post},
}, {
initialRouteName: 'Home',
...
})
const Drawer = createDrawerNavigator(
{
HomeStack
Settings: {screen: Settings}
},
{
initialRouteName: "HomeStack",
backBehavior: 'initialRoute',
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />,
}
);

Answer 3

It's the way react-navigation works, to counter this you can add listeners, like so:
<NavigationEvents
onDidFocus={payload => { console.log(payload.state.params,'<- this has your new params') }}
/>
OR
this.props.navigation.addListener('didFocus', payload=>{console.log(payload)})
Check this for more information

Answer 4

I lost several hours on this after updating React Navigation from 2.14.2 to 3.11.0. The funny thing is that it was working perfectly and after upgrade pages were not re-rendering which was causing to wrong language and not actual data on the pages.
What I have found is the issue DrawerNavigator screen shouldn't unmount
So part of us complain why it is not rerendering screens and part was complaining why it was rerendering. The second part won the battle :)
Basically the solution was as expected: to listen to WillFocus event...
Just add this to code to your component if you want it to be rerendered on each visit.
/**
* When using React Navigation Component is not umnounted and instead stored in navigator.
* We need component to be rerendered during each visit to show right info and language
*/
componentDidMount() {
//this.props.navigation will come in every component which is in navigator
focusSubscription = this.props.navigation.addListener(
'willFocus',
payload => {
this.forceUpdate();//Native react function to force rerendering
}
);
this.setState({focusSubscription: focusSubscription});
}
componentWillUnmount() {
this.state.focusSubscription.remove();
}

Answer 5

I tried to use the method suggested in the answers but they didn't work perfectly with my case.
Solution:
I tried to flip createDrawerNavigator() with createStackNavigator() and it worked perfectly like before!
I don't have to use react navigation events, normal event like componentWillUnmount and componentWillMount work perfectly.
const MainScreens = createStackNavigator(
{
Home: {screen: Home},
Post: {screen: Post},
Settings: {screen: Settings}
},
{
initialRouteName: "Home",
headerMode: "none",
}
);
const AppNavigator = createDrawerNavigator(
{
Main: {screen: MainScreens},
},
{
initialRouteName: "Main",
backBehavior: 'initialRoute',
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />,
}
);
export default createAppContainer(AppNavigator);
Not sure if there's anything wrong in what I did, but its working fine until now.

Answer 6

As per Muhammad Zain response, if you are using react navigation v5, you can pass directly to the Drawer screen the option unmountOnBlur
options={{unmountOnBlur:true}}
and that will be enough.
React navigation docs

Answer 7

I'm using react-navigation for months. But placing screens directly into Drawer navigator prevents willunmount method to be called. First place screen in a stack navigator then place it into drawer navigator.