How to use modalPresentationStyle .fullscreen in React Native navigation

Question

I am trying to create my first React Native application. I have a login screen from which I want to navigate to a register screen if users want to sign up.

To achieve this, I was thinking of opening a modal above the first screen (login). I created the following:

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();

function RegisterScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>Register Screen</Text>
      <Button onPress={() => navigation.goBack()} title="Go back" />
    </View>
  );
}

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: "modal", headerShown: false }} options={{modalPresentationStyle: 'fullScreen'}}>
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Group>
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

This works perfectly fine, the modal shows. However, as you can see in this screenshot below, the modal is shown with modalPresentationStyle .automatic (in iOS). I want it to show as .fullScreen, so the hierarchy is not visible in the screen. Basically, I want the view to be shown from the safeArea/statusBar all the way down to the safeArea on the bottom.

How can I achieve this?

Answer 1

The terminology in React Native isn't the same as terminology in native apps. If you want a full-screen screen, you probably don't want a modal. If you want a vertical animation, change the animation based on docs:

screenOptions={{ cardStyleInterpolator: CardStyleInterpolators. forVerticalIOS, headerShown: false }}

https://reactnavigation.org/docs/stack-navigator/#animation-related-options

There's also no modalPresentationStyle: 'fullScreen' in documentation and Group component doesn't take an options prop.

Answer 2

The accepted answer states:

If you want a full-screen screen, you probably don't want a modal.

That's not necessarily true. Use

screenOptions={{ presentation: 'transparentModal' }}

or

screenOptions={{ presentation: 'fullScreenModal' }}

for a full screen modal animation you can't dismiss on iOS.