Header is rendered behind Card is navigator mode is modal and headerTransparent is true

[dulmandakh]

Current Behavior

When I set Stack navigator mode to modal, and set headerTransparent to true on screen options, header is rendered behind the Card. Therefore, header is covered and invisible to user then hides navigation.

Expected Behavior

User should be able to see header, thus navigation.

How to reproduce

const Stack = createStackNavigator();
<Stack.Navigator mode="modal">
  <Stack.Screen
    name="Modal"
    options={{headerTransparent: true}}
    component={() => <View style={{backgroundColor: '#0006', flex: 1}} />}
  />
</Stack.Navigator>

Your Environment

software	version
react-navigation	5.0.0-alpha.17
react-native	0.61.0-rc.3
node	v12.10.0
npm or yarn	v1.17.3

[dulmandakh]

On Android, header is visible but cannot tap back button.

[dulmandakh]

@satya164 thanks for the fix, but the issue still persists on Android

[dulmandakh]

@satya the issue still persists, when I try to click back button on the header, item behind it'll receive touch event.

[satya164]

@dulmandakh can you share a demo? I tested again in the example app and I can press on the back button fine on Android with headerTransparent: true.

[ManAnRuck]

i have the same issue
https://github.com/demokratie-live/democracy-app/blob/d8b6b9fb1d9f5fcffc1c31125f04c46393dbb137/packages/mobile-app/src/routes/Sidebar/Bundestag/index.tsx#L110

[MaksimAbramchuk]

still having this issue