How to add a custom DrawerItem for Logout

Question

Similarly to this question I wanted to add a Logout button to the footer of DrawerNavigation and I did.

But the problem is that I couldn't find a way for redirecting to login screen since this.props.navigation.navigate('Login') isn't available outside of the class.

How can I somehow navigate to login screen without props?

Here is how my App.js looks like:

/* imports etc.. 
...
*/

export default class App extends React.Component { 
  render() {
    return (
      <SwitchNavigator />
    );
  }
}

const logout = async () => {
  await AsyncStorage.removeItem('userToken'); // remove token
  // Once the token is removed, navigate to Login screen.. But how.

}

const DrawerNavigationComponent = (props) =>(
    <Container>
      <Header >
        <Text>Header</Text>
      </Header>
      <Content>
        <DrawerItems 
          {...props}
          />
      </Content>
      <Footer>
        <TouchableOpacity
            onPress = { logout }
            style={{width: '100%' }}>
              <View style={{ flex: 1, marginLeft:10, alignItems: 'center', flexDirection:'row', alignItems: 'center' }}>
                <Icon name="ios-log-out" style={{marginRight: 10, color: 'white'}} size={20}/>
                <Text style={{color: 'white'}}>Logout</Text>
              </View>
        </TouchableOpacity>
      </Footer>
    </Container>
  );

const DrawerNavigation = createAppContainer(
  createDrawerNavigator({
    Home: Dashboard
  }, {
    contentComponent: DrawerNavigationComponent
  })
);

/* Login & Register */
const StackNavigation = createAppContainer(
  createStackNavigator({
    Welcome: Welcome, // show login & register buttons
    Login: Login,
    Register: Register
  })
);

/* 1 time screen */
const SwitchNavigator = createAppContainer(
  createSwitchNavigator({
    AuthLoadingScreen: AuthLoadingScreen, // check if userToken exists
    App: DrawerNavigation, // if yes, redirect here
    AuthenticationScreen: StackNavigation, // if not, redirect here
  })
);

Define your `logout` method inside `DrawerNavigationComponent` and you can call props. — technophyle, Jan 31 '20 at 03:17

score 0 · Answer 1 · answered Jan 31 '20 at 03:18

One way is to keep your content in seperate file and default export it using withNavigation() HOC from react-router.

Other way is to passing props to content using arrow function

const DrawerNavigation = createAppContainer(
createDrawerNavigator({
  Home: Dashboard
}, {
  contentComponent: props => <DrawerNavigationComponent {...props} />
})
);

How to add a custom DrawerItem for Logout

1 Answers1