PagerReaction.tsx

import React from 'react';
import Animated, {
  useAnimatedGestureHandler,
  useSharedValue,
  useAnimatedStyle,
  useDerivedValue,
} from 'react-native-reanimated';
import { View, Dimensions } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

export default function App() {
  const translateX = useSharedValue(0);

  function onTranslateXChange(value: number) {
    'worklet';

    translateX.value = value;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Pager onTranslateXChange={onTranslateXChange} />

      <View style={{ height: 60 }} />

      <MimicPager translateX={translateX} />
    </View>
  );
}

type PagerProps = {
  onTranslateXChange: (nextValue: number) => void;
};

function Pager({ onTranslateXChange }: PagerProps) {
  const offsetX = useSharedValue(0);
  const pagerX = useSharedValue(0);

  const actualTranslateX = useDerivedValue(() => {
    const nextValue = offsetX.value + pagerX.value;

    onTranslateXChange(nextValue);

    return nextValue;
  });

  const styles = useAnimatedStyle(() => ({
    flexDirection: 'row',
    transform: [{ translateX: actualTranslateX.value }],
  }));

  const handler = useAnimatedGestureHandler({
    onActive: (evt) => {
      pagerX.value = evt.translationX;
    },

    onEnd: () => {
      offsetX.value += pagerX.value;
      pagerX.value = 0;
    },
  });

  return (
    <PanGestureHandler onGestureEvent={handler}>
      <Animated.View style={styles}>{renderPages()}</Animated.View>
    </PanGestureHandler>
  );
}

type MimicPagerProps = {
  translateX: Animated.SharedValue<number>;
};

function MimicPager({ translateX }: MimicPagerProps) {
  const styles = useAnimatedStyle(() => ({
    flexDirection: 'row',
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <Animated.View style={styles}>{renderPages()}</Animated.View>
  );
}

const colors = ['red', 'green', 'blue'];

function Page({ color }: { color: string }) {
  return (
    <View
      style={{
        backgroundColor: color,
        width: Dimensions.get('window').width,
        height: 200,
      }}
    />
  );
}

function renderPages() {
  return colors.map((item) => <Page key={item} color={item} />);
}