examples icon indicating copy to clipboard operation
examples copied to clipboard

Modal dismissal with `router.back()/dismiss/()dismissAll()` not working on real iOS devices

Open minon250 opened this issue 9 months ago • 0 comments

Hi Expo Team,

I'm encountering an issue with dismissing modals programmatically using router.back() in Expo Router v2 when running on a real iOS device. The same code works as expected in the iOS simulator.

Description:

When a modal is presented using the presentation: 'modal' option in _layout.js and I attempt to dismiss it from within the modal component using router.back(), the modal does not dismiss on a physical iPhone. The button press seems to register (no errors are thrown), but the navigation does not go back to the previous screen.

Steps to Reproduce:

  1. Create a basic Expo Project
  2. Configure a modal route in _layout.js (or _layout.tsx) with presentation: 'modal'.
    // app/_layout.tsx
    import { Stack } from 'expo-router';
    
    export default function RootLayout() {
      return (
        <Stack>
          <Stack.Screen name="index" />
          <Stack.Screen
            name="modal-screen"
            options={{ presentation: 'modal' }}
          />
        </Stack>
      );
    }
    
  3. Create a modal component (app/modal-screen.js or app/modal-screen.tsx) with a button that calls router.back():
    import { useRouter } from 'expo-router';
    import { Button, View, Text } from 'react-native';
    
    export default function ModalScreen() {
      const router = useRouter();
    
      const handleDismiss = () => {
        router.back();
      };
    
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>This is a modal!</Text>
          <Button title="Dismiss Modal" onPress={handleDismiss} />
        </View>
      );
    }
    
  4. Navigate to the modal screen from another screen using router.push('/modal-screen').
  5. On a real iOS device, press the "Dismiss Modal" button. The modal remains visible.
  6. Perform the same steps in the iOS simulator. The modal is dismissed successfully.

Expected Behavior:

Tapping the "Dismiss Modal" button on a real iOS device should trigger router.back() and dismiss the modal, returning to the previous screen.

Observed Behavior:

On a real iOS device, tapping the "Dismiss Modal" button does not dismiss the modal.

Environment:

  • Expo Router Version:~4.0.20
  • React Native Version: 0.76.9
  • Platform: iOS 18.4
  • Simulator: iOS 18.4

Reproducible Demo:

I can provide a minimal reproducible example if needed. Please let me know the best way to share it.

Thank you for your time and attention to this issue.

minon250 avatar Apr 16 '25 11:04 minon250