fix(android): enable edge-to-edge for translucent modal Dialogs

[huukhuong]

Motivation

On Android, modal Dialogs did not draw truly edge-to-edge: the backdrop stopped at the status / navigation bars instead of extending behind them. That breaks the documented edge-to-edge behavior (statusBar.translucent + backdrop covering system bars while JS pads content with safe area).

This change enables edge-to-edge for the modal window so the backdrop can cover both the status bar and the navigation bar.

Changes

• Enable edge-to-edge on the Dialog window via WindowCompat.setDecorFitsSystemWindows(window, false)
• Make status bar and navigation bar transparent (window + Theme.FullScreenDialog)
• When translucent, zero top and bottom system window insets so content/backdrop can draw behind system bars (JS should continue to pad with SafeAreaView / insets)

Screenshots

Full Screen modal

Before	After

Status / nav bars stay opaque or letterboxed before; after apply, the modal backdrop extends behind both system bars.

Simple modal

Before	After

Notes / migration

• Apps using statusBar={{ translucent: true }} (or deprecated statusBarTranslucent) should pad content with SafeAreaView / useSafeAreaInsets, same as the edge-to-edge guide.
• Without safe-area padding, content may sit under the navigation bar after this change.

Test plan

• Example app Android — Full Screen / edge-to-edge scenario: backdrop under status + nav bar; content padded
• Example app Android — Simple modal: backdrop / dimming behind system bars as expected
• Gesture navigation and 3-button navigation
• Keyboard open/close with text input inside modal (SOFT_INPUT_ADJUST_RESIZE)
• statusBar.translucent: false still respects system insets

[paufau]

Thank you very much for raising the pull request!

I'm going to free up some time tomorrow to review it and merge asap

[paufau]

Hey @huukhuong, could you please provide more info
I need to know which Android and RN versions were used to reproduce the broken behavior

[huukhuong]

Hi @paufau, here’s all the information you need:

• Android: 16
• RN: You can use the example project in this repo
• Container: Replace SafeAreaView with View in DemoScreen.tsx
• Content: ScrollView
• Safe area: Intentionally not applied to allow edge-to-edge rendering

<View style={[styles.safeArea, { backgroundColor: colors.background }]}>
  <ScrollView
    style={styles.scroll}
    contentContainerStyle={[
      styles.scrollContent,
      { paddingBottom: height / 2 },
    ]}
  >
    <Typography testID="screen-top" style={styles.architecture}>
      Current Architecture: {IS_FABRIC ? "Fabric 🚀" : "Paper ✈️"}
    </Typography>

    <View style={styles.casesContainer}>
      {demoCases.map(({ title, description, id }) => (
        <ScenarioCard
          key={id}
          testID={`${id}-open-button`}
          title={title}
          description={description}
          onPress={() => {
            openModal(id);
          }}
        />
      ))}
    </View>
  </ScrollView>

  {activeCases.map(renderModal)}
</View>;

[paufau]

Hey, thanks for waiting and for your contribution.

During testing, I was able to reproduce the bug on versions 14 and below; everything worked fine for me on version 16.