6: Markup

Sheet.tsx

return (
    <View style={styles.container}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Animated.View style={[sheetHeightAnimatedStyle, styles.sheet]}>
          <View style={styles.handleContainer}>
            <View style={styles.handle} />
          </View>
          <Animated.View style={sheetContentAnimatedStyle}>
            <Animated.View style={sheetNavigationAnimatedStyle}>
              <TouchableOpacity
                style={styles.closeButton}
                onPress={() => {
                  navHeight.value = withSpring(0, springConfig);
                  sheetHeight.value = withSpring(-expandedHeight, springConfig);
                  position.value = 'expanded';
                }}
              >
                <Text>{`❌`}</Text>
              </TouchableOpacity>
            </Animated.View>
            <SafeAreaView>
              <ScrollView>{props.children}</ScrollView>
            </SafeAreaView>
          </Animated.View>
        </Animated.View>
      </PanGestureHandler>
    </View>
  );