Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Android,Fabric): add FullWindowOverlay support for Android #2733

Draft
wants to merge 27 commits into
base: main
Choose a base branch
from

Conversation

kkafar
Copy link
Member

@kkafar kkafar commented Feb 22, 2025

Description

This PR aims to add experimental support for FullWindowOverlay component on Android.

Supersedes #2421, #2425 (shoutout to @maciekstosio & @mfazekas for the initial work & research)

State:

  • Edge-to-edge (targetSdk >= 35)
  • regular (targetSdk < 35)
  • screen orientation change
  • gesture support for items in FWO subtree
    • pointer events (including hover)
  • blocks gestures in main tree
    • pointer events (including hover)
  • react modal interaction tested & described
  • interaction with our modals
    • Android (formSheet stays underneath)
    • iOS

Description copied from the "docs" I've added for this component in this PR

FullWindowOverlay

Caution

Support of this component on Android is currently experimental and limited to new architecture.

In addition to navigation primitives described above ☝️, the library exposes FullWindowOverlay component. Its purpose is to enable displaying overlay above all other application contents.
Example usage can be found in TestFullWindowOverlay example in our test app.

Below we shortly describe current characteristics of the component.

Note

Description below should be treated as implementation details and not as stable behavior description, unless explicitly stated otherwise.

View hierarchy placement

On both platforms - iOS & Android the FullWindowOverlay component gives you opportunity to mount your views directly under UIWindow & Window respectively.
This allows for presenting the content above all main application content.

When using FullWindowOverlay the views are mounted in a subtree separate from main react-native subtree. This has some diverging behavior implications for each platform. Please see below the behavior description.

Behavior aspects

Note

Description below should be treated as implementation details and not as stable behavior description, unless explicitly stated otherwise.

Dimensions

FullWindowOverlay should have dimensions of full window. It does not take safe area insets into account - it is left to the user to handle.

In Android applications that do not have edge-to-edge enabled (vast majority of applications targeting SDK 34 or lower) the status & navigation bars are expected.

Gestures

By design, the FullWindowOverlay component blocks gesture interaction with content underneath.

The gestures for views in FullWindowOverlay's subtree are fully supported.

Interaction with modal components

In this section we describe briefly how the FullWindowOverlay component behaves when used simultaneously with different modal components.
Due to platform differences the behavior is slightly different depending whether it is used on iOS or Android devices.

iOS

On iOS the FullWindowOverlay stays above navigation screens with modal presentation. The same applies for e.g. Modal from react-native. We do not guarantee that
this will be the case for any third-party modal component, since it depends on its internal implementation.

Android

On Android we use TYPE_APPLICATION_ATTACHED_DIALOG to mount
the component directly under the window. Together with react-native's Modal implementation details this implies that Modal will be displayed above the FullWindowOverlay
if displayed from already mounted FullWindowOverlay - and vice versa -FullWindowOverlay will be displayed above the Modal if displayed from already mounted Modal.

To make FullWindowOverlay display always on top of everything on Android is technically possible, however requires explicit permission from the application user. At the moment we decided
to avoid this and settled on "weaker" implementation. Please note that we might add this option some time in the future (in a non-breaking way).


and back to PR description...

Changes

Test code and steps to reproduce

Test1096, TestFullWindowOverlay

Checklist

  • Included code example that can be used to test this change
  • Ensured that CI passes

@kkafar kkafar marked this pull request as draft February 22, 2025 13:16
@kkafar
Copy link
Member Author

kkafar commented Feb 25, 2025

Currently blocked by a layout bug when changing screen orientation on Android SDK 34.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant