Tabs

The Tabs Layout in react-native-auto-route is inherited from the Bottom Tabs Navigator of React Navigation, so the props will be similar to the Bottom Tabs Navigator.

📂 app
┃ ┣ 📜 _layout.tsx
┃ ┣ 📂 (tabs)
┃ ┃ ┣ 📜 home.tsx
┃ ┃ ┣ 📜 profile.tsx

To create a Stack layout with two screens as shown in the file structure above:

app/_layout.tsx

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

export default function Layout() {
  return (
    <Stack initialRouteName="(tabs)">
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

Or

app/(tabs)/_layout.tsx

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

export default function Layout() {
  return (
    <Tabs
      initialRouteName="home" // initialRouteName is directory name or filename
      screenOptions={{
        // https://reactnavigation.org/docs/native-stack-navigator#props
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}>
      {/** The screen will be included automatically. Just need declare if you need to add custom configuration */}
      <Tabs.Screen
        name="home" // name prop is directory name or filename
        options={{
          // https://reactnavigation.org/docs/native-stack-navigator#options
          title: "Home"
        }} 
      />
      <Tabs.Screen
        name="profile" // name prop is directory name or filename
        options={{
          // https://reactnavigation.org/docs/native-stack-navigator#options
          title: "Profile"
        }} 
      />
    </Tabs>
  );
}