React Native Bidirectional Looping FlatList

18
March 19, 2019, at 11:30 PM

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.

READ ALSO
the manifest is fullfilled with errors

the manifest is fullfilled with errors

Android Manifest is fullfilled of errors, but I not accomplished any actionI tried to sync project, to rebuild it, and to avoid cache and restart, but it stil the same

46
how to create list of LiveData?

how to create list of LiveData?

I want create create list of livedata like this:

29
Android resource linking failed: id/null

Android resource linking failed: id/null

[Here's the image for my Activity][1]

39
com.google.android.gms:play-services-base is being requested by various other libraries

com.google.android.gms:play-services-base is being requested by various other libraries

I am working with ionic 4, everything was ok and i was able to build android apps until i had this error:

21