React Native Bidirectional Looping FlatList

Question

I am trying to create a sidebar component that is almost carousel like in its behavior. This will have fixed data with a maximum of 10 items. I am currently basing my implementation off of this answer. My requirements for this sidebar are as follows:

• Bidirectional
• Loops fixed data
• onPress of each item scrolls to the top

I have tried implementing this via react-native-snap-carousel but I was not able to get the correct scrolling behavior. I also tried using https://github.com/prateek3255/react-native-infinite-looping-scroll/ but the performance was very bad. I attempted to optimize the onScroll behavior but decided to scrap this and start from the original base I mentioned above.

My current InfiniteScroll Component:

import React, { Component } from "react";
import { FlatList } from "react-native";

export default class InfiniteScroll extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this._flatList = null;
    }

    onScrollToIndex = index => {
        this._flatList.scrollToIndex({ animated: true, index: index });
    };

    getWrappableData = data => {
        return [...data, ...data];
    };

    render = () => (
        <FlatList
            {...this.props}
            keyExtractor={index => index.toString()}
            ref={el => (this._flatList = el)}
            onLayout={({ nativeEvent }) => {
                const { width, height } = nativeEvent.layout;
                this.setState({
                    width,
                    height
                });
            }}
            onScroll={({ nativeEvent }) => {
                const { x } = nativeEvent.contentOffset;
                if (x === 730) {
                    this._flatList.scrollToOffset({ x: 0, animated: false });
                }
            }}
            data={this.getWrappableData(this.props.data)}
            pagingEnabled={true}
            scrollEnabled={false}
        />
    );
}

My current implementation looks like below and currently is able to scrolldown, but not forever, only one additional loop. My goal was to calculate how far has been scrolled and keep appending the same data over and over again.

The end goal is as follows, with the current active item being at the second index, so that when a user presses the top item, they can scroll up forever, or if they pick the third item, they could scroll down forever.