react native navigation reset stack or tab after reaching to last screen

408 views Asked by At

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' })}
0

There are 0 answers