react-nativeexporeact-native-router-flux

how to create IOS13 Modals in react-native-router-flux


my package.json:

"react-native": "~0.63.4",
"react-native-router-flux": "^4.3.1",

I have the following code

import { Router, Stack, Scene, Modal } from "react-native-router-flux";

<Router>
    <Modal>
        <Stack key="root" modal={true}>
            <Scene key="page1" component={Page1} title="" />
            <Scene key="setting" component={Setting} schema="modal" />
        </Stack>
    </Modal>
</Router>
}

I got was this:

https://i.sstatic.net/WFgFG.jpg

but i need IOS13 modals, like this:

https://i.sstatic.net/P6u1a.jpg

I don't see relevant explain in RNRF docs.

What do i need to do?


Solution

  • I change to @react-navigation/stack and have some setting like:

    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
    const Stack = createStackNavigator();
    
    export default function App() {
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Group>
                        <Stack.Screen name="Setting" component={Setting} options={{
                            headerTitle: "Setting",
                            gestureEnabled: true,
                            ...TransitionPresets.ModalPresentationIOS,
                            headerLargeTitle: true,
                        }} />
                    </Stack.Group>
                </Stack.Navigator>
            </NavigationContainer>
        );
    }