[BUG] Bottom sheet cannot be hide in android phone with notch display

[blackstoom]

Hi, Thanks for the amazing library, I really appreciate that.

I recently encounter an issue where the bottom sheet cannot be hide even the snapPoints is set to 0. After some debugging, I suspect the problem occurred because of the notch display. This is because when I disable the notch display on my system setting, the bottom sheet works as expected. This happens on my Oneplus 6 device.

bottomsheetCannotHide-notchDisplayOn.mp4

The video above shows that the bottom sheet cannot be hide. Please note that the little white section at the bottom part of the screen is the bottomsheet. The white section is 16px height which inline with my device notch display height.

bottomsheetHideAsExpected-notchDisplayOff.mp4

The bottomsheet hide as expected when I turn of the notch display for my OnePlus 6 device.

import React, {useState, useRef, useCallback} from 'react';
import {ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {Button} from 'react-native-paper';
import {SafeAreaView} from 'react-native-safe-area-context';
import BottomSheet from 'react-native-bottomsheet-reanimated';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const TestPage = () => {
    const actionSheetRef = useRef(null);

    return (
        <View style={{backgroundColor: 'yellow'}}>
            <StatusBar barStyle={'dark-content'} backgroundColor={'transparent'} translucent />
            <SafeAreaView style={{width: '100%', height: '100%'}}>
                <ScrollView contentContainerStyle={{flexGrow: 1}} keyboardShouldPersistTaps="handled">
                    <View style={styles.bigContainer}>
                        <Button onPress={()=>{
                            actionSheetRef.current.snapTo(1);
                        }}> Testing</Button>
                        
                    </View>
                </ScrollView>
            </SafeAreaView>

            <BottomSheet
                ref={actionSheetRef}
                bottomSheerColor="#FFFFFF"
                initialPosition={0}
                snapPoints={[0, 160]}
                isBackDrop={true}
                isBackDropDismissByPress={true}
                isRoundBorderWithTipHeader={true}
                body={
                    <View style={{paddingVertical: 16}}>
                        <TouchableOpacity
                            onPress={() => {
                                actionSheetRef.current.snapTo(0);
                            }}>
                            <View style={styles.actionButton}>
                                <View
                                    style={{
                                        width: 50,
                                        height: 50,
                                        borderRadius: 25,
                                        overflow: 'hidden',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        backgroundColor: 'white',
                                    }}>
                                    <MaterialIcons name="mode-edit" size={24} color={'gray'} />
                                </View>
                                <Text style={styles.actionButtonLabel}>action 1</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => {
                                actionSheetRef.current.snapTo(0);
                            }}>
                            <View style={styles.actionButton}>
                                <View
                                    style={{
                                        width: 50,
                                        height: 50,
                                        borderRadius: 25,
                                        overflow: 'hidden',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        backgroundColor: 'white',
                                    }}>
                                    <MaterialIcons name="delete" size={24} color={'gray'} />
                                </View>
                                <Text style={styles.actionButtonLabel}>action 2</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                }
            />
        </View>
    );
};

export default TestPage;

const styles = StyleSheet.create({
    bigContainer: {
        width: '100%',
        height: '100%',
        flex: 1,
        backgroundColor: 'yellow',
        padding: 16,
    },    
    actionButton: {
        width: '100%',
        paddingVertical: 8,
        paddingHorizontal: 16,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'row',
    },
    actionButtonLabel: {
        fontSize: 14,
        color: 'black',
        marginHorizontal: 16,
    },
});

I have included a partial of my code for your debugging.

I really appreciate if you could fix this. Also anyone has any temporary workaround suggestion?

Thanks for your time.

[numandev1]

@blackstoom i will fix it after one or two days

[blackstoom]

@nomi9995 Thank you so much for your support and assistance. I'm really appreciate that.

[Neel2497]

@blackstoom have you solved the issue? I am also having the same issue.

[murat0]

Same issue here +1 @nomi9995

[filippobarcellos]

Is this fixed? I would love to use the library but without this doesn't make any sense. Thanks

[nickolasmdasilva]

You should to add a header to your page. The only way that I found to fix it.

androidMarginHeader: {
      marginTop: Platform.OS === "android" ? StatusBar.currentHeight  : 0,
   }

and then

containerStyle={styles.androidMarginHeader}