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:
Download Details:
Author: kubilaysalih
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/kubilaysalih/react-native-visibility-aware-list
License: MIT
