A utility package that enables the use of onStartReached and maintainVisibleContentPosition features in ScrollView components in react-native versions prior to 0.72.

npm install @sendbird/react-native-scrollview-enhancer

You can use a scroll view components with onStartReached and maintainVisibleContentPosition applied as follows.

import { FlatList, ScrollView, SectionList } from '@sendbird/react-native-scrollview-enhancer'; const App = () => { return ( <FlatList inverted data={messages} renderItem={renderMessageItem} onEndReached={onEndReached} onStartReached={onStartReached} /> ); };

The maintainVisibleContentPosition feature can be used by wrapping the ScrollView component (ScrollView, FlatList, SectionList, VirtualizedList) that you want to use with the ScrollViewEnhancerView component.

import { ScrollView } from 'react-native'; import { ScrollViewEnhancerView } from '@sendbird/react-native-scrollview-enhancer'; const App = () => { return ( <ScrollViewEnhancerView> <ScrollView /> </ScrollViewEnhancerView> ); };

This package provides a useBidirectional hook that adds onStartReached to the ScrollView.

import { View, FlatList } from 'react-native'; import { useBiDirectional } from '@sendbird/react-native-scrollview-enhancer'; const App = () => { const { renderScrollView } = useBiDirectional(FlatList, props, ref); return <View>{renderScrollView()}</View>; };

This package provides the following utility functions to make it easier to use:

• enhanceScrollView: adds maintainVisibleContentPosition feature to the ScrollView component
• enhanceScrollViewWithBidirectional: adds maintainVisibleContentPosition and onStartReached features to the ScrollView component

import { ScrollView, FlatList } from 'react-native'; import { enhanceScrollView, enhanceScrollViewWithBidirectional } from '@sendbird/react-native-scrollview-enhancer'; const EnhancedScrollView = enhanceScrollView(ScrollView); const BiDirectionalFlatList = enhanceScrollViewWithBidirectional(FlatList);

It is recommended to use stable features provided in versions 0.72 and above.

• Since updates occur in the middle of React-Native's update cycle rather than the Android view and VirtualizedList update cycle, some bugs may be caused by delayed updates.
• Fabric(new architecture of React-Native) is not supported.
• Horizontal maintainVisibleContentPosition is not supported.

You can find the related work for these features in the following PR.

• #35993 Fix VirtualizedList with maintainVisibleContentPosition
• #35321 Add onStartReached and onStartReachedThreshold to VirtualizedList
• #35049 Add maintainVisibleContentPosition support on Android for legacy renderer
• #35994 Add fabric support for maintainVisibleContentPosition on Android
• #36095 Add fabric support for maintainVisibleContentPosition on iOS

MIT

Made with create-react-native-library