import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';

function EmptyExample() {
  const [w, sW] = useState(0);

  const scrollHandler = useAnimatedScrollHandler({
    onBeginDrag() {
      console.log('start');
    },
    onMomentumEnd() {
      console.log('end');
    },
  });

  return (
    <View
      style={{ flex: 1 }}
      onLayout={(evt) => sW(evt.nativeEvent.layout.width)}>
      <Animated.ScrollView
        onScroll={scrollHandler}
        horizontal
        snapToInterval={w}
        decelerationRate="fast">
        {Array.from({ length: 20 })
          .fill(0)
          .map((_, i) => {
            return (
              <View key={i} style={{ width: w }}>
                <Text>{i}</Text>
              </View>
            );
          })}
      </Animated.ScrollView>
    </View>
  );
}

export default EmptyExample;