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

Fix an issue where the status bar colors would not match when opening modals #40979

Closed
wants to merge 2 commits into from

Conversation

Abbondanzo
Copy link
Contributor

Summary:

The current ReactModalHostView implementation incorrectly applies system bar appearances by providing the wrong mask to the setSystemBarsAppearance method invocation. Per this issue comment, @jaydonlau correctly identified that when the status bar is set to light-content (light icons, dark background), the function is called with both a 0 appearance and 0 mask, which should instead be provided with the APPEARANCE_LIGHT_STATUS_BARS mask.

The first pass at this PR attempted to pull out the entire appearance from the activity, compare it against the dialog's appearance, and only use a mask of differing bits (see the appearanceMask variable). However, if the android:windowLightStatusBar attribute is ever set to true, this does not impact the appearance of the status bar but rather the system UI visibility. As a result, the derived mask from system bars appearance would be 0 since both the activity and dialog would have appearances of 0.

Rather than try and "future-proof" this implementation for other uses of system bar appearance, this change is directed only at updating the APPEARANCE_LIGHT_STATUS_BARS bit in the dialog's system bar appearance. The only other native code that touches status bars is the StatusBarModule and that only touches this flag.

This is a follow-up to #34899.

Changelog:

[ANDROID] [FIXED] - Fixed an issue where the status bar colors would not match when opening modals

Test Plan:

First test:

  • Replace the RNTesterAppShared implementation with the implementation from this Expo snack
  • Toggle the status bar to show dark icons, open the modal and ensure that dark icons are displayed
  • Toggle the status bar to show light icons, open the modal and ensure that light icons are displayed

Second test:

  • Set the android:windowLightStatusBar attribute to true in the AppTheme
  • Follow the steps from the First test above, guaranteeing that status bar appearance overrides the theme

@facebook-github-bot facebook-github-bot added 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. labels Oct 14, 2023
@analysis-bot
Copy link

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 17,214,614 -12
android hermes armeabi-v7a n/a --
android hermes x86 n/a --
android hermes x86_64 n/a --
android jsc arm64-v8a 20,587,380 +5
android jsc armeabi-v7a n/a --
android jsc x86 n/a --
android jsc x86_64 n/a --

Base commit: a2f1189
Branch: main

@github-actions
Copy link

Warnings
⚠️ One hour and a half have passed and the E2E jobs haven't finished yet.

Generated by 🚫 dangerJS against dc76851

@facebook-github-bot
Copy link
Contributor

@luluwu2032 has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions github-actions bot added the Merged This PR has been merged. label Oct 31, 2023
Copy link

This pull request was successfully merged by Peter Abbondanzo in e8d622e.

When will my fix make it into a release? | Upcoming Releases

@Abbondanzo Abbondanzo deleted the modal-status-bar-flags branch October 31, 2023 14:53
Othinn pushed a commit to Othinn/react-native that referenced this pull request Jan 9, 2024
… modals (facebook#40979)

Summary:
The current ReactModalHostView implementation incorrectly applies system bar appearances by providing the wrong mask to the `setSystemBarsAppearance` method invocation. Per [this issue comment](facebook#34350 (comment)), jaydonlau correctly identified that when the status bar is set to `light-content` (light icons, dark background), the function is called with both a `0` appearance and `0` mask, which should instead be provided with the `APPEARANCE_LIGHT_STATUS_BARS` mask.

The first pass at this PR attempted to pull out the entire appearance from the activity, compare it against the dialog's appearance, and only use a mask of differing bits (see the `appearanceMask` variable). However, if the `android:windowLightStatusBar` attribute is ever set to true, this does not impact the appearance of the status bar but rather the system UI visibility. As a result, the derived mask from system bars appearance would be 0 since both the activity and dialog would have appearances of 0.

Rather than try and "future-proof" this implementation for other uses of system bar appearance, this change is directed only at updating the `APPEARANCE_LIGHT_STATUS_BARS` bit in the dialog's system bar appearance. The only other native code that touches status bars is the `StatusBarModule` and that only touches this flag.

This is a follow-up to facebook#34899.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[ANDROID] [FIXED] - Fixed an issue where the status bar colors would not match when opening modals

Pull Request resolved: facebook#40979

Test Plan:
First test:
- Replace the `RNTesterAppShared` implementation with the implementation from [this Expo snack](https://snack.expo.dev/abbondanzo/status-bar-tester)
- Toggle the status bar to show dark icons, open the modal and ensure that dark icons are displayed
- Toggle the status bar to show light icons, open the modal and ensure that light icons are displayed

Second test:
- Set the `android:windowLightStatusBar` attribute to true in the `AppTheme`
- Follow the steps from the First test above, guaranteeing that status bar appearance overrides the theme

Reviewed By: NickGerleman

Differential Revision: D50329714

Pulled By: luluwu2032

fbshipit-source-id: 26ecaca05f8e00a52e13767e468b552ac167fc98
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. Merged This PR has been merged. 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.

3 participants