CODEWITHSUNDEEP
react-native
DeveloperApps
DeveloperApps

Reputation: 803

Dynamic Title change on the screen

I have a navigation code:

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
    <Stack.Screen name='Learning' component={Learning}
      options={{
        headerTransparent: true,
        title: 'Learning',
        headerTitleAlign: 'center',
      }} />
  </Stack.Navigator>
</NavigationContainer>

I use the Learning screen for two functional application screens:

On screen A, I have two buttons:

Depending on this content, {screen: 'Learning'} is loading some other data

This screen has a title header

How do you make it load a different title depending on the button you click?

I can't find a solution how to do it for Components built on functions and Hooks

Upvotes: 0

Views: 210

Answers (1)

giotskhada
giotskhada

Reputation: 2452

The options prop can take a function and provide {route, navigation} object as an argument for you, so to use the params in the header, you can do this:

<Stack.Screen
    name="Learning"
    component={Learning}
    options={({ route }) => ({ title: route.params.screen })}
/>

I'm not sure what difference the functional components and hooks make in this case, but in case I misunderstood the question, you can use useNavigation and useRoute hooks in your functional components and do the same things that you do in classes.

Upvotes: 1

Related Questions