react-native-lazyload
A `lazyload` components suit for React Native.
Install
npm install react-native-lazyload
Components
Component | Description |
---|---|
LazyloadScrollView | A lazyload container component based on ScrollView |
LazyloadListView | A lazyload container component based on ListView |
LazyloadView | Based on View component. This component`s content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView or LazyloadListView which has the same name prop as this component`s host prop. |
LazyloadImage | Based on Image component. The image content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView or LazyloadListView which has the same name prop as this component`s host prop. |
Usage
LazyloadScrollView
- Using
LazyloadScrollView
instead ofScrollView
, and specify a unique id forname
prop. - Layout the views or images which will be lazyloaded by using
LazyloadView
andLazyloadImage
instead ofView
orImage
. - Specify
host
prop for everyLazyloadView
andLazyloadImage
, thehost
prop should be same as outerLazyloadScrollView
component`s name prop.
; ; const list = ...list data here; // many rows { return <LazyloadScrollView style=stylescontainer contentContainerStyle=stylescontent name="lazyload-list" > list </LazyloadScrollView> ; }
LazyloadListView
Same as ListView. But it won`t render LazyloadView
and LazyloadImage
inside it, util they are scrolled into sight.
Additional Methods
refresh - Force to trigger an update. Useful after nagivation pop/push where the memory may have been release.
Additional Props
Components that extend LazyloadView can accept a prop (function) to be called when the item's visibility changes.
onVisibilityChange - An optional function to be called with the new visibility, ref, and props
Example:
<LazyloadView onVisibilityChange={ this.handleItemVisibility }>
...
</LazyloadView>
...
handleItemVisibility(visibility, ref, props) {
console.log('visibility, ref, props', visibility, ref, props);
}
Run Example
Clone this repository from Github and cd to 'Example' directory then run npm install
.