React Native: How to create an animated bottom sheet in React Native?

1import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
2import { Gesture, GestureDetector } from 'react-native-gesture-handler';
3
4function BottomSheet() {
5  const translateY = useSharedValue(0);
6
7  const gesture = Gesture.Pan()
8    .onUpdate((e) => {
9      translateY.value = e.translationY;
10    })
11    .onEnd(() => {
12      translateY.value = withSpring(0);
13    });
14
15  const animatedStyle = useAnimatedStyle(() => ({
16    transform: [{ translateY: translateY.value }],
17  }));
18
19  return (
20    <GestureDetector gesture={gesture}>
21      <Animated.View style={[styles.bottomSheet, animatedStyle]}>
22        <View style={styles.handle} />
23        <Text>Content here</Text>
24      </Animated.View>
25    </GestureDetector>
26  );
27}

1onEnd: (e) => {
2  const snapPoints = [0, -200, -400];
3  translateY.value = withSpring(
4    snapPoints.reduce((prev, curr) =>
5      Math.abs(curr - translateY.value) < Math.abs(prev - translateY.value)
6        ? curr : prev
7    )
8  );
9},