Repository: react-native
Issue: [Android] Impossible to show modal scrim
Labels: Issue: Author Provided Repro,Platform: Android,Component: Modal,p: Microsoft,Partner

### 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:
```ts
<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 |
|:--:|:--:|:--:|:--:|
| ![image](https://github.com/facebook/react-native/assets/418560/bd0ec3bb-ddb5-4926-a9eb-98f401a97b23) | ![image](https://github.com/facebook/react-native/assets/418560/578b8417-2fbf-40ac-9ec0-ca71bb6a2c37) | ![image](https://github.com/facebook/react-native/assets/418560/c6c281a2-632f-461f-8a85-e607ca07932c) | ![image](https://github.com/facebook/react-native/assets/418560/0ffea7b9-254e-4e65-9f3e-d03a0c27fe5a) |

----

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][snack] and the steps above are sufficient for this.

[snack]: https://snack.expo.dev/@echarlton/modal

### Snack, screenshot, or link to a repository

Snack to demonstrate this: https://snack.expo.dev/@echarlton/modal