GestureWithInfiniteAnimation.tsx

import React, { useEffect } from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';
import Animated, {
  useDerivedValue,
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {
  GestureDetector,
  Gesture,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

const Size = 40;

export const SimpleAnimation = () => {
  const { width: windowWidth } = useWindowDimensions();
  const width = useSharedValue(20);
  const rect = useDerivedValue(() => {
    return { x: 0, y: 10, width: width.value, height: Size };
  });
  useEffect(() => {
    width.value = withRepeat(withTiming(windowWidth, { duration: 1000 }), -1);
  }, []);

  const stylez = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      backgroundColor: 'red',
      left: rect.value.x,
      top: rect.value.y,
      width: rect.value.width,
      height: rect.value.height,
    };
  });

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

const BgColor = '#EC795A';

export const SpringBackTouchAnimation = () => {
  const { width } = useWindowDimensions();

  const startX = width / 2;
  const startY = 2 * Size;
  const centerX = useSharedValue(startX);
  const centerY = useSharedValue(startY);

  const rectCenter = useDerivedValue(() => {
    return { x: centerX.value, y: centerY.value };
  });

  const gesture = Gesture.Pan()
    .onChange((e) => {
      centerX.value += e.changeX;
      centerY.value += e.changeY;
    })
    .onEnd((e) => {
      centerX.value = withSpring(startX);
      centerY.value = withSpring(startY);
    });

  const stylez = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      backgroundColor: BgColor,
      left: rectCenter.value.x - Size / 2,
      top: rectCenter.value.y - Size / 2,
      width: Size,
      height: Size,
      borderRadius: Size / 2,
    };
  });

  return (
    <GestureDetector gesture={gesture}>
      <View style={styles.canvas}>
        <Animated.View style={stylez} />
      </View>
    </GestureDetector>
  );
};

export default function App() {
  return (
    <GestureHandlerRootView>
      <View style={styles.container}>
        <SimpleAnimation />
        <SpringBackTouchAnimation />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 150,
    paddingVertical: 20,
    paddingBottom: 80,
  },
  canvas: {
    height: 40,
    width: '100%',
    backgroundColor: '#FEFEFE',
  },
});