Scrolls to Top on Swiping Up After Reaching End

[abbasshah17]

Describe the bug Scroll to bottom until all the content is loaded i.e. hasMore returns false, swipe once more the InfiniteScroller scrolls to (close to) top. Only happens when there is more than 100 items in the nested FlatList.

This issue only occurs on iOS.

To Reproduce I can't provide complete code right now but here's some part of it, which I think should show the issue recurring.

<InfiniteScroll
     loadMore={loadMore}
     hasMore={hasMoreItems}
     loader={loader}>

    {list ? null : <View style={{marginTop: 30}}><ActivityIndicator key={0} color='ffbf3f' size='large'/></View>}

    <FlatList contentContainerStyle={{ flexGrow: 1 }} 
        data={list} 
        renderItem={({ item, index }) => (
        <TouchableOpacity  onClick={ () => this.props.onItemClick(item, index)}>
        <View style={{ flex: 1, margin: Math.pow(numOfColumns, 2), alignItems:'center' }} >
        <Image 
            style={{height: imageItemHeight, width: imageItemWidth,justifyContent: 'center',alignItems: 'center'}} 
            defaultSource={placeholder} 
            source={{uri: item.imageLink}} />

        <Text 
            numberOfLines={1} 
            style={{fontSize: contentTextProperties.fontSize, fontfamily: getRegularFont(), color: '#818283', width: imageItemWidth, textAlign: 'center', marginTop: 5, fontWeight: "500"}}>
            {item.name}
        </Text>)}

        numColumns={numOfColumns}
        key={numOfColumns}
        keyExtractor={(item, index) => index.toString()}/>
</InfiniteScroll>

Expected behavior The scrolled position should not have changed on an attempt to further scroll than the available items.

Screenshots Video of the issue

Device:

• OS: [iOS]
• iPhone XR Simulator
• Browser [safari]
• Version [iOS 12.1]

[AviKKi]

I had a similar issue but for different kind of scenario, I still haven't figured out how to fix it, but if you add below snippet in your html page, it'll override scroll behavior to prevent scroll to top.

Use this monkey patch till a good solution is found.

const __scrollTo=window.scrollTo
window.scrollTo=(x,y)=>{
	if(x!==0 && y!==0)
		__scrollTo(x,y)
}

[eccentricexit]

Thanks for this @AviKKi. Really helped