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

• Host: GitHub
• URL: https://github.com/magicismight/react-native-lazyload
• Owner: magicismight
• License: mit
• Archived: true
• Created: 2016-02-16T10:10:13.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-10-08T04:44:19.000Z (over 5 years ago)
• Last Synced: 2024-04-26T04:36:43.679Z (9 months ago)
• Language: JavaScript
• Size: 240 KB
• Stars: 413
• Watchers: 21
• Forks: 108
• Open Issues: 26
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-lazyload ★342 - lazyload for react native (Components / Backend)
• awesome-react-native - react-native-lazyload ★342 - lazyload for react native (Components / Backend)
• awesome-react-native - react-native-lazyload ★342 - lazyload for react native (Components / Backend)
• awesome-react-native-ui - react-native-lazyload ★177 - lazyload for react native (Components / Backend)
• awesome-react-native - react-native-lazyload ★342 - lazyload for react native (Components / Backend)

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