How to present a screen modally like iOS in react-native

Question

I want to present a screen modally that pushes the other screen to the back similar to how it is done in swift for iOS apps. I don't want the modal to come from the bottom and then cover the whole page, i just want it to come from the bottom and push the other screen to the back.

Here is an image of what i mean.

How can I do this in react native?

Here is my code:

> import { StyleSheet, Text, View } from 'react-native' import React
> from 'react' import { createStackNavigator } from
> '@react-navigation/stack' import { LoginScreen } from
> '../../features/account/screens/login.screen' import { RegisterScreen
> } from '../../features/account/screens/register.screen'
> 
> const Stack = createStackNavigator()
> 
> export const AccountNavigator = () => (
>     
>     <Stack.Navigator >
>         
>         <Stack.Screen
>             name="Login"
>             component={LoginScreen}
>             options={{
>                 headerShown:false,
>                 
>             }}
>         />
> 
>          <Stack.Screen
>             name="Register"
>             component={RegisterScreen}
>             options={{
>                 
>             }}
>            
>         />
> 
>     </Stack.Navigator>   
     )

Answer 1

You can do it with presentation prop;

     <Stack.Navigator presentation="modal" > ......//rest of the code

Answer 2

You need to add two things in your modal

set:

animationType="slide" 

and

presentationStyle="pageSheet"

This would resolve your problem