[v4] Adding index={-1} in certain devices blocks the view (Example device: Oneplus 5) #807
Description
Bug
In certain devices like the OnePlus 5, adding an index={-1} is causing the entire screen to be non-functional, i.e, we're unable to click anywhere on the screen. If we remove this prop, then everything seems to be working fine. But of course we need the BottomSheet to be in closed state initially, hence not adding this prop is not a solution.
But this does work fine on other devices we've tested.
This issue is affecting many users in Production, since we're using BottomSheet in many screens and the Users are unable to use those screens.
Environment info
| Library | Version |
|---|---|
| @gorhom/bottom-sheet | 4.1.5 |
| react-native | 0.64.2 |
| react-native-reanimated | 2.2.4 |
| react-native-gesture-handler | 1.10.3 |
Steps To Reproduce
In certain devices only :
Add an index={-1} in the BottomSheet is causing the entire screen to be non-functional. It is as though there's an overlay on top of the screen which doesn't let us access whatever is currently rendered.
Describe what you expected to happen:
It should not render the screen non-functional.
Reproducible sample code
import React, { useCallback } from 'react';
import { StyleSheet, Keyboard } from 'react-native';
import PropTypes from 'prop-types';
import { bottomSheetHeaderHandler } from 'colors';
import {
heightPercentageToDP as hp,
widthPercentageToDP as wp,
} from 'react-native-responsive-screen';
const renderBackdrop = props => (
<BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />
);
const BottomSheet = React.forwardRef((props, ref) => {
const { children, onChange, ...restProps } = props;
const handleChange = useCallback(index => {
if (index === -1) {
// When the BottomSheet is closed, dismiss any open Keyboard
Keyboard.dismiss();
}
// Call the actual onChange handler passing in the index
onChange?.(index);
}, []);
return (
<BottomSheetGorhom
index={-1}
enablePanDownToClose
backdropComponent={renderBackdrop}
handleIndicatorStyle={styles.handleIndicatorStyle}
ref={ref}
onChange={handleChange}
{...restProps}
>
{children}
</BottomSheetGorhom>
);
});
const styles = StyleSheet.create({
handleIndicatorStyle: {
width: wp('12.6%'),
height: hp('0.65%'),
borderRadius: 4,
backgroundColor: bottomSheetHeaderHandler,
},
});
BottomSheet.propTypes = {
children: PropTypes.node,
onChange: PropTypes.func,
};
export default BottomSheet;