Dynamic tabs with common file

[raajnadar]

It is not easy to understand the documentation

I am trying to create a tab that is dynamic and uses the same screen design for all the tab's screens

_layouts.tsx

import { Tabs } from "expo-router";

export default function TabsLayout() {
  // from api
  const tabNames = ["home", "chat", "settings"];

  return (
    <Tabs>
      {tabNames.map((name) => (
        <Tabs.Screen
          key={name}
          name="[name]"
          options={{
            href: "/" + name
          }}
        />
      ))}
    </Tabs>
  );
}

[name].tsx

import { useSearchParams } from "expo-router";
import { View, Text } from "react-native";

export default function TabScreen() {
  const { name } = useSearchParams();

  // fetch content here

  return (
    <View>
      <Text>This is {name} tab!</Text>
    </View>
  );
}

With the above code, I am getting error

Error: Screen names must be unique: [name],[name],[name],[name],[name],[name],[name],[name],[name],[name],[name]

If I make the name="[name]" as name={name} I am getting

warning: [Layout children]: No route named "home" exists in nested children: ["[name]"]

[lud-wj]

Did you figure it out ? Trying to do the same.

[Noitham]

Hey! Any update on this? @raajnadar

[raajnadar]

Didn’t get time to check the v3 version

[Noitham]

I'm bumping this. I'm interested in the same use-case and haven't been able to achieve it using the expo-router.

[jowparks]

This is a decent work around until the team implements this feature: https://github.com/expo/router/issues/522#issuecomment-2267170882