Expo-Router Tab Navigator, missing page transition and missing back button

Question

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.

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 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?

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

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>
  );
}

Answer 1

You should set screenOptions={{animation: "none", headerShown: true}} on your <Stack></Stack> component inside _layout.jsx !!!JSX!!!