CODEWITHSUNDEEP
react-nativeexporeact-native-router-flux
yuanx
yuanx

Reputation: 1

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?

Upvotes: 0

Views: 76

Answers (1)

yuanx
yuanx

Reputation: 1

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>
    );
}

Upvotes: 0

Related Questions