React Navigation Drawer contentComponent communicate with screen

Question

I using React Navigation Drawer with the custom content component. Below is my code to create Drawer Navigation:

import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';

import DrawerContent from '../components/drawer/DrawerContent'
import MainScreen from '../layout/MainScreen';

const MyDrawerNavigator = createDrawerNavigator({
    MainDrawer: {
        screen: MainScreen
    },
},
    {
        initialRouteName: 'MainDrawer',
        contentComponent: DrawerContent,
        drawerWidth: Dimensions.get('window').width / 1.5,
        drawerPosition: 'left',
        gesturesEnabled: false,
    }
);

export default createAppContainer(MyDrawerNavigator);

In the DrawerContent, I created the component and it has more item in there.

export default class DrawerContent extends Component {

    onClickDrawerItems(type) {
        if (type == "Logout") {

            //I want to send a call back to MainScreen for showing a dialog           

        }
    }

    render() {
        return (
            <View style={Styles.drawerContainer}>
                {/* Header Drawer */}
                <ImageBackground
                    resizeMode='cover'
                    source={Assets.Image.im_logo_prasac}
                    style={Styles.headerDrawerImageBackground}>
                    <View style={Styles.headerBackgroundOverlay}>
                        ............
                    </View>
                </ImageBackground>

                <ItemsDrawer
                    icon={Assets.Icon.ic_logout}
                    title={Strings.DrawerItems.logout}
                    onClick={() => this.onClickDrawerItems("Logout")} />

            </View>
        );
    } 
}

Inside my onClickDrawerItems function, how can I send a call back to MianScreen for showing a dialog for logout

score -3 · Answer 1 · answered Jun 25 '19 at 04:18

Instead of using a dialog box or alert box you can use a simple toast. Use react-native-toasty

and on logout add the following

onLogout() {
    await AsyncStorage.clear();
    RNToasty.Error({ title: 'You have been logged out.' })
    //this.props.navigation.navigate('SplashScreen')
}

You can navigate to any screen you want after logout.

Hope this helps.

You're good to go!

React Navigation Drawer contentComponent communicate with screen

1 Answers1