Logout using react Native DrawerNavigator

Question

I am building a react-native app(App Image)which has Logout link on the Drawer Navigator.

Code is as below

 const DrawerScreen = DrawerNavigator({
    ..........
    logout: {
        screen: Component   
    },
})

export default DrawerScreen;

But the problem is , it's only loading the component screen. i need to call a method where i can perform Asyncstorage clear and navigate to LoginPage.

Answer 1

You probably want to add a button to your drawer. If so, your code will look like this.

const Drawer = DrawerNavigator(
{
    mainpage:{screen:MyScreen}
},
{
    contentComponent:(props) => (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {...props} />
                <Button title="Logout" onPress={DO_SOMETHING_HERE}/>
            </SafeAreaView>
        </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
})

You should import import {DrawerItems} from 'react-navigation'; to get it work.

UPDATE:

1. In 4.x version of react-navigation you should import `import {DrawerNavigatorItems} from 'react-navigation-drawer'
2. You should import SafeAreaView from 'react-native-safe-area-view'