How can i navigate from a Drawer Stack to a Switch Stack in react navigation?

1
votes

I'm using React-navigation V3. How can I navigate from MenuDrawer in contentComponent to a Login screen in the Swith Navigator??

This is my switch Navigator (my login).

const AppContainer = createAppContainer(createSwitchNavigator(
  {
    VerifyActiveUser,
    ActProgramadas: MainDrawer,
    Login,
    SyncData
  },
  {
    initialRouteName: 'VerifyActiveUser',
  }
));

export default class StackNavigator extends Component{
  render(){
      return <AppContainer 
      />;
  }
}

This is my Drawer Stack (MainDrawer). MenuDrawer is my custom drawer, from there i want to go to Login Screen (From Switch Navigator) with a "go out" Button to end my user session but i don't know how to send navigations props to contentComponent of my drawer:

const DrawerConfig ={
    drawerWidth: WIDTH * 0.86,
    contentComponent: ({navigation}) => {
        return (<MenuDrawer navigation = { navigation } />);
    },
    contentOptions: {
        activeTintColor: 'blue',
        activeBackgroundColor: 'green'
    },
    initialRouteName: 'ActProgramadas',
    unmountInactiveRoutes: true,
    edgeWidth: WIDTH * 0.80,
    backBehavior: false
}

const MyDrawerNavigator = createDrawerNavigator({
    ActProgramadas: { screen: StackNavigator },
    ActRealizadas: { screen: StackActReal },
    ObsTecnicas: { screen: StackObs },
    ObsPendientes: { screen: StackObsPend },
    ObsRealizadas: { screen: StackObsReal },
    SyncData
}, DrawerConfig);

const AppContainer = createAppContainer(MyDrawerNavigator)

export default class DrawerNavigator extends Component{
    render(){
        return <AppContainer />;
    }
}

Can I use redux to send the navigation.navigate('Login') prop from the swith to my custom drawer??

1
javascriptreact-nativereact-reduxreact-navigation

1 Answers

2
votes

You can add a logout screen in your drawer. The screen is a React component which defines the logout behavior on mounting:

import React from 'react';
import { View, AsyncStorage, ActivityIndicator, StatusBar } from 'react-native';


export default class LogoutScreen extends React.Component {
  async componentDidMount() {
      await AsyncStorage.clear();
      this.props.navigation.navigate('Login');
  }

  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle='default' />
      </View>
    );
  }
}