React-native : Dynamically update header title in stack navigator

Question

I have made a custom component for header title(stack navigator)which shows user name along with some image. On this page I have to edit the username and on success Update it in header as well

So my question is How to change/update title dynamically?

Answer 1

This can be done using the navigation props.

You can use this.props.navigation.state.params in a component to set a new property. Call:

navigation.setParams({ param: value })

See the documentation on headers for more detail.

Answer 2

For React Navigation version 1.x, 2.x, 3.x and 4.x, you can simply change the header by using the method shown in the code below, or the one in the original documentation: React Navigation - using params in the title

     static navigationOptions = ({ navigation }) => {
        const edit = navigation.getParam('edit', false);
        if(edit){
          return {
            headerTitle: 'Edit Page',
          };
        }else{
          return {
            headerTitle: 'Normal Page',
          };
        }
     };

For version 5.x and above, you may refer to the code below. Here are the links for the official documentation and example in expo.

 import * as React from 'react';
    import { View, Text, Button } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';

    function HomeScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
            title="Go to Profile"
            onPress={() =>
              navigation.navigate('Profile', { name: 'Custom profile header' })
            }
          />
        </View>
      );
    }
    
    function ProfileScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Profile screen</Text>
          <Button title="Go back" onPress={() => navigation.goBack()} />
        </View>
      );
    }
    
    const Stack = createStackNavigator();
    
    function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{ title: 'My home' }}
            />
            <Stack.Screen
              name="Profile"
              component={ProfileScreen}
              options={({ route }) => ({ title: route.params.name })}
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    
    export default App;

Answer 3

In React 5.0 or above you could do the following if you want to use a Class Component:

 componentDidMount() {
   this.props.navigation.setOptions({
     title: `Your Updated Title`,
   })
 }