This package is no longer maintained, as FlatList solves our needs.
react-native-lazyload-deux
A lazyload components suit for React Native.
Forked from react-native-lazyload as it seems to be no longer maintained.
Install
npm install react-native-lazyload-deux
Usage
LazyloadScrollView
A lazyload container component based on ScrollView
Props
- ScrollView.
name
: Unique name of scroll view.renderDistance
: Offset of pixels before to start rendering.recycle
:recycleDistance
:horizontal
:
Functions
refresh
: Force to trigger an update. Useful after nagivation pop/push where the memory may have been released.
Example
;; const views = title: 'A view' image: 'https://example.org/1.png' title: 'Another view' image: 'https://example.org/2.png' ; { return views; } { return <LazyloadScrollView name="unique-lazyload-list-name" > this </LazyloadScrollView> ; }
LazyloadListView
A lazyload container component based on ListView
. Won't render LazyloadView
and LazyloadImage
until they are visible on screen.
Props
Functions
refresh
: Force to trigger an update. Useful after nagivation pop/push where the memory may have been released.
Example
;; const views = title: 'A view' image: 'https://example.org/1.png' title: 'Another view' image: 'https://example.org/2.png' ; { return views; } { return <LazyloadListView name="unique-lazyload-list-name" > this </LazyloadListView> ; }
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.
Props
- View.
host
: The unique name of it's containeronVisibilityChange
: Callback for when the view is visible.animation
: Lazyload animation
Example
See either example above.
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.
Props
- Image.
host
: The unique name of it's containeranimation
: Lazyload animation
Example
See either example above.
Complete example
Clone this repository from Github and cd to 'Example' directory then run npm install
.