SectionList - maintainVisibleContentPosition not working as expected.

Description

I am implementing a bidirectional chat. When prepending bubble messages to my sectionlist, the look-and-feel is not smoothy, the scroll position is auto-scrolled to the top. In other words, the new content inserted at the top is moving down the current visible content.

Testing on iPhone 11 pro, iOS 14.3

React Native version:

System:
OS: Windows 10 10.0.19041
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 8.07 GB / 15.85 GB
Binaries:
Node: 12.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
Visual Studio: Not Found
Languages:
Java: 1.8.0_221
Python: 3.7.4
npmPackages:
@react-native-community/cli: Not Found
react: ^16.13.1 => 16.14.0
react-native: ^0.63.4 => 0.63.4
react-native-windows: ^0.63.16 => 0.63.16

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a bidirectional SectionList with pagination.
2. Prepend 20 items to it when top reached.

const keyExtractor = useCallback(({ id }) => id, []);

const renderItem = useCallback(({ item, index }) => {
  const { content, date, mine } = item;

  const { onBubbleLongPress } = props;

  return (
    <View
      onLayout={(event) => {
        itemHeights.current[index] = event.nativeEvent.layout.height;
      }}
    >
      <Bubble
        content={content}
        date={date}
        mine={mine}
        onLongPress={() => onBubbleLongPress?.(item)}
      />
    </View>
  );
}, []);


const handleOnScroll = ({ nativeEvent }) => {
  if (isScrollCloseToTop(nativeEvent)) {
    props.onStartReached?.();
  }
};

const isScrollCloseToTop = ({ contentOffset, contentSize }) => {
   const currentYOffset = contentOffset.y;
   const diff = currentYOffset - lastYOffset.current;
   lastYOffset.current = contentOffset.y;
   // Close to top when scrolling to the top and distance is <= 30% content's height
   return diff < 0 && contentOffset.y <= 0.3 * contentSize.height;
};

return (
   <SectionList
      sections={sections}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      onScroll={handleOnScroll}
      maintainVisibleContentPosition={{
        minIndexForVisible: 0,
      }}
  />
);

      

Expected Results

New content not moving down the current visible content.

Snack, code example, screenshot, or link to a repository:

I am getting the same behaviour of this snack https://snack.expo.io/@rainliu123/flatlisttest

Note: not only for the first prepend. For all of them.

从 issue 中描述的 SectionList 复现开始，并运行链接的 Expo Snack。通过在开头添加 20 个项目并将 maintainVisibleContentPosition 设置为 minIndexForVisible: 0，复现双向列表，然后将观察到的滚动移动与预期结果进行比较：可见内容不会移动。该 issue 未指出源文件或测试。