iOS Development

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

codesanitize

19 November 2024

Minimal reproducible instance

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

It is very small. The related recordsdata, 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% recent set up):

Run the app utilizing npx expo begin
Click on “Add New Mesocycle”
Click on a template, click on proceed
Click on Auto-fill Workout routines, click on Create Mesocycle
Click on that mesocycle’s card to land on the exercise web page
Click on an train’s choice menu (3 vertical dots)
Click on Change Train

Anticipated: Opens the ExercisePickerModal
Precise: It units this modal to seen (know this from console logging within the modal), however the modal is just not seen. Additional, if you happen to attempt clicking the train choice menu once more, you can’t. You possibly can solely open different workout routines’ menus.

There are not 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 difficulty?

in Expo Go

Abstract

I constructed this app utilizing Expo 51. I used to be pressured 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 reside beneath /elements.

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

Demo video of damaged modal:

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

Within the demo, I am going to the /app/(tabs)/exercise route and see the ExerciseSetList.
I open the primary train’s choice menu, triggering handleMenuPress.
I choose “Change 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 brought on lint errors after updating from 51 –> 52 was sort points on the buttonRef. This appears irrelevant to the modal situation, however for sake of transparency that is what I needed to change in a number of locations:
From this: const buttonRef = useRef(null);
To this: const buttonRef = useRef>(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 attempting dozens of issues, nothing is resolving this situation. I’ve tried

Numerous makes an attempt at eradicating animations altogether
Including requestAnimationFrame to the modal handlers
Eradicating presentationStyle={'pagesheet'} and presentationStyle altogether
Numerous mixtures of clear and presentationStyle
Transferring the modals & their state administration to the basis of the Exercise route so they don’t seem to be 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 would not appear to be a good way to offer a shareable sandbox on-line. Their very own sandbox, snack.expo.dev, solely gives v51 up to now…

Setting

expo-env-info 1.2.1 setting information:
    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 - /decide/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 setting variable to disable this examine.
✔ Examine bundle.json for frequent points
✔ Examine Expo config for frequent points
✔ Examine native tooling variations
✔ Examine if the venture meets model necessities for submission to app shops
✔ Examine for frequent venture setup points
✔ Examine dependencies for packages that shouldn't be put in instantly
✔ Examine for app config fields that will 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 international CLI put in regionally
✔ Examine that native modules don't use incompatible help packages
✔ Examine that native modules use suitable help 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 accessible: date-fns, tailwindcss
Recommendation: 
- Use libraries which might be actively maintained and help 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 is just not 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 is just not related.

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