Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/magicismight/react-native-lazyload

lazyload for react native
https://github.com/magicismight/react-native-lazyload

Last synced: about 1 month ago
JSON representation

lazyload for react native

Lists

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



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` component`s 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 (

            

                {list.map((file, i) => 

                    

                        

                            {file.id}

                        

                        

                            {file.first_name} {file.last_name}

                            email: {file.email}

                            last visit ip: {file.ip_address}

                        

                    

                    

                        

                    

                )}

            

        );

    }

}



```



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



```



...



...



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