React-Navigation v5 Redux

I have a react-native problem while trying to upgrade from react-navigation 4 to 5. I have this at the bottom of my Settings component:

const ConnectedSettings = connectActionSheet(Settings);

const mapStateToProps = state => ({
//bunch of states
});

const ReduxSettings = connect(mapStateToProps, {
//bunch of functions
})(SettingsWrapper);

ReduxSettings.navigationOptions = ({navigation, route}) => {
  return {
    headerRight: () => (
      <TouchableOpacity
        style={StylesUtil.headerRightButton}
        onPress={navigation.getParam('onSavePress')}>
        <View style={StylesUtil.headerRightButtonTitleWrapper}>
          <Text style={StylesUtil.headerRightButtonTitle}>Save</Text>
        </View>
      </TouchableOpacity>
    ),
  };
};

export default ReduxSettings;

In the Navigation.js file, there is no import of ReduxSettings screen. Just Settings. It looks as though the state is imported along with the component.

Under React-Navigation v4, this TouchableOpacity (button) shows up on the Screen’s headerRight as expected. But under React-Navigation v5, it doesn’t. According to docs, all your header options have to be declared in the Navigation.js file. But then I have never seen this ReduxSettings.navigationOptions being used anywhere on the internet regardless of which react-navigation version.

I cannot simply move this headerRight TouchableOpacity out of the Settings component and into my Navigation file, as I need that redux state to save.

I guess my central problem is I don’t know what this really is: ReduxSettings.navigationOptions, and its’ react-navigation v5 replacement.

If anyone can even dig up some useful info, much appreciated.

For navigation, I suggest you use an expo-router if you are working on a large project.

1. In React Navigation v5, screen options like headerRight should be moved into the options prop in the Navigator.
2. Use navigation.setOptions inside your component to dynamically set or update the header options.