[Android] Impossible to show modal scrim

evancharlton commented 1 year ago

Description

The scrim on the Modal component is impossible to use on Android.

We want to create a simple modal dialog on top of a partially-obscured background (a scrim) -- a common UI pattern.

In theory, should be possible with something like:

<Modal /* snip */>
  <Text>This is some text</Text>
  <Button title="Close" /* snip */ />
</Modal>

However, this doesn't work. We're given a white backdrop that covers the whole screen, as transparent={false} renders an opaque backdrop.

If we pass transparent={true} to remove the background, the dialog's backdrop is 100% transparent, showing the content behind it.

The next step would be to draw our own scrim in React Native with CSS. However, this results in the scrim not covering the status (notification) bar and the gesture indicator at the bottom. Both of these parts of the screen outside of a typical app's window, and can't be drawn on.

Here's the steps in tabular form:

Goal	`transparent={false}` (or `undefined`)	`transparent={true}`	Custom scrim

There are a few issues in the underlying code, which I'll enumerate here.

Forcing white background

The white background is forced by the Modal, on [this line of code][white-bg]. It's possible to remove this white background by passing transparent={true}, but that uncovers another bug.

Removing the scrim on transparent dialogs

When the dialog is rendered with transparent={true}, then the modal is rendered without a background. However, when this happens, the FLAG_DIM_BEHIND is cleared from the Dialog, which removes the scrim. This happens on [this line of code][dim-behind].

Investigating that uncovers another bug.

The dialog is never updated

When investigating that bug, I discovered that updateProperties() is always short-circuited. Specifically, the window.isActive() check on [this line of code][window-active] is always false.

Removing this fixed the issue. However, it was added in https://github.com/facebook/react-native/commit/7abcaafd6600535825aa8330af7290ba8acea245, which alluded to a crashing issue. I'm not sure whether this specific check was out of paranoia, or what, but it seemed risky to undo without knowing more.

The scrim is hardcoded

Finally, the opacity of the scrim (the "dim amount") is hardcoded [on this line of code][dim-amount]. It would probably be best if this were left unspecified and/or read from the theme (Theme.FullScreenDialog, I believe) so that apps could customize it if they wish (ie, [Theme_backgroundDimAmount][theme-backgrounddimamount] or [Window_backgroundDimAmount][window-backgrounddimamount])

[dim-behind]: https://github.com/facebook/react-native/blob/540c41be91ea6bf318190098dfc88ebdecc273a8/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L389

[window-active]: https://github.com/facebook/react-native/blob/540c41be91ea6bf318190098dfc88ebdecc273a8/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L376

[white-bg]: https://github.com/facebook/react-native/blob/540c41be91ea6bf318190098dfc88ebdecc273a8/packages/react-native/Libraries/Modal/Modal.js#L228

[dim-amount]: https://github.com/facebook/react-native/blob/540c41be91ea6bf318190098dfc88ebdecc273a8/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L391

[theme-backgrounddimamount]: https://developer.android.com/reference/android/R.styleable#Theme_backgroundDimAmount

[window-backgrounddimamount]: https://developer.android.com/reference/android/R.styleable#Window_backgroundDimAmount

React Native Version

0.72.4

Output of `npx react-native info`

info Fetching system and libraries information... System: OS: macOS 13.5 CPU: (10) arm64 Apple M1 Max Memory: 202.89 MB / 64.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /opt/homebrew/bin/yarn npm: version: 9.6.7 path: /usr/local/bin/npm Watchman: version: 2023.08.07.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

DriverKit 22.2
iOS 16.2
macOS 13.1
tvOS 16.1
watchOS 9.1 Android SDK: Android NDK: 25.2.9519653 IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9619390 Xcode: version: 14.2/14C18 path: /usr/bin/xcodebuild Languages: Java: version: 17.0.8 path: /opt/homebrew/opt/openjdk@17/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: Not Found react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found

Steps to reproduce

Attempt to create the above dialog. I believe that the Snack and the steps above are sufficient for this.

Snack, screenshot, or link to a repository

Snack to demonstrate this: https://snack.expo.dev/@echarlton/modal

github-actions[bot] commented 1 year ago

:warning:	Add or Reformat Version Info
:information_source:	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

evancharlton commented 1 year ago

Version info added. This is reproducible on main, too.

ravirajn22 commented 1 year ago

Yes, Modal is little confusing. But, you can use statusBarTranslucent property.

Note: If you use this property then in the Modal android:windowSoftInputMode="adjustResize will not work. You have to handle keyboard space.

hanwenbo commented 1 week ago

statusBarTranslucent can help u ?

facebook / react-native