react-native-lazyload
v1.1.0
Published
lazyload for react native
Downloads
972
Maintainers
Readme
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.
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 (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="lazyload-list"
>
{list.map((file, i) => <View
key={i}
style={styles.view}
>
<LazyloadView
host="lazyload-list"
style={styles.file}
>
<View style={styles.id}>
<Text style={styles.idText}>{file.id}</Text>
</View>
<View style={styles.detail}>
<Text style={styles.name}>{file.first_name} {file.last_name}</Text>
<Text><Text style={styles.title}>email: </Text><Text style={styles.email}>{file.email}</Text></Text>
<Text style={styles.ip}><Text style={styles.title}>last visit ip: </Text>{file.ip_address}</Text>
</View>
</LazyloadView>
<View style={styles.avatar}>
<LazyloadImage
host="lazyload-list"
style={styles.avatarImage}
source={file.avatar}
/>
</View>
</View>)}
</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
.