react-native-scroll-lazy

react-native-scroll-lazy

react-native-scroll-lazy is a very high-performance large list contain images for React-Native

Installation

npm install react-native-scroll-lazy or yarn add react-native-scroll-lazy

Components

Component	Description
LazyloadScrollView	A lazyload container component based on ScrollView
LazyloadView	Based on View component. This component`s content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView which has the same name prop as this component`s host prop.

Usage

1. Using LazyloadScrollView instead of ScrollView, and specify a unique id for name prop.
2. Layout the views which will be lazyloaded by using LazyloadView instead of View.
3. Specify host prop for every LazyloadView, the host prop should be same as outer LazyloadScrollView component`s name prop.
4. Using eventShowView in LazyloadView to listening event change show/hide view.
5. Using eventChangeHeight in LazyloadView to get init height view.

Important

Should not change the height of the LazyloadView after it has rendered, this will lead to lazy loading false

Example

import React, { Component } from 'react-native';
 
import { LazyloadScrollView, LazyloadView } from 'react-native-scroll-lazy';
 
const Data = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
 
class LazyloadScrollViewExample extends Component{
    render() {
        return (
        <LazyloadScrollView style={{ flex: 1 }} name="lazyload-list">
            <View style={{ flexDirection: 'row' }}>
              <View flex={1}>
                {Data.map((file, i) =>
                  (<LazyloadView
                    eventShowView={(is_show, id) => {/* TODO */}}
                    eventChangeHeight={(height)=>{ /* TODO */}}
                    key={i}
                    host="lazyload-list"
                    style={{ height: 200, backgroundColor: '#99ccff', marginHorizontal: 5, marginTop: 5, borderRadius: 5 }}
                  >
                    {/* children*/}
                  </LazyloadView>))
                }
              </View>
              <View flex={1}>
                {Data.map((file, i) =>
                  (<LazyloadView
                    eventShowView={(is_show, id) => {/* TODO */}}
                    eventChangeHeight={(height)=>{ /* TODO */}}
                    key={i}
                    host="lazyload-list"
                    style={{ height: 200, backgroundColor: '#99ccff', marginHorizontal: 5, marginTop: 5, borderRadius: 5 }}
                  >
                    {/* children*/}
                  </LazyloadView>))
                }
              </View>
            </View>
        </LazyloadScrollView>);
    }
}