Jumping not solved on Android when scrolling up

[lc3t35]

First I would like to thank you for this publication with flat-list-mvcp and effort to solve the jumping problem on Android. In my case, after setting the maintainVisibleContentPosition, the jumping problem disappeared on iOS but still present on Android. Here is what happens on Android when scrolling up (scrolling down no problem) , flashing and jumping :

I share some code snippets here so you can check if I made a mistake using FlatList :

import { FlatList } from 'react-native-bidirectional-infinite-scroll';

const viewConfigRef = useRef({
    itemVisiblePercentThreshold: 90,
    minimumViewTime: 200,
  });

  <FlatList
    data={moments}
    keyExtractor={keyExtractor}
    renderItem={renderMomentItem}
    horizontal={false}
    numColumns={1}
    viewabilityConfig={viewConfigRef.current}
    onViewableItemsChanged={onViewRef.current}
    ref={setRef}
    onScrollToIndexFailed={onScrollToIndexFailedMoments}
    onEndReached={loadMoreOlderMessages}
    onStartReached={loadMoreRecentMessages}
    onEndReachedThreshold={0.4}
    scrollEventThrottle={20}
    bounces={false}
    windowSize={5}   // tried without windowSize, with 5 or 10 same behaviour
    showsVerticalScrollIndicator={false}
    ListFooterComponent={
      momentLoading ? <ActivityIndicator size='large' /> : renderFooter
    }
    maintainVisibleContentPosition={{
      autoscrollToTopThreshold: undefined,
      minIndexForVisible: 0,
    }}
  />

[vishalnarkhede]

@lc3t35 So I think its the windowSize that needs to be modified here. Default value of windowSize is 21. You should keep it higher than 21, if you want to amend more than 10 results at a time.

Please let me know if that fixes the issue. I should also mention it in Readme somewhere :)

[lc3t35]

@vishalnarkhede could you please solve https://github.com/GetStream/flat-list-mvcp/issues/13 which prevents me to test this issue ?

[vishalnarkhede]

https://github.com/GetStream/flat-list-mvcp/issues/13#issuecomment-812925583

[vishalnarkhede]

@lc3t35 Is the scroll jumping issue also resolved for you after upgrading to @stream-io/[email protected] (or beta-1)?

[lc3t35]

Still the same with [email protected] and windowSize = 22

[vishalnarkhede]

@lc3t35 ok let me try to setup an example with similar layout as your app!! I will get back to you

[vishalnarkhede]

@lc3t35 Could you share the keyExtractor function?

[lc3t35]

const keyExtractor = (item) => item._id;

[vishalnarkhede]

_id ... Is it unique for every item? Thats really cruicial

[vishalnarkhede]

Please check the example on this branch - https://github.com/GetStream/react-native-bidirectional-infinite-scroll/tree/vishal/activity-example/example.

I have tried to generate the similar layout and config as your app!!

[lc3t35]

_id ... Is it unique for every item? Thats really cruicial

Yes I've checked that _id are unique for every item.

[lc3t35]

Can't build example on android : https://github.com/GetStream/react-native-bidirectional-infinite-scroll/issues/11 (works fine on ios) -> solved This example is not exactly the same case :

• only images (I have also video)
• images have all the same size (mine don't)
• ref is used to stop videos when outside of view

[vishalnarkhede]

Is it possible for you to share the app codebase with me? I am happy to help figure out the issue!! Or if you can setup independent code example ... where you can replicate this issue, that will work as well.

[Jojr]

• only images (I have also video)

I'm facing the same problem with videos only.

@stream-io/flat-list-mvcp": "^0.10.1 windowSize={60} // The high number I know, but it avoided the jumping