Not entirely sure how to use this

Hi, I've found a bunch of these infinite scroll views but they only seem to give examples for ListView.

I am using KeyboardAwareScrollView or 'native-base' "Content" which is pretty much the same component. I would even consider using scroll view, but I'm pretty sure that listview will not work for what I'm trying to do.

<Container style={{flex: 2}}>
    <Content 
        renderScrollComponent={props => <InfiniteScrollView {...props} />}
        canLoadMore={!!(this.props.tv.page < this.props.page)}
        onLoadMoreAsync={this.loadNextPage.bind(this)}
        horizontal={false}
        refreshControl={this._renderRefreshControl()}>
        { this.props.page < this.props.total_pages
            ? (
                <Card style={styles.rightArrowCard}>
                    <CardItem style={styles.rightArrowFiller} header/>
                    <CardItem cardBody style={styles.rightArrowContainer}>
                        <Body style={styles.rightArrowBody}>
                            <Button onPress={this.rightPage} style={styles.rightArrowButton}>
                                <Icon style={styles.rightArrowIcon} type="Entypo" name="chevron-thin-right"/>   
                            </Button>
                        </Body>
                    </CardItem>
                        <CardItem style={styles.rightArrowFiller}/>
                </Card>
    )
        : null 
    }
    { 
        TV
        ? TV
        : null  
    }
    </Content>

load function which dispatches to redux to get data from next page.

loadNextPage = async () => {
        let page = this.props.page;
        page++;
        this.props.changeDiscoverPageTV(page);
    }

render control function

    _renderRefreshControl() {
        // Reload all data 
        return (
            <RefreshControl
             refreshing={false}
             onRefresh={this.loadNextPage.bind(this)}
          />
        );
     }

inside of the content component is

    const TV = Object.values(this.props.tv).map((series,i) => (
            <TouchableHighlight key={i} onPress={() => this.updateDisplayInfo(i)}>
                <Card style={styles.cardMain}>
                    <CardItem style={styles.cardImageContainer} cardBody>
                        <Image 
                            source={{uri: `https://image.tmdb.org/t/p/w300${series.poster_path}`}} 
                            style={{height:300 , flex: 1}}
                            resizeMode="contain"
                        />
                    </CardItem>
                </Card>
            </TouchableHighlight>
        ));

How exactly can I apply the InfiniteScrollView to this? The documentation is not very complete and does not even list the props you can use or examples for anything outside of ListView. Is it possible to use Infinite with anything other than ListView? I've tried implementing this with my current setup and it does not seem to work!

My issue is that it seems to continuously keep loading content no matter where I am on the page, which ends up messing things up a lot!

Basically all I am trying to do is to have it load additional content once so far on the right, and load more content each time the user gets to the end. For whatever reason, it keeps loading more and more data continuously without stopping regardless of wherever I am on the page, no matter if I use this InfiniteScrollView component or if I try to build my own!

expo / react-native-infinite-scroll-view

Not entirely sure how to use this #42