CODEWITHSUNDEEP
reactjsexporeact-navigationexpo-router
Vladimir Schneider
Vladimir Schneider

Reputation: 33

Incorrect title of Stack header back button in Expo Router

I am working on a React Native project using Expo Router and have encountered an issue with the title displayed on the "Back" button.

Navigation Structure:

My navigation structure is as follows:

in /app

_layout.tsx <Stack />
  (tabs)
    _layout <Tabs />
    home
      _layout <Stack />
      index <- when I router.navigate('/list/[id]') from here
list
  [id] <- to here I have an incorrect header back title

(tabs) header back button title instead home

The Issue:

When I navigate from the home Tabs.Screen to the list item screen, I expect to see the title home, but instead, it shows (tabs).

Code

/app/_layout.tsx

export const unstable_settings = {
    initialRouteName: '(tabs)',
};

export default function RootLayout() {
    return (
        <Stack>
            <Stack.Screen name="(tabs)" />
        </Stack>
    );
}

/app/(tabs)/_layout.tsx

export default function TabsLayout() {
    return (
        <Tabs>
            <Tabs.Screen name="home" />
            <Tabs.Screen name="about" />
        </Tabs>
    );
}

/app/_layout/home/index.tsx

export default function HomeScreen() {
    const navigation = useNavigation();

    // Navigation to Item
    const navigateToItem = () => {
        navigation.navigate('/item/1');
    };

    return (
        <View>
            <Button title="Go to Item 1" onPress={navigateToMeal} />
        </View>
    );
}

What I've Tried

I tried to give a title to each screen I have

How can I ensure that the title on the back button correctly reflects the previous screen's name in my navigation? Are there any specific behaviors in Expo Router that affect header management?

Will be grateful for any help! Thanks!

My temporary solving

I wrote a hook in each tab for detecting the current tab name, next, I set the title which I wanna use in the back button to redux store and call setOptions with this title in the tabs layout.

Upvotes: 3

Views: 3684

Answers (2)

mediaguru
mediaguru

Reputation: 1917

Just solved a similar issue. In my case I had to make sure the name matched the route for a set of tabs that were in a sub-directory named courses.

      <Stack.Screen 
        name="course" // didn't work 
        options={{ 
          headerShown: true,
          headerBackTitle: 'Back',
          headerTitle: () => (
            <CustomHeaderTitle
              title="Course"
              titleColor={alabasterGray}
            />
          ),}
        }
      />

      <Stack.Screen 
        name="course/(tabs)" // did work
        options={{ 
          headerShown: true,
          headerBackTitle: 'Back',
          headerTitle: () => (
            <CustomHeaderTitle
              title="Course"
              titleColor={alabasterGray}
            />
          ),}
        }
      />

So in your case perhaps you need to make sure the file structure matches the name property.

Upvotes: 0

cr0ybot
cr0ybot

Reputation: 4090

Give your (tabs) stack item a title:

export const unstable_settings = {
    initialRouteName: '(tabs)',
};

export default function RootLayout() {
    return (
        <Stack>
            <Stack.Screen
                name="(tabs)"
                options={{
                    title: 'Home',
                }}
            />
        </Stack>
    );
}

This doesn't address the fact that the back button is not displaying the name of the previous tabs subscreen, since the navigation that is happening in this case is between stacks.

Upvotes: 5

Related Questions