react-native-lazyload-components

$3

------------------------

A \lazyload\ components suit for React Native.

#### Install

![npm
package](https://nodei.co/npm/react-native-lazyload-components/)

#### 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

1. Using LazyloadScrollView instead of ScrollView, and specify a unique id for name prop.
2. Layout the views or images which will be lazyloaded by using LazyloadView and LazyloadImage instead of View or Image.
3. Specify host prop for every LazyloadView and LazyloadImage, the host prop should be same as outer LazyloadScrollView components name prop.

``js
import React, {
Component
} from 'react-native';

import {
LazyloadScrollView,
LazyloadView,
LazyloadImage
} from 'react-native-lazyload';

const list = [...list data here]; // many rows

class LazyloadScrollViewExample extends Component{
render() {
return (
style={styles.container}
contentContainerStyle={styles.content}
name="lazyload-list"
>
{list.map((file, i) => key={i}
style={styles.view}
>
host="lazyload-list"
style={styles.file}
>

{file.id}


{file.first_name} {file.last_name}
email: {file.email}
last visit ip: {file.ip_address}



host="lazyload-list"
style={styles.avatarImage}
source={file.avatar}
/>

)}

);
}
}

`

##### LazyloadListView

Same as ListView. But it won\t render LazyloadView and LazyloadImage inside it, util they are scrolled into sight.

$3

refresh - Force to trigger an update. Useful after nagivation pop/push where the memory may have been release.

$3

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:

``


...


...

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`.