Description
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. 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.
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 is always false.
Removing this fixed the issue. However, it was added in 7abcaaf, 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. 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 or 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