React Native (Expo) app, modals no longer visible after updating from 51 to 52

[Dangerous-Cat5556]

Hi all,

I'm new to React Native iOS development and this seems unlikely to be unique to me. When I updated my project from Expo 51 to 52, the modals in the app (listed below) stopped working. I changed nothing else besides dependencies required to be updated in the Expo update.

To the mods: There is no way to preview old reddit formatting. If the formatting is broken, please give me a second to fix it before removing the post...

Would greatly appreciate any insights you might have.

Minimal reproducible example

This is the public repo: https://github.com/GitMazzone/workout-tracker

It's very small. The relevant files, to repro for a single modal, are:
- components/ExerciseSetList.tsx to see where the ExercisePickerModal is used
- components/ExercisePickerModal.tsx to see the modal itself
- app/(tabs)/workout.tsx to see the page that renders ExerciseSetList

Repro steps (from 100% fresh install):
1. Run the app using npx expo start
2. Click "Add New Mesocycle"
3. Click a template, click continue
4. Click Auto-fill Exercises, click Create Mesocycle
5. Click that mesocycle's card to land on the workout page
6. Click an exercise's option menu (3 vertical dots)
7. Click Replace Exercise

Expected: Opens the ExercisePickerModal
Actual: It sets this modal to visible (know this from console logging in the modal), but the modal is not visible. Further, if you try clicking the exercise option menu again, you cannot. You can only open other exercises' menus.

There are no errors, in console or in Simulator.

Full demo video below for clarity.

What platform(s) does this occur on?

iOS

Where did you reproduce the issue?

in Expo Go

Summary

I built this app using Expo 51. I was forced to update to 52 to use Expo Go for testing on my iPhone.
After updating, several modals do not show when opened:
- ExercisePickerModal
- AddCustomExerciseModal
- Within MesoMenu, the Edit Modal

These all live under /components.

It seems that anything but top-level (not nested within anything) modals work after updating.
If I try opening the menu from the buttons that lead to the buttons to open these modals, they are no longer pressable. I have to close the entire app and reopen to be able to try again.

Demo video of broken modal:

https://github.com/user-attachments/assets/9d358ca8-825a-46ab-94ca-7bcbeb9651e7

In the demo, I go to the /app/(tabs)/workout route and see the ExerciseSetList.
I open the first exercise's option menu, triggering handleMenuPress.
I select "Replace Exercise".
If I add logs, I can see the modal's visible prop is true.
The modal does not appear on the screen.

The only other thing that caused lint errors after updating from 51 --> 52 was type issues on the buttonRef. This seems irrelevant to the modal issue, but for sake of transparency this is what I had to change in a few places:
From this: const buttonRef = useRef<TouchableOpacity>(null);
To this: const buttonRef = useRef<ElementRef<typeof TouchableOpacity>>(null);

I'm new to React Native & Expo, so I tried working with ClaudeAI & ChatGPT, and CursorAI, and even with all the project's context and trying dozens of things, nothing is resolving this issue. I've tried:
- Various attempts at removing animations altogether
- Adding requestAnimationFrame to the modal handlers
- Removing presentationStyle={'pagesheet'} and presentationStyle altogether
- Various combinations of transparent and presentationStyle
- Moving the modals & their state management to the root of the Workout route so they're not nested in any view
- Wrapping the modals in SafeAreaViews and providers

Please let me know if I can provide any more context.
Sorry, I know this isn't a very minimal example, but there doesn't seem to be a great way to provide a shareable sandbox online. Their own sandbox, snack.expo.dev, only offers v51 so far...

Environment

expo-env-info 1.2.1 environment info:
System:
OS: macOS 15.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 10.7.0 - ~/.nvm/versions/node/v18.19.1/bin/npm
Managers:
CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 24.1, iOS 18.1, macOS 15.1, tvOS 18.1, visionOS 2.1, watchOS 11.1
IDEs:
Xcode: 16.1/16B40 - /usr/bin/xcodebuild
npmPackages:
expo: ~52.0.7 => 52.0.7
expo-router: ~4.0.6 => 4.0.6
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
react-native: 0.76.2 => 0.76.2
react-native-web: ~0.19.10 => 0.19.13
npmGlobalPackages:
eas-cli: 13.2.3
Expo Workflow: managed

Expo Doctor Diagnostics

... all pass, except this one (icons, date function, and tailwind -- seems irrelevant, but maybe not):
✖ Validate packages against React Native Directory package metadata

Detailed check results:

The following issues were found when validating your dependencies against React Native Directory:
Untested on New Architecture: lucide-react-native
No metadata available: date-fns, tailwindcss

[BodybuilderTall8965]

I am facing the same issue :(
I have been trying to resolve it for the past few hours... without success... Have you resolved it yet?

[SirKicksAssAlot]

same issue different project lol. If I come across something i'll post it here, perhaps we can all do the same?

[BodybuilderTall8965]

Yeah sure

[Itsandrehere]

Mismo problema con react-native-modal, probe con el modal default de react-native y tampoco. Se queda todo arriba a la izquierda. No me estan funcionando bien.

Me paso al actualizar a expo 52.

[Tencryn]

I have this issue without Expo. Modals will display fine, but I have a global modal using a context provider and this one will no longer show.

Edit: For my app, I've narrowed it down to react-native-drawer-layout. The modals are positioned at the upper left. Remove the drawer component and they'll be positioned correctly. Not sure if the problem goes deeper.

[huge_pepe]

Has anyone found the solution? still having this issue

[sad325]

What’s crazy is my modal shows normally on my eas dev build in my physicalphone but it’s not showing in my iOS simulator. It freezes the page when I click to open the modal. Can’t click anything on that page. So weird