Modal Stacking with IOS

[moribaleta]

Hi I would like to achieve the same result with native ios
that can open modal on top of another
but the current react-navigation modal doesn't seem to have that documented
is it possible to have that feature
I noticed on Android it can stack multiple modal and doesn't close it
is it possible to do that in IOS too

[tboba]

Hi @moribaleta, thanks for submitting the discussion!
If I understand you correctly, you can easily achieve that by navigating from one modal to another.

Screen.Recording.2023-11-23.at.11.13.35.mov

Is this what you thought about? Or maybe you had nested view in modal on your mind?
You can find the code for the reproduction below:

import { NavigationContainer } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import { Button, Text, View } from 'react-native';
import React from 'react';

const Stack = createNativeStackNavigator();

type StackParamList = {
  Home: undefined;
  Modal1: undefined;
  Modal2: undefined;
};

interface MainScreenProps {
  navigation: NativeStackNavigationProp<StackParamList>;
}

const Home = ({ navigation }: MainScreenProps) => (
  <View>
    <Button
      onPress={() => navigation.navigate('Modal1')}
      title="Click me to open modal!"
    />
  </View>
);

const ModalOne = ({ navigation }: MainScreenProps) => (
  // You can also use hook useNavigation() to navigate between screens
  // const navigation = useNavigation();
  <View>
    <Button
      onPress={() => navigation.navigate('Modal2')}
      title="Click me to open second modal!"
    />
  </View>
);

const ModalTwo = () => (
  <View
    style={{
      width: '100%',
      alignItems: 'center',
    }}>
    <Text style={{ fontSize: 32 }}>Yay!</Text>
  </View>
);

const TestY = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen
          name="Modal1"
          component={ModalOne}
          options={{ presentation: 'modal' }}
        />
        <Stack.Screen
          name="Modal2"
          component={ModalTwo}
          options={{ presentation: 'modal' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default TestY;

[moribaleta]

oh thats great
thank you
I'ill try that out

[tboba]

Sure! If you still have any questions, please let me know! For now I'll close this discussion.

Cheers! 🎉