JAVASCRIPT

react native elements bottom sheet

//#react native elements bottom sheet close on back button press
<BottomSheet
isVisible={isModelVisible}
modalProps={{
            animationType: 'fade',
            hardwareAccelerated: true,
            onRequestClose: () => {
              setModelVisible(false);
            },
}}>
  ....
  <BottomSheet/>

react native bottom sheet

npm i react-native-raw-bottom-sheet --save

react native bottom sheet

npm i react-native-raw-bottom-sheet --save

react native raw bottom sheet

import React, { useRef } from "react";
import { View, Button } from "react-native";
import RBSheet from "react-native-raw-bottom-sheet";
 
export default function Example() {
  const refRBSheet = useRef();
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#000"
      }}
    >
      <Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current.open()} />
      <RBSheet
        ref={refRBSheet}
        closeOnDragDown={true}
        closeOnPressMask={false}
        customStyles={{
          wrapper: {
            backgroundColor: "transparent"
          },
          draggableIcon: {
            backgroundColor: "#000"
          }
        }}
      >
        <YourOwnComponent />
      </RBSheet>
    </View>
  );
}