RFC + WIP: FullWindowOverlay on android

[mfazekas]

Description

FullWindowOverlay implementation for android

TODO:

• EventHandling

Changes

• Added FullWindowOverlay implementation for android

The implementation is adding a FullWindowOverlayRootView to the window for every FullWindowOverlay, FullWindowOverlay on native side is just a placeholder.

Screenshots / GIFs

Android	iOS

Test code and steps to reproduce

See:
https://github.com/mfazekas/react-native-screens/blob/6f081fc33f1b8165df194eb3dd9ee42504c0d415/apps/src/tests/TestFullWindowOverlay.tsx#L1C1-L30C2

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[maciekstosio]

Hi, thanks for this PR! The problem is a little bit more complex, I started to work on it but needed to switch focus to something else. Correct me if I'm wrong:

• If you click in the overlay the the app will crash
• Overlay is not edge to edge
• Opening RN Modal after overlay will cover the overlay

We need to try to tackle those problems because in this state it doesn't give us any advantage over RN Modal. I've created a draft with my changes - the PR #2425 is messy, but it may give you some insights - I was able to solve some of the problems:

As far as I remember crashes can be solved by hardcoding the ID for the view:

react-native-screens/android/src/main/java/com/swmansion/rnscreens/fullwindowoverlay/FullWindowOverlayRootViewGroup.kt

Line 51 in 2bd05f4

id = 42

Passing events could be solved by dispatching the event to RootView of the FullWinowOverlay (the placeholder):

react-native-screens/android/src/main/java/com/swmansion/rnscreens/fullwindowoverlay/FullWindowOverlayRootViewGroup.kt

Line 173 in 2bd05f4

(rootView as ViewGroup).dispatchTouchEvent(event)

⚠️ Sometimes touches were translated in the underlying view (I think just in RN modals) or didn't work (depending on LayoutParams). The translation might be related to changes in the shadow tree for top Header:

react-native-screens/common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNode.cpp

Line 27 in 2bd05f4

void RNSScreenShadowNode::applyFrameCorrections() {

To go edge to edge I used different LayoutParams and setting width height in ShadowNode:

react-native-screens/android/src/main/java/com/swmansion/rnscreens/fullwindowoverlay/FullWindowOverlay.kt

Line 75 in 2bd05f4

WindowManager.LayoutParams.MATCH_PARENT,

react-native-screens/android/src/main/java/com/swmansion/rnscreens/fullwindowoverlay/FullWindowOverlayViewManager.kt

Line 60 in 2bd05f4

view.updateState(modalSize.x, modalSize.y)

Being on top of everything:

react-native-screens/android/src/main/java/com/swmansion/rnscreens/fullwindowoverlay/FullWindowOverlay.kt

Line 78 in 2bd05f4

WindowOverlayCompat.TYPE_SYSTEM_OVERLAY,

⚠️ This was the closest to the desired outcome, but it requires granting "draw over other apps" permission, which we can't force users to enable - so we'll probably put it behind some flag for devs to decide. So, probably, the best for us will be to not support RN models and opt-in support for the permission behind the flag. We could try to reopen the window after each modal, but there isn't a clean way of observing if the RN modal is open: facebook/react-native#45534, software-mansion/react-native-reanimated#5916 (comment)

Btw. I'm not saying any of those solutions are the best approaches to tackle the issues - I'm open for discussion. Once again thanks for spending the time, and I'd be thrilled to work with you on getting it done.

[kkafar]

Thanks for your work! I'll continuing implementation in #2733.