@sendbird/react-native-scrollview-enhancer NPM

@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

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.

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

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

Customization

maintainVisibleContentPosition

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>
  );
};

onStartReached

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>;
};

Utility functions

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);

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.