Bottom sheet is not getting closed in react native android

user_16676541 0
Viewed 300

I am using @gorhom/bottom-sheet library to create my bottomsheet which have some weird behaviour in android devices. I am unable to close or swap top bottom the bottomsheet in android only. Also when keyboard appears this bottomsheet keeps transparent background.

Component

const BottomSheetComponent = (props: BottomSheetComponentProps, ref) => {
  const theme = useCustomTheme();
  const styles = useMemo(() => makeStyles(theme), [theme]);

  const {children, visible, onClose, header, snapPoints = ['70%', '70%'], enablePanDownToClose = true, renderBackdrop = true } = props;

  // const bottomSheetRef = useRef<BottomSheet>(null);
  const detached = true;

  /**
   * onClick outside to close bottomsheet
   */
  const renderBackdropComponent = useCallback(
    props => <BottomSheetBackdrop {...props} />,
    [],
  );

  return (
    <Modal visible={visible} transparent>
      <BottomSheet
        ref={ref}
        onClose={onClose}
        backdropComponent={renderBackdrop ? renderBackdropComponent : null}
        snapPoints={snapPoints}
        detached={detached}
        enablePanDownToClose={enablePanDownToClose}
        keyboardBehavior={'interactive'}
        keyboardBlurBehavior={'restore'}
        style={styles.container}
        handleStyle={styles.handleStyle}
        handleIndicatorStyle={styles.indicatorStyle}
      >
        <View style={styles.contentContainer}>
          {header}
          {children}
        </View>
      </BottomSheet>
    </Modal>
  );
};

export default forwardRef(BottomSheetComponent);

Styles


const makeStyles = (theme: ColorTheme) => StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.primaryDark,
    shadowColor: theme.white,
    shadowOffset: {
      width: 0,
      height: 12
    },
    shadowOpacity: 0.5,
    shadowRadius: 16,
    elevation: 24
  },
  handleStyle: {
    backgroundColor: theme.primaryDark,
    // borderTopColor: theme.backgroundGrey,
  },
  indicatorStyle: {
    backgroundColor: theme.secondaryGrey,
    width: scaleWidth(56),
  },
  contentContainer: {
    flex: 1,
    backgroundColor: theme.primaryDark,
  },
});

What I tried I tried to work with gesture handler and reinstalled it in the application but it doesn't seems to work

react-native reactjs android
1 Answers

Your BottomSheet need to be wrapped with gestureHandlerRootHOC

return (
    <Modal visible={visible} transparent>
        <YourButtomSheet />
    </Modal>
)



const YourButtomSheet = gestureHandlerRootHOC((props: Props) => {
...
   
     return (
         <BottomSheet
                ref={ref}
                onClose={onClose}
                backdropComponent={renderBackdrop ? renderBackdropComponent : null}
                snapPoints={snapPoints}
                detached={detached}`enter code here`
                enablePanDownToClose={enablePanDownToClose}
                keyboardBehavior={'interactive'}
                keyboardBlurBehavior={'restore'}
                style={styles.container}
                handleStyle={styles.handleStyle}
                handleIndicatorStyle={styles.indicatorStyle}
              >
                <View style={styles.contentContainer}>
                  {header}
                  {children}
                </View>
           </BottomSheet>
        )
})

export default YourButtomSheet

https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/

user_110804290
Related