Navigating back to a previous navigator?

I’m using react native with the following versions:

"navigation": "5.4.1",
"navigation-react": "4.2.0",
"navigation-react-native": "7.4.2",

I’ve been following the docs and I’ve added a TabBar. I’m using the same configuration as here: https://grahammendick.github.io/navigation/documentation/native/tab-bar.html

So I have a root stateNavigator that contains the tab scene as well as a login page and the tab scene contains two tabs ‘home’ and ‘profile’. So my question is how do I allow the user to log out from the profile tab and navigate back to the login page in the root navigator?

So basically my App.tsx file contains this navigator:

const stateNavigator = new StateNavigator<RootNavigator>([
    { key: 'tabs' },
    { key: 'login' },
  ]);

const { tabs, login } = stateNavigator.states;
tabs.renderScene = () => <Tabs />;
login.renderScene = () => <Login />;
stateNavigator.navigate('login');

const App: React.FC = () => (
  <NavigationHandler stateNavigator={stateNavigator}>
    <NavigationStackIOS />
  </NavigationHandler>
);

and my Tabs component contains the following:

// Home tab navigator
const homeNavigator = new StateNavigator<HomeTabNavigation>([
  { key: 'home', trackCrumbTrail: true },
]);
const { home } = homeNavigator.states;
home.renderScene = () => <Home />;
homeNavigator.navigate('home');

// Profile tab navigator
const profileNavigator = new StateNavigator<ProfileTabNavigation>([
  { key: 'profile', trackCrumbTrail: true },
]);
const { profile } = profileNavigator.states;
profile.renderScene = () => <Profile />;
profileNavigator.navigate('profile');

const Tabs: React.FC = () => (
  <>
    <NavigationBar hidden />
    <TabBar
      primary
      bottomTabs
      barTintColor="#FFFFFF"
      selectedTintColor="#EC418E"
      unselectedTintColor="#B5B5B5"
    >
      <TabBarItem title="Home">
        <NavigationHandler stateNavigator={homeNavigator}>
          <NavigationStack />
        </NavigationHandler>
      </TabBarItem>
      <TabBarItem title="Profile">
        <NavigationHandler stateNavigator={profileNavigator}>
          <NavigationStack />
        </NavigationHandler>
      </TabBarItem>
    </TabBar>
  </>
);

Do I need to structure this in some other way or is there some way for me to navigate back from the profile tab to the login screen?

[grahammendick]

I’m really glad you like the Navigation router and I’m happy I could help you out

[hlynurstef]

@grahammendick I was already using the unmountStyle prop to create an iOS like animation on Android but I didn’t realise I could pass in an empty string to disable the animation, now I know 👌

Awesome library btw, I’m really enjoying using it.

Since you’ve answered all my questions I’m going to close this issue 🙏