(Android) 'statusBarTranslucent' prop not working properly

Platforms

Android (emulator, Galaxy Fold 2)

Versions

• react-native-modal: 12.0.2
• react-native: 0.64.1
• react: 17.0.1

Description

When set ‘statusBarTranslucent’ prop, backdrop doesn’ fill the screen full.

This is the legacy Modal component with statusBarTranslucent = true

And this is React Native Modal with statusBarTranslucent = true

I guess that this happens when device has safe area.

This bug can be fixed with modifying

https://github.com/react-native-modal/react-native-modal/blob/60ea392df7d26a598628b1f3a06440b7ecccacd9/src/modal.tsx#L698-L707

701th line, height: this.getDeviceHeight(), to height: '100%',

(But I cannot ensure whether or not side-effects exist)

Reproducible Demo

import React from 'react';
import {View, SafeAreaView, StatusBar, Text, StyleSheet} from 'react-native';
import Modal from 'react-native-modal';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleText: {
        fontSize: 30,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 50,
    },
    dialogStyle: {
        width: 200,
        height: 100,
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

const App = () => {
    const [visible, setVisible] = React.useState(true);

    return (
        <>
            <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
            <SafeAreaView style={styles.container}>
                <Text style={styles.titleText}>
                    Modal Test
                </Text>
                <Modal
                    isVisible={visible}
                    onBackdropPress={() => {
                        setVisible(false);
                    }}
                    statusBarTranslucent
                    style={{
                        alignItems: 'center'
                    }}
                >
                    <View style={styles.dialogStyle}>
                        <Text>React Native Modal</Text>
                        <Text>MODAL CONTENT</Text>
                    </View>
                </Modal>
            </SafeAreaView>
        </>
    );
};
export default App;

[SUCHMOKUO]

customBackdrop and Dimensions.get('screen') solved this problem.

<Modal
  statusBarTranslucent
  backdropOpacity={0.4}
  customBackdrop={<View style={{ backgroundColor: 'black', ...Dimensions.get('screen') }} />}
  ...
>
    ...
</Modal>

[avlonder]

Alternatively, you can just set the deviceHeight prop to ‘100%’. However, it’s type is null. Maybe, this is a bug too?