Backdrop doesn't cover the StatusBar (Android)

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.75 GB / 15.82 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Disabled
      Versions: 10.0.17763.0
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.6953283
    Visual Studio: Not Found
  Languages:
    Java: 1.8.0_275 - C:\Program Files\OpenJDK\openjdk-8u275-b01\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.3 => 0.64.3
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

Android

Versions

• Android:
• iOS:
• react-native-modal: 13.0.0
• react-native: 0.64.3
• react: 17.0.1
• expo: 44.0.5

Description

On Android the Backdrop doesn’t cover the StatusBar.

I already checked within my code and the Modal is implemented outside ReactNavigation or SafeAreaView (Which could add some safespace). Since I am on expo, I cannot implement The backdrop is not completely filled/covered on some Android devices (Galaxy, for one) (Du to react-native-extra-dimensions-android). I tried a workaround by using useSafeAreaFrame, useSafeAreaInsets from react-native-safe-area-context but that doesn’t seem to have any impact.

I checked on IOS and everything works as expected :

Reproducible Demo

https://snack.expo.dev/@alexis.regnaud/demo-react-native-modal

You should see on the snack that the statusbar is covered on IOS but not on Android

[souzaluiz]

@rafmrs @alexis-regnaud I solve like this.

function Component () {
  return (
    <Modal 
      isVisible={true} 
      deviceHeight="100%"
      statusBarTranslucent
    >
      ....
    </Modal>
  );
}

[alexis-regnaud]

That code worked also :

const { height } = Dimensions.get('screen');

function Component () {
  return (
    <Modal 
      isVisible={true} 
      deviceHeight={height}
      statusBarTranslucent
    >
      ....
    </Modal>
  );
}

And this doesn’t cause any Type issue

I think in my case statusBarTranslucent was the props which was missed.