How change Navigation Bar title when using Expo and <Tabs>?

Env

Expo 5.4.9
Expo Router 2.0.0
React Navigation 6.0.2
React Native 0.72.3

Project structure:

auth/_layout.tsx (Tab)
auth/current.tsx
auth/... (other tabs as components)
_layout.tsx (Stack)
index.tsx (redirects to login)
login.tsx (redirects to auth/current)

File auth/_layout.tsx

Tried:

Set options.title and options.headerTitle in <Tabs.Screen>:

<Tabs>
   <Tabs.Screen
      name="current"
      options={{
         title: 'In Progress',
         headerTitle: 'In Progress',
         tabBarLabel: 'In Progress',          
      }}
   />
   ...
</Tabs>

Set navigationOptions.title in component:

<Tabs
   navigationOptions={{
     title:'In Progress'
   }}
>
   <Tabs.Screen name="current" .../>
    ...
</Tabs>

Set screenOptions.title and screenOptions.headerTitle in component:

<Tabs
   screenOptions={{
     title:'In Progress',
     headerTitle: 'In Progress'
   }}
>
   <Tabs.Screen name="current" .../>
    ...
</Tabs>

File auth/current.tsx

Use navigation.setOptions inside screen component:

function CurrentScreen() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      title: 'In Progress',
    });
  }, [navigation]);

    return (
        <View style={styles.container}>
            <Text style={styles.title}>In Progress</Text>
        </View>
    );
}

Set Screen.navigationOptions.title:

function CurrentScreen() {
   ...
}

CurrentScreen.navigationOptions = {
  title: 'My Title'
};

export default CurrentScreen;

Each tab points to a .tsx file that implements a Screen. No matter what I do, it alwas display the route name in navigation bar. I am able to change the header text, but I cant change the navigation bar text.

What am I doing wrong?

Solution

Okay, you didn't really give enough code, so I'm going to base my answer off a couple of assumptions.

The first is that you have a StackComponent nested in a TabsComponent. What I mean is each of your tabs is a stack.

The reason I made this assumption is because it looks like you have to headers. One from the Tabs and one from the Stack component. Both of which have a header.

To remove this, which ever stack has the name "auth", put headerShown = false in the options.

So your Tabs component should look like this

<Tabs.Navigator
      initialRouteName="In Progress"
      screenOptions={{
        headerShown: false,
      }}
    >
    <Tabs.Screen name={'In Progress} /> //You didn't provide your element so I assumed it was a Stack Navigator.
    {...rest}
</Tabs.Navigator>

The rest of the code you provided seems as if it should work fine at first glance. Which is why I believe you just need to hide a header.