Unlock Scroll Viewport Awareness With react-native-visibility-aware-list

Description:

react-native-visibility-aware-list provides visibility tracking for React Native FlatList items. It lets developers know when list items enter or leave the viewport, enabling powerful use cases like lazy loading, infinite scroll, and more.

Features:

  • The component is designed for optimal performance. It runs seamlessly at a minimum of 60 frames per second, ensuring a smooth and lag-free experience for users.
  • With VisibilityAwareFlatList, there’s no more guessing. Developers can precisely determine which items are currently visible within the viewport.
  • Not satisfied with the default settings? Adjust the percentage threshold to trigger visibility changes based on your specific needs.
  • Tackling nested viewports becomes a cakewalk, thanks to the component’s context-based architecture.
  • If you’ve got a custom FlatList implementation, don’t worry. VisibilityAwareFlatList seamlessly extends to support it, making it a versatile tool in your React Native toolkit.

How to use it:

1. Install and import the react-native-visibility-aware-list.

# Yarn
$ yarn add react-native-visibility-aware-list
# NPM
$ npm i react-native-visibility-aware-list
import VisibilityAwareFlatList from 'react-native-visibility-aware-list';

2. Basic usage:

<VisibilityAwareFlatList
  onViewportItemsChanged={(items) => console.log(items)}
  viewportItemsChangePercentage={0.5}
  // more FlatList props
/>

3. Available component props.

onViewportItemsChanged?: (items: VisibleItem[]) => void;
viewportItemsChangePercentage?: number;
triggerOnLayoutChange?: boolean;
nestedViewportKey?: string;
as?: any;

Preview:

Unlock Scroll Viewport Awareness With react-native-visibility-aware-list

Add Comment