Using tabs navigator, require a working back button and page transitions

[gameveloster]

Hi, I am still quite confused with using expo-router and will appreciate some guidance.

In my Expo app using expo-router, there should be 3 screens:

• Home
• Settings
• User

and 2 tabs

• Home
• Settings

This is my current file structure

app
├── (main)
│   ├── _layout.js
│   ├── home.js
│   ├── settings.js
│   └── user.js

I can configure the tab navigator in _layout.js to show only the 2 required tabs: Home and Settings.

There is a button in Settings screen that brings you to the User screen with a router.push('/user').

Problems:

1. On clicking this button, there is no sliding page transition/animation (layout animations?) where the User screen slides in from the right side of the screen
2. There is no back button on the header of the User screen that brings u back to the previous screen Settings. Should the back button be created for you by default?

Questions:

1. How can you configure the navigators/layouts to achieve this?

2. I feel that the current layout might not be sensible, since all 3 files are in the same directory level, but logically the User screen is nested inside the Settings screen, so its file path should be something like app/(main)/settings/user.js, but I am not sure.

Thank you

layout.js

import { Tabs, useRouter } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {

  const router = useRouter();

  return (
    <SafeAreaProvider>
      <Tabs>
        <Tabs.Screen
          name="home"
          options={{ headerShown: false }}
        />

        <Tabs.Screen
          name="settings"
          options={{ title: "Settings" }}
        />

        <Tabs.Screen
          name="user"
          options={{
            title: "User",
            href: null,
            tabBarStyle: { display: "none" },
          }}
        />
      </Tabs>
    </SafeAreaProvider>
  );
}

[wcastand]

not sure i understood but from what i get, what you want is :

app/
  (main)/
     _layout.js
     home.js
     settings/
       _layout.js // can be a normal stack 
       index.js // your setting tab screen
       user.js

so your tab will only get 2 icon /screens (Homne /Setting) and when you go to the setting tab, it will get his own Stack with the User screen inside, which would trigger the animation of the Settings Stack

[Bufib]

I used to work for hours till I found your solution!
Finally I understand how to make a tabbar and a stack work together. I used to have two folder like (main) and start linking to each other. This would make my "back button" disappear. Now it works. Thank you for your help! 😃