ios – React Native Modals not seen after updating from Expo 51 -> 52

Minimal reproducible instance

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

It’s totally small. The related information, to repro for a single modal, are:

• elements/ExerciseSetList.tsx to see the place the ExercisePickerModal is used
• elements/ExercisePickerModal.tsx to see the modal itself
• app/(tabs)/exercise.tsx to see the web page that renders ExerciseSetList

Repro steps (from 100% contemporary set up):

1. Run the app utilizing npx expo begin
2. Click on “Add New Mesocycle”
3. Click on a template, click on proceed
4. Click on Auto-fill Workouts, click on Create Mesocycle
5. Click on that mesocycle’s card to land on the exercise web page
6. Click on an train’s choice menu (3 vertical dots)
7. Click on Exchange Train

Anticipated: Opens the ExercisePickerModal
Precise: It units this modal to seen (know this from console logging within the modal), however the modal shouldn’t be seen. Additional, for those who strive clicking the train choice menu once more, you can’t. You possibly can solely open different workouts’ menus.

There aren’t any errors, in console or in Simulator.

Full demo video beneath for readability.

What platform(s) does this happen on?

iOS

The place did you reproduce the problem?

in Expo Go

Abstract

I constructed this app utilizing Expo 51. I used to be compelled to replace to 52 to make use of Expo Go for testing on my iPhone.
After updating, a number of modals don’t present when opened:

• ExercisePickerModal
• AddCustomExerciseModal
• Inside MesoMenu, the Edit Modal

These all stay underneath /elements.

It appears that evidently something however top-level (not nested inside something) modals work after updating.
If I strive opening the menu from the buttons that result in the buttons to open these modals, they’re not pressable. I’ve to shut your entire app and reopen to have the ability to strive once more.

Demo video of damaged modal:

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

Within the demo, I’m going to the /app/(tabs)/exercise route and see the ExerciseSetList.
I open the primary train’s choice menu, triggering handleMenuPress.
I choose “Exchange Train”.
If I add logs, I can see the modal’s seen prop is true.
The modal doesn’t seem on the display screen.

The solely different factor that triggered lint errors after updating from 51 –> 52 was kind points on the buttonRef. This appears irrelevant to the modal challenge, however for sake of transparency that is what I needed to change in a number of locations:
From this: const buttonRef = useRef<TouchableOpacity>(null);
To this: const buttonRef = useRef<ElementRef<typeof TouchableOpacity>>(null);

I am new to React Native & Expo, so I attempted working with ClaudeAI & ChatGPT, and CursorAI, and even with all of the venture’s context and making an attempt dozens of issues, nothing is resolving this challenge. I’ve tried

• Numerous makes an attempt at eradicating animations altogether
• Including requestAnimationFrame to the modal handlers
• Eradicating presentationStyle={'pagesheet'} and presentationStyle altogether
• Numerous combos of clear and presentationStyle
• Transferring the modals & their state administration to the foundation of the Exercise route so they are not nested in any view
• Wrapping the modals in SafeAreaViews and suppliers

Please let me know if I can present any extra context.
Sorry, I do know this is not a really minimal instance, however there does not appear to be an effective way to offer a shareable sandbox on-line. Their very own sandbox, snack.expo.dev, solely gives v51 thus far…

Setting

expo-env-info 1.2.1 surroundings data:
    System:
      OS: macOS 15.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.19.1 - ~/.nvm/variations/node/v18.19.1/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 10.7.0 - ~/.nvm/variations/node/v18.19.1/bin/npm
    Managers:
      CocoaPods: 1.15.2 - /choose/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 Physician Diagnostics

Enabled experimental React Native Listing checks. Unset the EXPO_DOCTOR_ENABLE_DIRECTORY_CHECK surroundings variable to disable this examine.
✔ Examine bundle.json for widespread points
✔ Examine Expo config for widespread points
✔ Examine native tooling variations
✔ Examine if the venture meets model necessities for submission to app shops
✔ Examine for widespread venture setup points
✔ Examine dependencies for packages that shouldn't be put in instantly
✔ Examine for app config fields that might not be synced in a non-CNG venture
✔ Examine for points with Metro config
✔ Examine Expo config (app.json/ app.config.js) schema
✖ Validate packages in opposition to React Native Listing bundle metadata
✔ Examine npm/ yarn variations
✔ Examine for legacy world CLI put in regionally
✔ Examine that native modules don't use incompatible assist packages
✔ Examine that native modules use suitable assist bundle variations for put in Expo SDK
✔ Examine that packages match variations required by put in Expo SDK

Detailed examine outcomes:

The next points have been discovered when validating your dependencies in opposition to React Native Listing:
Untested on New Structure: lucide-react-native
No metadata obtainable: date-fns, tailwindcss
Recommendation: 
- Use libraries which can be actively maintained and assist the New Structure. Discover various libraries with https://reactnative.listing.
- Add packages to expo.physician.reactNativeDirectoryCheck.exclude in bundle.json to selectively skip validations, if the warning shouldn't be related.
- Replace React Native Listing to incorporate metadata for unknown packages. Alternatively, set expo.physician.reactNativeDirectoryCheck.listUnknownPackages in bundle.json to false to skip warnings about packages with no metadata, if the warning shouldn't be related.

A number of checks failed, indicating potential points with the venture.