React-Native Start over when end reached of Flatlist

Question

So I'm planning on creating a introduction page for my app, so i want the user to smoothly loop through the three elements of the list meaning, when he reaches the third element it just starts over at the first and not reach the end of the list

import React, {useState} from "react";
import {StyleSheet, Text, View, Button, Alert, TouchableOpacity, FlatList, TouchableWithoutFeedback
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { Dimensions } from 'react-native';

const window = Dimensions.get('window')

export default function App(){


    const [isPressed, setIsPressed] = useState(false);
    const handleButtonPress = () => {
        setIsPressed(true);

    };

    const handleButtonRelease = () => {
        setIsPressed(false);
    };


    const data = [
        { id: '1', text: 'Element 1' },
        { id: '2', text: 'Element 2' },
        { id: '3', text: 'Element 3' },
    ];

    const renderItem = ({ item }) => (
        <View style={styles.item}>
            <Text style={styles.text}>{item.text}</Text>
        </View>
    );


    return (
        <View style={styles.container}>
                  <LinearGradient colors={["#29173D", "#170E28", "#010310"]} start={[0.1, 0.1]} style={styles.linearGradient}>

                      <TouchableWithoutFeedback onPressIn={() => handleButtonPress()} onPressOut={handleButtonRelease} activeOpacity={0.7}>
                          <View style={[styles.buttonParent, isPressed && styles.pressedButton]}>
                              <LinearGradient
                                  colors={['#5be9aa', '#09949d']}
                                  style={styles.buttonGrad}>
                                  <Text style={styles.buttonText}>My Button</Text>
                              </LinearGradient>
                          </View>
                      </TouchableWithoutFeedback>

                      <View>
                          <FlatList
                              data={data}
                              renderItem={renderItem}
                              keyExtractor={(item) => item.id}
                              horizontal={true}
                              showsHorizontalScrollIndicator={false}
                              showsVerticalScrollIndicator={false}
                              pagingEnabled={true}
                          />
                      </View>

                </LinearGradient>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        justifyContent: "center",
    },
    linearGradient: {
        width: '100%',
        height: '100%',
        opacity: 0.95,
        justifyContent: 'center',
    },


    buttonGrad: {
        height: window.height*0.08,
        width: window.width*0.5,
        borderRadius: 10,
        position: 'absolute',
        justifyContent: 'center',
        bottom: 5,
        alignSelf: 'center',
    },

    buttonParent: {
        height: window.height*0.08,
        width: window.width*0.5,
        borderRadius: 10,
        top: window.height*0.35,
        backgroundColor: '#024e51',
        alignSelf: 'center',
        justifyContent: 'center',

    },

    buttonText: {
        color: 'white',
        fontSize: 14,
        alignSelf: 'center',
    },

    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        borderRadius: 10,
        width: window.width,
        flex: 1
    },

    pressedButton: {
        opacity: 0.5,
    },

});

I found a react native library something with "carousel" idk the exact name anymore, but i would prefer not using too many libraries

Answer 1

Use onEndReached to mutate the data array for FlatList.

Called once when the scroll position gets within within onEndReachedThreshold from the logical end of the list