Header in modal is sometimes missing background on iOS 13 & 14

Description

Providing headerLeft and headerRight with a component for a modal screen can result in an incorrect header background on iOS 13 & 14 (cannot be reproducible on iOS 12 & 15). This does not happen every time (about 50% of the time), but is easily reproducible by re-opening the modal until it appears.

Example

<Stack.Navigator
   screenOptions={{
     headerStyle: {
       backgroundColor: 'pink',
     },
  }}
  initialRouteName='Main'
>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen
      name='Search'
      component={Search}
      options={{
        headerLeft: () => <View />,
      }}
    />
  </Stack.Group>
  <Stack.Screen name='Main' component={Main} />
</Stack.Navigator>

The bug occurs even if you do not provide the backgroundColor, but providing one makes it more clear when it occurs.

Screenshots

When it works:

Header inspected in Flipper when it works:

When the bug occurs:

Header inspected in Flipper when bug occurs:

Steps To Reproduce

1. Run the app on either iOS 13 or iOS 14
2. Open the modal
3. If bug does not occur, go back and redo previous step.

Expected behavior

Modal is always opened with correct background color in its header

Actual behavior

Sometimes opened with a gradient effect background

Reproduction

Minimial app using bare workflow: modal-test.zip

1. Unpack
2. npm i
3. npx pod-install
4. npm run ios

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.67.3
@react-navigation/native	6.0.10
@react-navigation/native-stack	6.6.1
react-native-screens	3.13.1
react-native-safe-area-context	4.2.4

[codeion]

Happens with presentation: ‘card’ as well.

[itsramiel]

@escwald did you solve it