Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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' })
  });
like image 615
Hrishi Avatar asked Dec 01 '22 09:12

Hrishi


2 Answers

In React Navigation 5.x

use unmountOnBlur

<Drawer.Screen
    name={...}
    component={...}
    unmountOnBlur={true}
    options={{unmountOnBlur: true}}
/>
like image 80
Mahdi Bashirpour Avatar answered Dec 04 '22 13:12

Mahdi Bashirpour


put this in navigationOptions of drawer navigator

unmountInactiveRoutes: true
like image 40
Daniyal Awan Avatar answered Dec 04 '22 12:12

Daniyal Awan