Layout routes

Create a layout route

To create a layout route for a directory, create a file named _layout.tsx or _layout.js in the directory, and export a React component as default.

Example:

app/_layout.tsx

import React from 'react';
import { Stack } from 'react-native-auto-route';

const AppLayout = () => {
  return <Stack initialRouteName="home" />
};

export default AppLayout;

Supports adding a single layout route for a given directory. If you want to use multiple layout routes, add multiple directories:

📂 app
┃ ┣ 📜 _layout.tsx
┃ ┣ 📜 sign-in.tsx
┃ ┣ 📂 (tabs)
┃ ┃ ┗ 📜 _layout.tsx
┃ ┃ ┗ 📜 home.tsx
┃ ┃ ┗ 📜 profile.tsx

_layout

app/_layout.tsx

import React from 'react';
import { Stack } from 'react-native-auto-route';

export default function Layout() {
  return <Stack initialRouteName="(tabs)" />;
}

(tabs)/_layout

app/(tabs)/_layout.tsx

import React from 'react';
import { Tabs } from 'react-native-auto-route';

export default function Layout() {
  return <Tabs />;
}

(tabs)/home

app/(tabs)/home.tsx

import { View, Text } from 'react-native';
import React from 'react';

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

(tabs)/profile

app/(tabs)/profile.tsx

import { View, Text } from 'react-native';
import React from 'react';

const Profile = () => {
  return (
    <View>
      <Text>Profile</Text>
    </View>
  );
};

export default Profile;

sign-in

app/sign-in.tsx

import { View, Text } from 'react-native';
import React from 'react';

const SignIn = () => {
  return (
    <View>
      <Text>SignIn</Text>
    </View>
  );
};

export default SignIn;

With above directory structure:

• /sign-in will use app/_layout.tsx
• /tabs/home and /tabs/profile will use app/(tabs)/_layout.tsx
• (tabs): using the group syntax (), prevent a segment from showing in the URL path. In this case, the URL path will be /home and /profile.

If app/_layout.tsx is not created, the default layout (Stack) will be used.