Skip to content

Comments

Fix StatusBar not applying to Modal windows on Android#55721

Open
zoontek wants to merge 5 commits intofacebook:mainfrom
zoontek:modal-system-bars-control
Open

Fix StatusBar not applying to Modal windows on Android#55721
zoontek wants to merge 5 commits intofacebook:mainfrom
zoontek:modal-system-bars-control

Conversation

@zoontek
Copy link
Contributor

@zoontek zoontek commented Feb 24, 2026

Summary:

Currently, when a Modal is displayed on Android, it creates a new Dialog with its own Window. Modules like StatusBarModule only apply their configuration to the main Activity's window, so status bar changes (color, style, visibility, translucency) are not reflected in Modal windows. This leads to visual inconsistencies where the status bar appearance resets when a Modal is shown.

This PR introduces a WindowEventListener interface that allows native modules to be notified when new windows are created or destroyed (e.g. Modal dialogs). StatusBarModule is refactored to:

  • Implement WindowEventListener to track extra windows
  • Extract Window extension functions (setStatusBarColor, setStatusBarStyle) into WindowUtil.kt for reuse
  • Read the initial status bar state from the Activity window on initialization

Third-party libraries can also implement WindowEventListener and emit window events through ReactContext.onWindowCreated / ReactContext.onWindowDestroyed. This opens the door for libraries like expo-navigation-bar to build a proper NavigationBar module that stays in sync across all windows (including Modals), supports full transparency, and generally works the same way StatusBarModule now does.

This also fixes a race condition that occurs when opening a Modal and changing the status bar state at the same time.

👉 Note that the interface and method names may be updated. Please feel free to suggest changes.

Related issues

Changelog:

[ANDROID] [ADDED] - Add WindowEventListener interface to allow native modules to react to window creation/destruction (e.g. Modal dialogs)
[ANDROID] [FIXED] - StatusBar configuration now applies to Modal windows, fixing visual inconsistencies

Test Plan:

  1. Open the RNTester app on Android
  2. Set a status bar color, style, or visibility using the StatusBar API
  3. Open a Modal - verify the status bar appearance is preserved
  4. Change the status bar while the Modal is open - verify it updates on the Modal window too
  5. Dismiss the Modal - verify the status bar appearance is still correct
modal-status-bar.mp4

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 24, 2026
@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Feb 24, 2026
@zoontek
Copy link
Contributor Author

zoontek commented Feb 24, 2026

Here is an example with transparent modals (it behaves like iOS)

transparent-modal.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants