Skip to content
This repository has been archived by the owner on Aug 13, 2024. It is now read-only.

A utility package enabling onStartReached & maintainVisibleContentPosition in pre-0.72 react-native ScrollView.

License

Notifications You must be signed in to change notification settings

sendbird/react-native-scrollview-enhancer

Repository files navigation

@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.

Related PRs

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

License

MIT


Made with create-react-native-library