2

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>
  );
}
gameveloster
  • 901
  • 1
  • 6
  • 18

1 Answers1

-1

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

Makalei Galkim
  • 9
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 16 '23 at 08:59