React native Question posted in
The official React Native documentation can be found here.

How to correctly set the initial route for nested tabs using Expo Router in React Native?

I’m building a React Native application using Expo with Expo Router for navigation and I’m encountering an issue with setting the initial tab when the app starts. Despite configuring the initial route name in my tabs configuration, the app defaults to loading the index.tsx file. I’m looking to have the ‘watch’ tab as the initial view.

The project is structured as follows, with a specific focus on the app and (tabs) directories where my _layout.tsx files reside:

src/
├── app/
│   ├── (screens)/
│   │   ├── _layout.tsx        # Root layout for screens
│   │   └── ...                # Other screens
│   ├── (tabs)/
│   │   ├── _layout.tsx        # Layout for tabs
│   │   ├── account.tsx        # Account tab screen
│   │   └── watch.tsx          # Watch tab screen
│   ├── _layout.tsx            # Main layout file
│   └── index.tsx              # Entry point
├── common/
├── components/
├── config/
└── constants/

In the app/_layout.tsx, I’ve specified (tabs) in RootLayoutNav as the route to be loaded. The _layout.tsx inside the (tabs) directory then sets ‘watch’ as the initial route. Here’s the relevant part of the app/_layout.tsx file:

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

And here is my configuration in app/(tabs)/_layout.tsx file:

return (
        <Tabs screenOptions={{
            initialRouteName: 'watch',
            tabBarActiveTintColor: Colors.primary,
            tabBarLabelStyle: {
                fontFamily: 'mon-sb',
            },
        }}>
            <Tabs.Screen name="watch" options={{
                tabBarLabel: 'Watch',
                tabBarIcon: ({ color, size }) => <Ionicons name="play-circle-outline" size={size} color={color} />
            }} />

            <Tabs.Screen name="account" options={{
                tabBarLabel: 'Account',
                tabBarIcon: ({ color, size }) => <Ionicons name="person-circle-outline" size={size} color={color} />
            }} />
        </Tabs>
    )

Any help or insight into why this is happening and how to resolve it would be much appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Got something on expo github repositiory:

    initialRouteName came from React Navigation, we'll probably rename it. initialRouteName renders the default screen for a navigator, this is useful for modals where you always want a screen under the modal. We don't have a dedicated static redirect-config API, I recommend creating an index route and redirecting to the desired screen inside. Preferably you'd just have an index route.

    https://github.com/expo/router/issues/763#issuecomment-1635316964

    Solution:

    inside index.tsx file I write this

    return <Redirect href="(tabs)/watch" />;

  2. 0

    initialRouteName is not part of screenOptions. It should be on the same level, something like this:

    <Tabs
  initialRouteName="watch"
  screenOptions={{
    ...
  }}
>
...
</Tabs>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search