BottomSheet.js

// original source: https://medium.com/@ndyhrdy/making-the-bottom-sheet-modal-using-react-native-e226a30bed13 🙇
import React, {useEffect, useRef} from 'react';
import {
  Animated,
  Dimensions,
  Modal,
  PanResponder,
  StyleSheet,
  View,
} from 'react-native';

export default (props) => {
  const screenHeight = Dimensions.get('screen').height;
  const panY = useRef(new Animated.Value(screenHeight)).current;

  const resetPositionAnim = Animated.timing(panY, {
    toValue: 0,
    duration: 300,
    useNativeDriver: true,
  });

  const closeAnim = Animated.timing(panY, {
    toValue: screenHeight,
    duration: 500,
    useNativeDriver: true,
  });

  const translateY = panY.interpolate({
    inputRange: [-1, 0, 1],
    outputRange: [0, 0, 1],
  });

  const handleDismiss = () => closeAnim.start(props.onDismiss);

  useEffect(() => {
    resetPositionAnim.start();
  }, [resetPositionAnim]);

  const panResponders = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => false,
      onPanResponderMove: Animated.event([null, {dy: panY}], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: (_, gs) => {
        if (gs.dy > 0 && gs.vy > 2) {
          return handleDismiss();
        }
        return resetPositionAnim.start();
      },
    }),
  ).current;

  return (
    <Modal
      animated
      animationType="fade"
      visible={props.visible}
      transparent
      onRequestClose={handleDismiss}>
      <View style={styles.overlay}>
        <Animated.View
          style={{
            ...styles.container,
            transform: [{translateY: translateY}],
          }}
          {...panResponders.panHandlers}>
          <View style={styles.sliderIndicatorRow}>
            <View style={styles.sliderIndicator} />
          </View>
          {props.children}
        </Animated.View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    flex: 1,
    justifyContent: 'flex-end',
  },
  container: {
    backgroundColor: 'white',
    paddingTop: 12,
    paddingHorizontal: 12,
    borderTopRightRadius: 12,
    borderTopLeftRadius: 12,
    minHeight: 200,
  },
  sliderIndicatorRow: {
    flexDirection: 'row',
    marginBottom: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sliderIndicator: {
    backgroundColor: '#CECECE',
    height: 4,
    width: 45,
  },
});

The overlay View remains after dismissing.

{/* This will give functionality to click on the overlay to close the modal popup and remove the overlay during the close of modal popup /}
{/ BottomSheet.js */}

const handleDismiss = () => closeAnim.start(() => props.onDismiss());
<Modal
      animationType="fade"
      visible={true}
      onRequestClose={handleDismiss}
      transparent>
      <TouchableWithoutFeedback onPress={handleDismiss}>
        
      <View style={styles.overlay}>
          <Animated.View
            style={{...styles.container, transform: [{translateY: translateY}]}}
            {...panResponders.panHandlers}>
            <View style={styles.sliderIndicatorRow}>
              <View style={styles.sliderIndicator} />
            </View>
            {children}
          </Animated.View>
        </View>

      </TouchableWithoutFeedback>
</Modal>

{/* Yourcomponent.js */}

...
const [openModal, setopenModal] = useState<boolean>(false);

const onOpen = () => {
    setopenModal(true);
};

const onDismiss = () => {
   setopenModal(false);
};

return (
    <View>
         <Button title="Open" onPress={onOpen}/>
         {openModal && (
              <BottomSheet onDismiss={onDismiss}>
                    <Text>hello</Text>
              </BottomSheet>
          )}
    </View>
)

...

how we can have an event or pressable in children and after press it, close bottomsheet?