Hello guys im a react native beginner and i created some small projects but in everyone of them my navigation is wrong ( works but not as i wanted ) exactly on the drawer look at my code and as you can see the MainStack , Login and StartUpScreen are showing on the drawer when open it in the app and i don't want that ! i just put them there so i can navigate between them ! is there any better way or someone who can show me how to do it right ?
const RootNavigation = (props) => {
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const screenOptions = {
headerShown: true,
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
};
const drawerOptions = {
headerShown: false,
};
const AppStack = () => (
<Stack.Navigator
initialRouteName="ProductsOverview"
screenOptions={screenOptions}
>
<Stack.Screen
name="ProductsOverview"
component={ProductsOverviewScreen}
options={({ navigation, route }) => ({
title: "All Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
onPress={() => {
navigation.navigate("CartScreen");
}}
/>
</HeaderButtons>
),
})}
/>
<Stack.Screen
name="ProductsDetail"
component={ProductDetails}
options={({ route }) => ({
title: route.params.productTitle,
headerTitleStyle: { fontFamily: "open-sans-bold" },
})}
/>
<Stack.Screen
name="CartScreen"
component={CartScreen}
options={{
title: "Cart Items",
headerTitleStyle: { fontFamily: "open-sans-bold" },
}}
/>
<Stack.Screen
name="OrdersScreen"
component={OrdersScreen}
options={{
title: "Orders ",
headerTitleStyle: { fontFamily: "open-sans-bold" },
}}
/>
<Stack.Screen
name="EditingProductScreen"
component={EditingProductScreen}
options={({ navigation }) => ({
title: "Editing",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerLeft: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={
Platform.OS === "android" ? "md-arrow-back" : "ios-arrow-back"
}
onPress={() => {
navigation.navigate("User Products");
}}
/>
</HeaderButtons>
),
})}
/>
<Stack.Screen
name="AddingProductScreen"
component={AddingProductScreen}
options={({ navigation }) => ({
title: "Adding",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerLeft: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={
Platform.OS === "android" ? "md-arrow-back" : "ios-arrow-back"
}
onPress={() => {
navigation.navigate("User Products");
}}
/>
</HeaderButtons>
),
})}
/>
</Stack.Navigator>
);
function CustomDrawerContent(props) {
const dispatch = useDispatch();
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<Button
title="LOGOUT"
onPress={() => {
dispatch(authActions.logout());
}}
/>
</DrawerContentScrollView>
);
}
return (
<NavigationContainer ref={navigationRef}>
<Drawer.Navigator
screenOptions={drawerOptions}
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="StartUpScreen" component={StartUpScreen} />
<Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="MainStack" component={AppStack} />
<Drawer.Screen
name="Products Overview"
component={ProductsOverviewScreen}
options={({ navigation, route }) => ({
headerShown: true,
title: "All Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
onPress={() => {
navigation.navigate("CartScreen");
}}
/>
</HeaderButtons>
),
})}
/>
<Drawer.Screen
name="Orders"
component={OrdersScreen}
options={{
headerShown: true,
title: "Orders ",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
}}
/>
<Drawer.Screen
name="User Products"
component={userProducts}
options={({ navigation }) => ({
headerShown: true,
title: "User Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={Platform.OS === "android" ? "md-add" : "ios-add"}
onPress={() => {
navigation.navigate("AddingProductScreen");
}}
/>
</HeaderButtons>
),
})}
/>
</Drawer.Navigator>
</NavigationContainer>
);
};
export default RootNavigation;