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

Question

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
}
};