React Native Navigation - on Android modal fullscreen is not covering the whole screen

Question

The modal Stack.Screen is behaving differently on iOS and Android. On iOS modal is covering the full screen, but on Android not. I would like to have a static header with some UI (burger etc.), that is present in all screens and I don't want to animate the same UI as Stack.Screen header every time I change the screen. To achieve this I have added a static header outside Stack.Navigator. Everything works as expected apart from modal screen. When I initialise modal screen I expect it to cover the whole screen - also the static header. That is true for iOS. However on Android the static header component is not covered. I guess it is due to the fact that my static header "lives" outside Stack.Navigator. I have created snack, so check it out https://snack.expo.dev/@fjckls/fullscreen-modal-android-issue How to implement the desired behaviour with static header? Thanks!

const Contacts = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Contacts</Text>
      <Button title="Show Modal" onPress={() => navigation.navigate('Modal')} />
    </View>
  );
};
const About = () => {
  return (
    <View style={{ flex: 1 }}>
      <Text>About</Text>
    </View>
  );
};
const Modal = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>This is fullscreen modal!!!</Text>
    </View>
  );
};
const MyStaticHeader = () => {
  return (
    <View style={{ height: 60, justifyContent: 'center', alignItems: 'center', backgroundColor:'orange' }}>
      <Text>MY STATIC HEADER!!</Text>
    </View>
  );
};

const TopTab = createMaterialTopTabNavigator();
const HomeTabs = () => {
  return (
    <TopTab.Navigator>
      <TopTab.Screen name="Contacts" component={Contacts} />
      <TopTab.Screen name="About" component={About} />
    </TopTab.Navigator>
  );
};

const Stack = createNativeStackNavigator();
const App = () => {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
      <StatusBar animated={true} backgroundColor="#61dafb" />
      <MyStaticHeader />
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Home" component={HomeTabs} />
          <Stack.Screen
            name="Modal"
            component={Modal}
            options={{ presentation: 'modal',animation: 'slide_from_bottom' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
};