Creating a customized header with createNativeStackNavigator in React Navigation 5

Feedback


Question:

On my
react native
app, I implemented
react navigation
5, and attempted to utilize NativeStackNavigator using
custom header
. Although it worked with
React Navigation
4, it did not function properly with version 5.

React navigation
4:

import { createStackNavigator } from 'react-navigation-stack';
...
const _baseNavigationOptions = (props, icon, text) => {
    return ({
      headerTitle: () => ,
      headerStyle: {
        backgroundColor: '#6084AD',
      },
      headerTintColor: '#FFF'
    });
  }
...
const ConsumptionStackNavigator = createStackNavigator({
    Consumption: {
        screen: Consumption,
        navigationOptions: _baseNavigationOptions({name:'bars', type: 'font-awesome'}, 'My Consumptions')
    }
}

When attempting to perform the identical task using reactNavigation 5, the headerTitle function fails to operate.

import { createNativeStackNavigator } from '@react-navigation/native-stack';
...
  return (
      
         _baseNavigationOptions(props, {name:'bars', type: 'font-awesome'}, 'My Consumption') }}
        />
...

The problem is that my custom component is not displaying in the header. Even when I use headerRight instead of headerTitle, the issue remains the same.

Can you help me 🙂


Solution:

The MSDT code differs between v4 and v5. Instead of setting MSDT code

navigationOptions

in v4 and

header

in v5,

options

should be set instead of

header

.

options={(props) => _baseNavigationOptions(props, {name:'bars', type: 'font-awesome'}, 'My Consumption')}

Frequently Asked Questions