FullWindowOverlay - UI is not touchable when over iOS file-viewer's QuickLook

[Ldoppea]

Description

Hi,

Note
I found this issue that is also about interaction problem #1663. But i'm not sure if it is related or not

My project is using both react-native-screens and react-native-file-viewer

I need to be able to display an Overlay on top of the QuickLook View opened by react-native-file-viewer. So i'm using <FullWindowOverlay>.

When doing so, my Overlay is correctly displayed on top of the QuickLook View. But some UI components does not react to touch inputs anymore:

• <TextInput /> correctly works
• <Button /> is not touchable anymore

I created a reproduction repository. Here is what is displayed:

✅ The input text can be used. You can enter a in the keyboard to hide the screen.

❌ If you click on the Close the Overlay button, nothing will happen.

✅ But if you close the QuickLook first, then click on the button, the screen will be hidden.

I tried to implement this PR #1582 has it is about touch interaction.
When doing so, the hitTest method correctly detect the clicked button. But nothing happens after that (onPress callback is not called)
(this modification is not included in my reproduction reprository)

Do you understand why this happens?

Steps to reproduce

• Checkout the bug/react-native-screens-file-viewer branch from the reproduction repository
• Build the app and open it on iOS
• Click the download file button
  • This will download a png from Wikipedia so we have a file that can be used by react-native-file-viewer
  • ℹ️ You can change the image source for another by editing the downloadUrl variable (if you don't trust the wikipedia source)
• Click the open file viewer button
  • The file viewer will open
  • 2s later, the <FullWindowOverlay /> will open (I have to open it after the QuickLook View else it won't display on top of it)
• Click the close the Overlay button -> nothing happens
• Click the text input and enter some text -> works (if you enter a it will close the overlay but don't do it yet)
• Click the done button from the QuickLook View (on top right) -> this close the file viewer
• Click the close the Overlay button -> the overlay is closed correctly

Snack or a link to a repository

https://github.com/Ldoppea/react-native-bug-reports/tree/bug/react-native-screens-file-viewer

Screens version

3.18.2

React Native version

0.66.4

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14

Acknowledgements

Yes

[Ldoppea]

I made some more investigations.

I applied this patch on the react-native-file-viewer extension : https://github.com/vinzscam/react-native-file-viewer/pull/111/files which convert the file-viewer into a modal (vs fullScreen).

When doing so, the interaction with the overlay is working correctly.

If I put fullScreen back, then the interaction doesn't work anymore.

navigationController.modalPresentationStyle = UIModalPresentationFullScreen;

So it seems related to having a fullscreen ViewController behind the Overlay.

[StanislavSava]

I just stumbled upon the exact same problem, when I try to render a FullWindowOverlay on top of a fullScreenModal, the overlay renders correctly, but nothing inside it is interactable. @Ldoppea did you find a solution for this?

[StanislavSava]

I found a solution for this. If anyone stumbles upon this issue in the future, try using touchables from react-native-gesture-handler instead of react-native, they seem to handle gestures better and all the buttons should work, regardless of what's behind the FullWindowOverlay!

[bsonmez]

Same here

[teivienn]

I think this will work as a temporary solution.
I had a slightly different problem with the portals. And I achieved the desired result by adding these lines

<Portal>
  <FullWindowOverlay>
      <GestureHandlerRootView style={{ flex: 1 }}>
         {props.children}
      </GestureHandlerRootView>
  </FullWindowOverlay>
</Portal>

Specifically my problem was with the react-navigation presentation modal

[idudinov]

just came across a somewhat similar issue, not sure if that's relevant to the original issue though, but just wanted to share an alternative solution without react-native-gesture-handler.

I was trying to use FullWindowOverlay for displaying a loading indicator over the stack navigators's modal (I think it's relevant for native Modal as well). My goal was to handle any touches on the top layer so they don't go down, but immediate Pressable child of FullWindowOverlay didn't want to handle touches at all, same as for some people above.

After some time spent on research, I realized that in the original example of FullWindowOverlay there's an additional View wrapper with pointerEvents="box-none":

react-native-screens/apps/src/tests/Test1096.tsx

Lines 37 to 39 in 61ef186

	<View
	style={{ flex: 1, justifyContent: 'center' }}
	pointerEvents="box-none">

And then in its turn there's a button inside it, which obviously works.

So I've added such wrapper and it fixed my issue. Hopefully this helps someone.