React Navigation 5: Dynamic header title (with hooks)

Last updated on March 19, 2021 A Goodman Loading... 2 comments

This article shows you how to dynamically update the header title of a screen in a React Native app. We will use React Native latest version, the useState hook, the useEffect hook, and the React Navigation 5 library.

This is what you will see when running the final code:

Let’s jump into the code

Create a brand new React Native app by running:

npx react-native init test_app

Install the required packages:

npm i @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack

Install the pods (if you are using macOS):

npx pod-install ios

Replace all the default code in App.js with the snippet below:

import 'react-native-gesture-handler';

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';

import MainNavigator from './src/navigations/MainNavigator';

function App() {
  return (
    <NavigationContainer>
      <MainNavigator />
    </NavigationContainer>
  );
}

export default App;

Create a new folder called src. It will contain all the code we write a few seconds later (this isn’t what you must do but it help keep the code clean).

mkdir src

In the src folder, create navigations and screens folders. Inside these ones, create MainNavigator.js and FirstScreen.js.

├── navigations
│   └── MainNavigator.js
└── screens
    ├── FirstScreen.js

MainNavigator.js:

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import FirstScreen from '../screens/FirstScreen';

const MainStack = createStackNavigator();

const MainNavigator = props => {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="first" component={FirstScreen} />
    </MainStack.Navigator>
  );
};

export default MainNavigator;

FirstScreen.js:

import React, {useState, useEffect} from 'react';
import {View, StyleSheet, TextInput} from 'react-native';

const FirstScreen = props => {
  const [headerTitle, setHeaderTitle] = useState('Default Title');

  // Rerender after headerTitle change
  useEffect(() => {
    props.navigation.setOptions({
      title: headerTitle,
    });
  }, [headerTitle, props.navigation]);

  // the function that handle the onChangeText event of the TextInput
  const updateTitle = enteredValue => {
    setHeaderTitle(enteredValue);
  };

  return (
    <View style={styles.screen}>
      <TextInput
        style={styles.textInput}
        value={headerTitle}
        onChangeText={updateTitle}
      />
    </View>
  );
};

/// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInput: {
    padding: 10,
    width: 300,
    borderColor: '#666',
    borderWidth: 1,
  },
});

export default FirstScreen;

That’s all. Now run your app and try typing something in the text box.

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
volt9801
volt9801
8 months ago

Thank you very much!!

trackback
React Navigation 5: useRoute hook example | Kindacode
1 year ago

[…] See also: How to dynamically set the header title when using React Navigation 5 […]

Related Articles