react-native-visibility-aware-list supplies presence monitoring for React Indigenous FlatList products. It allows programmers recognize when checklist products get in or leave the viewport, allowing effective usage instances like careless loading, boundless scroll, and also much more.
Functions:
- The part is made for optimum efficiency. It runs perfectly at a minimum of 60 structures per 2nd, making certain a smooth and also lag-free experience for customers.
- With VisibilityAwareFlatList, there disappears presuming. Designers can exactly establish which products are presently noticeable within the viewport.
- Not pleased with the default setups? Readjust the percent limit to set off presence adjustments based upon your certain requirements.
- Dealing with embedded viewports comes to be a cinch, many thanks to the part’s context-based style.
- If you have actually obtained a customized FlatList execution, do not fret. VisibilityAwareFlatList perfectly includes sustain it, making it a flexible device in your React Indigenous toolkit.
Just how to utilize it:
1. Mount and also import the react-native-visibility-aware-list.
# Thread .$ thread include react-native-visibility-aware-list . . # NPM . $ npm i react-native-visibility-aware-list
import VisibilityAwareFlatList from 'react-native-visibility-aware-list';
2. Standard use:
<< VisibilityAwareFlatList
. onViewportItemsChanged= {( products )> => console.log( products)}
. viewportItemsChangePercentage= {0.5}
.// even more FlatList props
./ >
3. Readily available part props.
onViewportItemsChanged?: (products: VisibleItem[]) => > gap; . viewportItemsChangePercentage?: number; . triggerOnLayoutChange?: boolean; . nestedViewportKey?: string; . as?: any kind of;
Sneak Peek:
Download And Install Information:
Writer: kubilaysalih
Real-time Demonstration: Sight The Demonstration
Download And Install Web Link: Download And Install The Resource Code
Authorities Internet Site: https://github.com/kubilaysalih/react-native-visibility-aware-list
Certificate: MIT
