Strange Issue with PagerView/Image in a Full Screen Overlay (iOS only)

[gtwilliams03]

Description

I am going to pass this along purely because I am not sure what else to do. I figure this will be resolved in a future update, but I thought I would pass it along in case it helps track anything down. I have a react-native (managed Expo) app that includes a "photo gallery" screen.

Basically, it is a FlashList (@shopify) that, when one photo is pressed, it launches a full screen Overlay with a PagerView for swiping through the images. The header contains information on who uploaded the photo and some buttons for (1) editing the caption (pencil icon); (2) deleting the image (trash icon); and (3) closing the full screen overlay (times icon). The caption is contained in the footer of the Overlay.

Works fine locally in the simulator (both iOS and Android Studio) and works fine in production in Android devices. But in iOS, when you tap on an Image in the FlashList (to display the Overlay with the swipable images), the Image does not display and the screen does not respond to swipe gestures. Then, even more oddly, I can tap the "edit" icon at the top, which triggers a bottom drawer for editing the caption. Still no image. But then, if you tap into the TextInput for editing the caption, the Image appears. Then, if you close the caption editing drawer, you can swipe through the images like normal.

Weird, eh? I will work on a reproducer, but thought I would open this since it seems to be a new architecture iOS production-only error that may be very difficult to reproduce.

Steps to reproduce

No repro yet - but can share my repo if testing is needed.

React Native Version

0.74.3

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 37.63 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.4.0
    path: ~/.nvm/versions/node/v21.4.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v21.4.0/bin/yarn
  npm:
    version: 10.8.1
    path: ~/.nvm/versions/node/v21.4.0/bin/npm
  Watchman:
    version: 4.9.0
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.0
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11842104
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

[
        "expo-build-properties",
        {
          "ios": {
            "newArchEnabled": true
          },
          "android": {
            "newArchEnabled": true
          }
        }
      ],

### Stacktrace or Logs

```text
N/A

Reproducer

N/A

Screenshots and Videos

https://github.com/user-attachments/assets/3ac0fa20-7ba6-431f-a929-29337822660e

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

but can share my repo if testing is needed.

Yup repro is necessary here. Also have opened this same issue on FlashList's repo?

[gtwilliams03]

I have not - because I don't think it is related to FlashList. The FlashList is only necessary to present the array of thumbnails to press on. Once any thumbnail is pressed, then the Modal launches which has the PagerView that does not show the pressed image. I probably should open the same issue on the PagerView repo?

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[coado]

@gtwilliams03 Could you provide a repro for this issue? I was looking into that, but unfortunately I cannot reproduce it using PagerView and Modal.

[gtwilliams03]

OK I will work on making one - it has been tough because it works in development in both the iOS Simulator and Android Studio and on Android in production. So making a workable repo has been a challenge 😞

[gtwilliams03]

I updated our app to remove the nested "edit caption" Modal component (actually it was a BottomSheet component from the react-native-elements package) from inside the Overlay component and made it inline instead. This made the image viewer work (i.e., the Image was visible again). It almost seems like the nested Modal backdrop was on since the beginning. So it might not have been the PagerView inside the Overlay at all.

[cipolleschi]

@gtwilliams03 can we consider this solved then? It looks like it is not a React Native problem but more how the libraries you are using are composed and used together, right?

[gtwilliams03]

Yes - I will close this since I was unable to create a working minimal repro and was able to move forward by removing the nested BottomSheet component.