Massive header on android only

Current Behavior
The header is ginormous on android (only on android):
image

Current Code (I actually commented out my custom header just to show that even the default header is still massive:

const CompagnonStack = createNativeStackNavigator()
const headerOptions = props => {
  const { navigation, route: { name, params } } = props
  const options = screenOptions[name] || {}
  return {
    // headerLeft: () => <NavBar options={options} navigation={navigation} params={params} />,
    // headerTransparent: true,
    // headerStyle: { backgroundColor: 'blue' },
    // headerTitle: null,
  }
}
function CompagnonStackScreen () {
  return (
    <CompagnonStack.Navigator>
      <CompagnonStack.Screen name='Compagnon' component={Compagnon} options={headerOptions} />
      <CompagnonStack.Screen name='Refuge' component={Refuge} options={headerOptions} />
      <CompagnonStack.Screen name='RefugeNiche' component={RefugeNiche} options={headerOptions} />
      <CompagnonStack.Screen name='UserProfile' component={UserProfile} options={headerOptions} />
    </CompagnonStack.Navigator>
  )
}

Your Environment
Mac OS 10.15.7

software version
iOS or Android
@react-navigation/native ^5.6.1
@react-navigation/stack ^5.6.2
react-native-gesture-handler ^1.6.1
react-native-safe-area-context ^0.6.4
react-native-screens ^2.0.0-alpha.32
react-native 0.61.4
expo not using expo
node v10.14.0
npm or yarn 6.4.1

1 possible answer(s) on “Massive header on android only