Unmount or re-render screen in drawer navigator

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