Getting default styles when upgrading from React Navigation v4 to v5

Question

I am currently using React Navigation v4 and migrating to v5. I am using the official documentation for the upgrade but unfortunately, I encountered a blocker.

In V4 I can do the following:

export default function ExampleScreen(props) {
  return <View></View>
}

ExampleScreen.navigationOptions = ({navigation, navigationOptions}) => ({
  headerStyle: {
    ...navigationOptions.headerStyle,
    borderBottomWidth: 0
  },
  headerRight: () => <SearchBox navigation={navigation} />
})

But in V5 I can't seem to access the navigationOptions parameter so I can't get the navigationOptions.headerStyle.

export default function ExampleScreen(props) {
  props.navigation.setOptions({
    headerStyle: {
      // I can't get the default styles here.
      borderBottomWidth: 0
    },
    headerRight: () => <SearchBox navigation={props.navigation} />
  })

  return <View></View>
}

How can I do this in React Navigation V5 as it was not documented anywhere else?

Answer 1

Put the defaults into a variable and export it. Then import where you need it and use:

export const headerStyle = {
  /* whatever */
};

// Use in `screenOptions`
<Stack.Navigator screenOptions={{ headerStyle }}></Stack.Navigator>;

// Use in `setOptions`
navigation.setOptions({
  headerStyle: [headerStyle, { borderBottomWidth: 0 }],
  headerRight: () => <SearchBox navigation={props.navigation} />
});