How to remove screens (unmount component) from react native drawer-navigator on log out?How to reload Components Data?

Question

I am using react navigation v3 in my app, I use stack navigator inside drawer navigator ,On the click of logout I navigate to login screen with clearing storage of user, But whenever I login again , Main component dose not call componentWillMount or componentDidMount method , and displays Previously loaded data on it. here is my code >

const screens = {
  login: { screen: Login },
  dashboard: { screen: Dashboard },
  patientList:{screen:StackNav},
  headerComponent:HeaderComponent
 }

  const MyDrawerNavigator = createDrawerNavigator(
     screens,
      {
       initialRouteName: 'login',
      contentComponent: Sidebar
       }
     );

    App  = createAppContainer(MyDrawerNavigator);
    export default App;

StackNav ==

export default createStackNavigator({
     PatientList,
     PatientDetails
 });

Logout Function ==

  localStorageService.removeAllKeys().then((res) => {
    this.props.navigation.navigate(route, { isLogin: 'N' })
  });

score 18 · Answer 1 · edited Jun 20 '20 at 09:12

18

In React Navigation 5.x

use unmountOnBlur

<Drawer.Screen
    name={...}
    component={...}
    unmountOnBlur={true}
    options={{unmountOnBlur: true}}
/>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 23 '20 at 18:02

Mahdi Bashirpour

17,147
12
117
144

2

what if i dont need a drawer and just want to use stackNavigator? – Eliav Louski Nov 22 '20 at 23:01
only this part is sufficient *options={{unmountOnBlur: true}}* – Anwar Gul Aug 29 '21 at 16:57

score 7 · Accepted Answer · edited Aug 25 '21 at 15:42

7

put this in navigationOptions of drawer navigator

unmountInactiveRoutes: true

edited Aug 25 '21 at 15:42

Mahdi Bashirpour

17,147
12
117
144

answered Mar 24 '19 at 16:40

Daniyal Awan

256
3
13

1

That doesn't work for me. Using in a component created with `createDrawerNavigator`. – Federico Caccia Sep 09 '19 at 00:11
It works for me. Thanks! Using react-navigation 5.1.0 (via Expo) – Digo Gomes May 16 '20 at 04:08

score 0 · Answer 3 · answered May 17 '20 at 20:30

As Daniyal's awnser complementation: I've introduced the configuration inside createDrawerNavigator() configs as above:

const AppNavigator = createDrawerNavigator(
{
  Home:{
    screen: Home
  },
  Login:{
    screen: Login,
    navigationOptions: {
        drawerLabel: () => null
    }
  }
},
{
  unmountInactiveRoutes: true
});

And now all pages are working withouth any "cache".

How to remove screens (unmount component) from react native drawer-navigator on log out?How to reload Components Data?

3 Answers3

In React Navigation 5.x