Search code examples
react-nativeheaderscreencustomizationtitle

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

Good day,

I have the overview of the project enter image description here

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.

Solution

  • 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>
</>