react-navigation-stack ModalPresentationIOS with nested stacks

App.nested-stack.js

import * as React from 'react';
import {View, Text, Button} from 'react-native';
import {NavigationNativeContainer} from '@react-navigation/native';
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Nested Stack"
        onPress={() => navigation.navigate('NestedStack')}
      />
    </View>
  );
}

function DetailsScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const NestedStack = createStackNavigator();

function NestedStackScreen() {
  return (
    <NestedStack.Navigator
      headerMode={'none'}
      mode="modal"
      screenOptions={{
        gestureEnabled: true,
        cardOverlayEnabled: true,
        ...TransitionPresets.ModalPresentationIOS,
      }}>
      <NestedStack.Screen name="Details" component={DetailsScreen} />
    </NestedStack.Navigator>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationNativeContainer>
      <Stack.Navigator
        mode="modal"
        screenOptions={{
          gestureEnabled: true,
          cardOverlayEnabled: true,
          ...TransitionPresets.ModalPresentationIOS,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="NestedStack" component={NestedStackScreen} />
      </Stack.Navigator>
    </NavigationNativeContainer>
  );
}

export default App;