@sendbird/react-native-scrollview-enhancer

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

Installation

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

| React-Native version | react-native-scrollview-enhancer version |
| -------------------- | ---------------------------------------- |
| >=0.64 | 0.2.x |
| <=0.63 | 0.1.2 |

Usage

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

`tsx
import { FlatList, ScrollView, SectionList } from '@sendbird/react-native-scrollview-enhancer';

const App = () => {
return (
inverted
data={messages}
renderItem={renderMessageItem}
onEndReached={onEndReached}
onStartReached={onStartReached}
/>
);
};
`

Customization

$3

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

`tsx
import { ScrollView } from 'react-native';
import { ScrollViewEnhancerView } from '@sendbird/react-native-scrollview-enhancer';

const App = () => {
return (



);
};
`

$3

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

`tsx
import { View, FlatList } from 'react-native';
import { useBiDirectional } from '@sendbird/react-native-scrollview-enhancer';

const App = () => {
const { renderScrollView } = useBiDirectional(FlatList, props, ref);
return {renderScrollView()};
};
`

$3

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

`tsx
import { ScrollView, FlatList } from 'react-native';
import { enhanceScrollView, enhanceScrollViewWithBidirectional } from '@sendbird/react-native-scrollview-enhancer';

const EnhancedScrollView = enhanceScrollView(ScrollView);
const BiDirectionalFlatList = enhanceScrollViewWithBidirectional(FlatList);
``

Limitations

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.

Related PRs

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

License

MIT

Made with create-react-native-library