Как сделать бесконечную анимацию в React Native? ⇐ Javascript

[Anonymous]

Мои карточки работают справа налево с красивой анимацией. Но когда анимация перематывается, позиции карточек перематываются и бесконечного анимационного изображения нет. Я хочу, чтобы первая карта снова входила, когда последняя карта покидает экран и наступает бесконечность. как мне это сделать? Как вы можете видеть на гифке, анимация заканчивается, и я хочу, чтобы последний элемент вышел из левой части экрана, а первый элемент появился снова.


import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet, Text, View, Dimensions, Image } from 'react-native';

import anonim_icon from "../img/anonim.png";

const cardData = [
{ id: 0, title: "Feeling Happy" },
{ id: 1, title: "Feeling Calm" },
{ id: 2, title: "Feeling Angry" },
{ id: 3, title: "Feeling Sad" },
];

const App = () => {
const translateX = useRef(new Animated.Value(width)).current;

const Cards = ({ item, index }) => {
return (


{item.title}

);
};

useEffect(() => {
const startAnimation = () => {
translateX.setValue(width); // Animasyon başlangıç pozisyonu (sağ dışı)
Animated.loop(
Animated.sequence([
Animated.timing(translateX, {
toValue: -width * cardData.length, // Sol dışına çıkış
duration: 17000, // Hareket süresi
useNativeDriver: true,
}),
]),
).start();
};

startAnimation();
}, [translateX, width]);

return (



{cardData.map((item, index) => (

))}


);
};

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#000",
},
cards_con: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
backgroundColor: "#323232",
height: height / 13,
borderRadius: 10,
marginHorizontal: 10,
padding: 10,
width: width / 1.7,
},
cards_ico: {
width: 30,
height: 30,
borderRadius: 10,
},
card_title: {
color: "#FFFFFF",
marginLeft: 10,
fontSize: 16,
},
});

export default App;


Подробнее здесь: https://stackoverflow.com/questions/793 ... act-native