React-native : Dynamically update header title in stack navigator
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.
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`,
})
}
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;