not able to logging out from the app in react native?

Viewed 52

i am working on a react native project using redux. i have one stack navigator and one drawer navigator. i am not able to logout from the app. i want to change store value while logging out. when i am dispatching the action from the logout onPress. it throws error: props.dispatch is not a function. how do i call. i tried many ways it always throwing an error. and how to set all reducers value to intial state while logout? Thank you in advance

App.js

<RootStack.Navigator screenOptions={{
            headerShown: false
          }}>
            {/* <StatusBar backgroundColor={isLoading ? '#000000' : '#F3F3F3'} /> */}
            {this.props.data.splashScreen.loading ?
              (<RootStack.Screen name={'SplashScreen'} component={SplashScreen} />) :
              this.props.data.login.isAuthorized ?
                (<RootStack.Screen name="MainNavigator" component={MainNavigator} />)
                :
                (
                  <RootStack.Screen name="Login" component={MainStack} />)}
          </RootStack.Navigator>

splashScreen and login are reducer store value

MainNavigator.js

const GradientHeader = (props) => (
    <View style={{ backgroundColor: "transparent" }}>
        <LinearGradient
            colors={["#6CCFF6", "#596AB2"]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            style={
                {
                    /* height: 128 */
                    /*  height: Header.HEIGHT  */
                }
            }
        >
            <Header {...props} />
        </LinearGradient>
    </View>
);

const DashboardStackScreen = ({ navigation }) => {
    return (
        <DashboardStack.Navigator
            screenOptions={{
                headerTitle: "Good Morning, John",
                header: (props) => <GradientHeader {...props} />,

                headerLeft: () => (
                    <TouchableOpacity onPress={navigation.openDrawer} style={{ padding: 20 }}>
                        <Image source={require("../assets/images/menu_bar.png")} style={{ width: 18, height: 12 }} />
                    </TouchableOpacity>
                ),
                headerTransparent: true,
                headerStyle: {
                    backgroundColor: "transparent",
                },
                headerTintColor: "#fff",
                headerTitleStyle: { fontFamily: "OpenSans-SemiBold", fontSize: 20 },
            }}
        >
            <DashboardStack.Screen name="Dashboard" component={Dashboard} />
        </DashboardStack.Navigator>
    );
};

export default ({ navigation }) => {
    return (
        <Drawer.Navigator
            initialRouteName="Dashboard"
            drawerContent={(props) => <DrawerContent {...props} />}
            hideStatusBar={false}
            focused={true}
            labelStyle={{ fontSize: 14, fontFamily: "OpenSans-SemiBold" }}
            drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181", itemStyle: { marginLeft: 0, paddingHorizontal: 10, width: "100%", borderRadius: 0 } }}
        >
            <Drawer.Screen
                name="Dashboard"
                component={DashboardStackScreen}
                options={{
                    drawerIcon: ({ focused, size }) => <Image source={require("../assets/images/dashboard.png")} style={{ height: 17.78, width: 16 }} resizeMode="contain" />,
                }}
            />
            <Drawer.Screen
                name="My Profile"
                component={MyProfileStackScreen}
                options={{
                    drawerIcon: ({ focused, size }) => <Image source={require("../assets/images/profile.png")} style={{ height: 16, width: 16 }} resizeMode="contain" />,
                }}
            />
        </Drawer.Navigator>
    );
};

DrawerContent.js

import { resetData } from "../Storage/Storage";
export function DrawerContent(props) {
    return (
        <SafeAreaView style={styles.baseContainer}>
            <KeyboardAvoidingView behaviour="padding" style={styles.baseContainer}>
                <TouchableWithoutFeedback style={styles.baseContainer} onPress={Keyboard.dismiss}>
                    <View style={styles.baseContainer}>
                        <TouchableOpacity
                            style={{ flex: 2, alignItems: "center", justifyContent: "center" }}
                            onPress={() => {
                                props.navigation.navigate("Dashboard");
                            }}
                        >
                            <Image source={require("../assets/images/MJB_Logo.png")} style={{ width: 197, height: 59 }} />
                        </TouchableOpacity>
                        <View style={{ flex: 5 }}>
                            <DrawerContentScrollView {...props}>
                                <DrawerItemList {...props} />
                                <DrawerItem
                                    labelStyle={{ fontSize: 14, fontFamily: "OpenSans-SemiBold" }}
                                    activeBackgroundColor="#F1F1F1"
                                    activeTintColor="#000000"
                                    inactiveTintColor="#818181"
                                    label="Logout"
                                    icon={({ focused, color, size }) => {
                                        return <Image source={require("../assets/images/logout.png")} style={{ height: 14.36, width: 14.36 }} resizeMode="contain" />;
                                    }}
                                    onPress={() => resetData()}
                                />
                            </DrawerContentScrollView>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
}

Storage.js

export const resetData = async () => {
    try {
        //await AsyncStorage.removeItem('isRemembered')
        await AsyncStorage.removeItem("userDetails");
    } catch (e) {
        // saving error
    }
};
0 Answers
Related