Scroll content

[victorzimnikov]

hi!
please help me!
how do I scroll the content and then close it?

1.mov

const ITEMS = [{ id: 1 }, { id: 2 }];

const ITEMS_REFS = ITEMS.map(() => createRef<ScrollView>());

export function Slider({}: Props) {
  const x = useSharedValue(0);

  const gestureHandler = useAnimatedGestureHandler<
    PanGestureHandlerGestureEvent,
    { startY: number }
  >(
    {
      onStart: (_, ctx) => {
        ctx.startY = x.value;
      },
      onActive: (event, ctx) => {
        if (event.translationY >= 0) {
          x.value = ctx.startY + event.translationY;
        }
      },
      onEnd: (event) => {
        const toValue = event.translationY > 100 ? DEVICE_HEIGHT : 0;

        x.value = withTiming(toValue);
      },
    },
    [],
  );

  const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateY: x.value }] }));

  return (
    <PanGestureHandler simultaneousHandlers={ITEMS_REFS} onGestureEvent={gestureHandler}>
      <Animated.View style={[{ flex: 1 }, animatedStyle]}>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          style={{ flex: 1, backgroundColor: "yellow" }}
        >
          {ITEMS.map((z, idx) => (
            <SliderItem key={z.id} scrollViewRef={ITEMS_REFS[idx]} />
          ))}
        </ScrollView>
      </Animated.View>
    </PanGestureHandler>
  );
}

export function SliderItem({scrollViewRef}: Props) {
  return (
    <Animated.View style={{ width: DEVICE_WIDTH, alignItems: "center", flex: 1, paddingTop: 100 }}>
      <View
        style={[
          {
            flex: 1,
            width: DEVICE_WIDTH - 16,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
            backgroundColor: ColorPalette.White,
          },
        ]}
      >
        <ScrollView ref={scrollViewRef}>
          <Typography style={{marginBottom: 500}}>sdfsdfsdfds</Typography>
          <Typography>sdfsdfsdfds</Typography>
        </ScrollView>
      </View>
    </Animated.View>
  );
}