Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unmount or re-render screen in drawer navigator

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.

like image 657
Kash Avatar asked Mar 19 '19 08:03

Kash


People also ask

How do you unmount a screen in react native?

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.

How do you pass props in a drawer screen?

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.

What is DrawerNavigator?

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.


1 Answers

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

like image 180
Muhammad Zain Avatar answered Sep 20 '22 21:09

Muhammad Zain