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.

Create a bidirectional SectionList with pagination.
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.

My current workaround: #25239 (comment)

@victoriomolina

Thanks for the issue @victoriomolina the snack makes the issue clear. I only notice the bug happening on Android. On iOS, the scroll position is maintained.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Still an issue

I'm running into this problem right now. Here's a reproducible example: https://snack.expo.dev/@damon_bauer/arrogant-green-bananas

When the top of the list is reached I'm calling onStartReached which prepends data to the sections passed to SectionList. This causes the SectionList to jump to the top of list, which fires onStartReached again... and it's an endless loop.

This happens on both iOS and Android.

Also having this issue. I guess RN isn't a high priority seeing how old this issue is and still there's no solution?

Also facing this issue.
Is there any workaround for this?

I'm encountering the same issue on both Android and iOS. I attempted to use a sticky header with FlatList as an alternative, but it's proving to be too frustrating with dynamic data. Has anyone managed to find a more effective solution or workaround?

I'm facing the exact same issue.

facing the same issue too

Navigation Menu

Repository navigation

SectionList - maintainVisibleContentPosition not working as expected. #30775

Description

React Native version:

Steps To Reproduce

Expected Results

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SectionList - maintainVisibleContentPosition not working as expected. #30775

Description

Description

React Native version:

Steps To Reproduce

Expected Results

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

Activity

victoriomolina commented on Jan 22, 2021

safaiyeh commented on Jan 24, 2021

github-actions commented on Oct 23, 2023

SimpleCreations commented on Oct 23, 2023

damonbauer commented on Dec 6, 2023

erikostling commented on Dec 12, 2023

yashsongara101 commented on Jan 5, 2024

hewad-mubariz commented on Jan 19, 2024

numberinho commented on Jan 22, 2024

GabrielMachado11 commented on Jan 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions