Backdrop wrapper not scaling up with the screen

[Saikedo]

Environment

System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz Memory: 17.20 GB / 31.94 GB Binaries: Node: 16.11.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 29, 30, 31 Build Tools: 29.0.2, 30.0.2, 31.0.0 System Images: android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64 Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7621141 Visual Studio: Not Found Languages: Java: 1.8.0_302 - /c/Program Files/OpenJDK/openjdk-8u302-b08/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.65.1 => 0.65.1 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Platforms

Tested on React Native Web

Versions

13.0.0

Description

Backdrop wrapper does not scale with the window in React Native Web. If I zoom in/out the page(Or change the viewport size in nay way) while the modal is shown, it`s backdrop does not change the size. I know I can trigger it to update with hooks but I was wondering what is the reason of using screen dimensions to determine the backdrop wrapper size instead of using '100%' or flex. At least having a way to provide props to control the styling of the wrapper would have help a lot as well.

I even tried using a custom backdrop but it seems like your custom backdrop element is wrapped in backdropWrapper as well.

I think the issue happens in this.makeBackdrop function. As you can see in this snippet, backdropComputedStyle has a width and height matching the device width and height and that seems to be the final value for the backdropWrapper.

const backdropComputedStyle = [
    {
        width: this.getDeviceWidth(),
        height: this.getDeviceHeight(),
        backgroundColor: this.state.showContent && !hasCustomBackdrop
            ? backdropColor
            : 'transparent',
    },
];
const backdropWrapper = (React.createElement(animatable.View, { ref: ref => (this.backdropRef = ref), useNativeDriver: useNativeDriverForBackdrop !== undefined
        ? useNativeDriverForBackdrop
        : useNativeDriver, style: [styles.backdrop, backdropComputedStyle] }, hasCustomBackdrop && customBackdrop));
if (hasCustomBackdrop) {
    // The user will handle backdrop presses himself
    return backdropWrapper;
}
// If there's no custom backdrop, handle presses with
// TouchableWithoutFeedback
return (React.createElement(TouchableWithoutFeedback, { onPress: onBackdropPress }, backdropWrapper));

Reproducible Demo

Use this code in the browser and try zooming out.

<ReactNativeModal
    isVisible
    backdropColor='black'
    backdropOpacity={0.7}
>
    <View/>
</ReactNativeModal>

[vvsamin]

Just pass the window size to the modal component:

const {width, height} = useWindowDimensions();

<ReactNativeModal
    isVisible
    backdropColor='black'
    backdropOpacity={0.7}
    deviceWidth={width}
    deviceHeight={height}
>
    <View/>
</ReactNativeModal>