// Root.js component import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import AppStack from "./AppStack"; import AuthStack from "./AuthStack"; import navigationService from "./NavigationService"; const Stack = createStackNavigator(); const RootStack = () => { return ( ); }; // Auth Stack component import SignInRequest from "../screens/SignIn"; import SignInSuccess from "../screens/SignInSuccess"; const Stack = createStackNavigator(); const AuthStack = () => { return ( ); }; // App Stack component import Home from "../screens/home"; import Profile from "../screens/profile"; const Stack = createStackNavigator(); const AuthStack = () => { return ( ); }; // NavigationService.js import * as React from "react"; export const navigationRef = React.createRef(); export const navigate = (routeName, params) => { navigationRef.current?.navigate(routeName, params); }; export const changeStack = stackName => { resetRoot(stackName); }; const resetRoot = routeName => { navigationRef.current?.resetRoot({ index: 0, routes: [{ name: routeName }], }); }; // Whenever you want to change stack you can call change stack like this:- navigationService.changeStack("App"); // you can change between the screen of same stack like this:- navigation.navigate("Profile");