Sync Modal system bars visibility with current activity

[mateoguzmana]

Summary:

Fixes #37801

This PR fixes the system bars visibility not being in sync as with the activity it is displayed on.

Here I am also taking into account the feedback given in this PR which was also aiming to address this issue. Unfortunately, I tried in multiple ways to get this to work by simply extending the whole system bars behaviour in the dialog with the activity system bars behaviour but found out that that solution won't work as we currently clear the flag "FLAG_NOT_FOCUSABLE" and unless we remove that line, extending the behaviour won't work. Removing that line is not an option as it would cause other side effects in the dialog itself.

With the above said, I ended up doing this in a more explicit way, by checking whether the status or navigation bars are hidden in the activity and then hiding then as well in the dialog or otherwise, similar as we are currently doing with the status bars appearance.

Changelog:

[ANDROID] [FIXED] - Sync Modal system bars visibility with current activity

Test Plan:

In order to test this, you need to trigger any method that hides or shows the system bars using window.insetsController. Here a very small example of it:

fun toggleSystemBarsVisibility(shouldHide: Boolean) {
  val window = currentActivity?.window
  val controller = window?.insetsController
  if (shouldHide) {
    controller?.hide(WindowInsets.Type.systemBars())
  } else {
    controller?.show(WindowInsets.Type.systemBars())
  }
}

You can do this optionally from JS to make testing different cases easier. Below is a screen recording of how the solutions looks like:

Screen recording showcasing the solution in the test plan

Screen.Recording.2024-12-20.at.23.34.09.mov

[facebook-github-bot]

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

[alanleedev]

@mateoguzmana Thanks for submitting the PR. I'm looking into a few things;

• using WindowInsetsControllerCompat to make it backwards compatible
• testing on various API versions to make sure it works as expected.

[mateoguzmana]

@mateoguzmana Thanks for submitting the PR. I'm looking into a few things;

• using WindowInsetsControllerCompat to make it backwards compatible
• testing on various API versions to make sure it works as expected.

Thanks for looking into this! if there is anything I can help with among those lines just let me know.

[TonyFTannous-Byd]

My react native is 0.76.6, the system navigation bar still appear, the system bar still appear when modal display
any solution

thanks

[facebook-github-bot]

@alanleedev merged this pull request in 7016225.

[react-native-bot]

This pull request was successfully merged by @mateoguzmana in 7016225

^{When will my fix make it into a release? | How to file a pick request?}