Everyone, I am having little bit idea of react-native. I am facing a problem in working with react-navigation. I am having 2 tabs in my navigation. In the first Tab, I have 2 screens (Home and Vendor) and In the second Tab, I have 3 screens (Order Preview, Order Confirm, Thankyou). First time when I move through Home-> Vendor->order preview->order confirm ->thankyou. Its work fine. On the Second Time, when I move through Home->Vendor->Thankyou(It was moving directly to thankyou.). I am not sure, why I am getting this. I am sharing my code.
I am attaching my code in File
please let me know, If I am missing anything or suggest some solution for the above issue Thank you Video Link: https://drive.google.com/file/d/12AMrm-HnNSv1r2TLmyAO-FE-34AchdR9/view?usp=sharing
import 'react-native-gesture-handler';
import React from "react";
import { Image } from "react-native";
import { TabBarItem } from "@components";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Constants, Colors, Icons, Styles } from "@common";
import HomeScreen from "./screens/HomeScreen";
import VendorScreen from "./screens/VendorScreen";
import OrderPreviewScreen from "./screens/OrderPreviewScreen";
import OrderConfirmScreen from "./screens/OrderConfirmScreen";
import OrderThankyouScreen from "./screens/OrderThankyouScreen";
/// Router File Code
const HomeStack = createStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator initialRouteName="Home">
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="Vendor" component={VendorScreen} />
</HomeStack.Navigator>
);
}
const CartStack = createStackNavigator();
function CartStackScreen() {
return (
<CartStack.Navigator initialRouteName="OrderPreview">
<CartStack.Screen name="OrderPreview" component={OrderPreviewScreen} />
<CartStack.Screen name="OrderConfirm" component={OrderConfirmScreen} />
<CartStack.Screen name="OrderThankyou" component={OrderThankyouScreen} />
</CartStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator tabBarOptions={{activeTintColor: 'tomato', inactiveTintColor: 'gray', }} >
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Cart" component={CartStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
// Home Screen
showVendorDetail={vendor_ID=>navigation.push(Constants.Screen.Vendor,{vendor_ID})}
//Vendor Screen
showOrderPreview={()=>navigation.navigate("Cart",{screen:"OrderPreview"})}
//Order Preivew
showOrderConfirm={()=>navigation.push(Constants.Screen.OrderConfirm)}
// Order Confirm
showOrderThankyou={()=>navigation.push(Constants.Screen.OrderThankyou)}
// Order Thankyou
showHome={()=>navigation.navigate("Home",{ screen: 'Home' })}