React Native header title can't be customized on deep level stack screens

Question

Good day,

I have the overview of the project

The problem is, when I reach to last level stack screens, the title won't appear. I customize the title in this way.

on Bookings.jsx

return <>
    <Stack.Navigator>
        <Stack.Screen
            name='Assignments'
            component={Assignments}
            options={
                () => ({
                    title: 'My Assignments'
                })
            }
        />
        <Stack.Screen
            name='Daily'
            component={Daily}
            options={
                () => ({
                    title: 'Daily Bookings'
                })
            }
        />
        <Stack.Screen
            name='Info'
            component={Info}
            options={
                () => ({
                    title: 'Booking Information'
                })
            }
        />
    </Stack.Navigator>
</>

home.jsx

return <>
    <Tab.Navigator>
        <Tab.Screen name='Profile' component={Profile} />
        <Tab.Screen name='Bookings' component={Bookings}/>
    </Tab.Navigator>
</>

main.jsx

return (
    <NavigationContainer ref={RootNavigation.navigationRef}>
        <Stack.Navigator>
            <Stack.Screen
                name='Login'
                component={Login}
            />
            <Stack.Screen
                name='Home'
                component={Home}
                options={
                    ({ route }) => ({
                        title: route?.params?.title
                    })
                }
            />
        </Stack.Navigator>
    </NavigationContainer>
)

Either way of the two won't work. Only the word Home appears as header title. It won't change as I navigate from Assignments to Daily to Info, these last level stack screens are in sequence.

Is there any wrong in the structure? I spent hours on this but no luck. Hoping any of you guys can. Thank you.

Answer 1

Thanks to @Gilad for giving me a hint.

This works now, what I did was

on main.jsx I put

<Stack.Navigator headerMode='none'>

then on the booking.jsx, for each of the <Stack.Screen> I add the following options

const renderTitle = (title) => {
    return <Text style={{ color: '#ff5c5c', fontSize: 16 }} >{title}</Text>
}

const renderBackIcon = (navigation) => (
    <View style={{ marginLeft: 20 }}>
        <FontAwesome5
            name='long-arrow-alt-left'
            size={20}
            onPress={() => navigation.goBack()}
            style={{ color: '#ff5c5c', padding: 5 }}
        />
    </View>
)

return <>
    <Stack.Navigator >
        <Stack.Screen
            name='MyAssignments'
            component={MyAssignments}
            options={
                () => ({
                    title: renderTitle('My Assignments'),
                    headerLeft: () => null
                })
            }
        />
        <Stack.Screen
            name='DailyBookings'
            component={DailyBookings}
            options={
                ({ navigation }) => ({
                    title: renderTitle('Daily Bookings'),
                    headerLeft: () => renderBackIcon(navigation)
                })
            }
        />
        <Stack.Screen
            name='BookingInformation'
            component={BookingInformation}
            options={
                ({ navigation }) => ({
                    title: renderTitle('Booking Information'),
                    headerLeft: () => renderBackIcon(navigation)
                })
            }
        />
    </Stack.Navigator>
</>

Answer 2

Set headerShown on the lower level stack.

From https://reactnavigation.org/docs/stack-navigator/#headershown :

headerShown

Whether to show or hide the header for the screen.

The header is shown by default unless:

The headerMode prop on the navigator was set to none.

The screen is in a stack nested in another stack navigator's screen which has a header. Setting this to false hides the header. When the header is hidden in a nested stack, you can explicitly set it to true to show it.