magicismight · khemmapon · Aug 24, 2018 · Nov 19, 2018 · Aug 8, 2019
diff --git a/Example/LazyloadListExample.js b/Example/LazyloadListExample.js
@@ -1,137 +1,143 @@
-import React, {
-    Component
-} from 'react';
+import React, { Component } from "react";
 
-import {
-    AppRegistry,
-    StyleSheet,
-    Text,
-    View,
-    ListView
-} from 'react-native';
+import { AppRegistry, StyleSheet, Text, View } from "react-native";
+import ListView from "deprecated-react-native-listview";
+import { LazyloadListView, LazyloadView } from "react-native-lazyload";
 
-import {
-    LazyloadListView,
-    LazyloadView
-} from 'react-native-lazyload';
-
-import data from './MOCK_DATA.json';
+import data from "./MOCK_DATA.json";
 class LazyloadListExample extends Component {
     constructor() {
         super(...arguments);
-        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+        let ds = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1 !== r2,
+        });
         this.state = {
-            dataSource: ds.cloneWithRows(data)
+            dataSource: ds.cloneWithRows(data),
         };
     }
 
-    renderRow = (file) => {
-        return <View
-            style={styles.view}
-        >
-            <LazyloadView
-                host="listExample"
-                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>
-                <View style={styles.gender}>
-                    <Text style={[styles.genderText, file.gender === 'Male' ? styles.male : styles.female]}>{file.gender}</Text>
-                </View>
-            </LazyloadView>
-        </View>;
+    renderRow = file => {
+        return (
+            <View style={styles.view}>
+                <LazyloadView host="listExample" 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>
+                    <View style={styles.gender}>
+                        <Text
+                            style={[
+                                styles.genderText,
+                                file.gender === "Male"
+                                    ? styles.male
+                                    : styles.female,
+                            ]}>
+                            {file.gender}
+                        </Text>
+                    </View>
+                </LazyloadView>
+            </View>
+        );
     };
 
     render() {
-        return <LazyloadListView
-            style={styles.container}
-            contentContainerStyle={styles.content}
-            name="listExample"
-            dataSource={this.state.dataSource}
-            renderRow={this.renderRow}
-            scrollRenderAheadDistance={200}
-            renderDistance={100}
-            pageSize={1}
-            initialListSize={10}
-        />;
+        return (
+            <LazyloadListView
+                style={styles.container}
+                contentContainerStyle={styles.content}
+                name="listExample"
+                dataSource={this.state.dataSource}
+                renderRow={this.renderRow}
+                scrollRenderAheadDistance={200}
+                renderDistance={100}
+                pageSize={1}
+                initialListSize={10}
+            />
+        );
     }
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#F5FCFF'
+        backgroundColor: "#F5FCFF",
     },
     content: {
         paddingTop: 20,
-        justifyContent: 'center',
-        alignItems: 'center'
+        justifyContent: "center",
+        alignItems: "center",
     },
     view: {
         height: 70,
         width: 320,
         paddingVertical: 5,
         borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: '#666'
+        borderBottomColor: "#666",
     },
     file: {
         width: 320,
         flex: 1,
-        flexDirection: 'row'
+        flexDirection: "row",
     },
     id: {
         width: 50,
-        alignItems: 'center',
-        justifyContent: 'center'
+        alignItems: "center",
+        justifyContent: "center",
     },
     idText: {
-        fontSize: 10
+        fontSize: 10,
     },
     detail: {
-        justifyContent: 'space-around',
-        flex: 1
+        justifyContent: "space-around",
+        flex: 1,
     },
     name: {
-        textAlign: 'center',
+        textAlign: "center",
         lineHeight: 15,
-        color: '#666',
-        marginBottom: 5
+        color: "#666",
+        marginBottom: 5,
     },
     email: {
         fontSize: 10,
-        color: 'blue',
-        textDecorationColor: 'blue',
-        textDecorationLine: 'underline',
-        textDecorationStyle: 'solid'
+        color: "blue",
+        textDecorationColor: "blue",
+        textDecorationLine: "underline",
+        textDecorationStyle: "solid",
     },
     ip: {
         fontSize: 12,
-        color: 'grey'
+        color: "grey",
     },
     gender: {
         width: 50,
-        alignItems: 'center',
-        justifyContent: 'center'
+        alignItems: "center",
+        justifyContent: "center",
     },
     genderText: {
-        fontSize: 10
+        fontSize: 10,
     },
     title: {
-        color: '#333',
-        fontSize: 12
+        color: "#333",
+        fontSize: 12,
     },
     male: {
-        color: 'skyblue'
+        color: "skyblue",
     },
     female: {
-        color: 'pink'
-    }
+        color: "pink",
+    },
 });
 
 export default LazyloadListExample;
diff --git a/lib/Anim.js b/lib/Anim.js
@@ -1,6 +1,5 @@
-import React, {
-    PropTypes
-} from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactNative, {
    LayoutAnimation
 } from 'react-native';

diff --git a/lib/LazyloadChild.js b/lib/LazyloadChild.js
@@ -1,31 +1,43 @@
-export default class {
+export default class LazyloadChild {
     constructor(container, measureLayout, toggle) {
-        let {offset, recycle, horizontal, contentOffset, dimensions} = container;
+        let {
+            offset,
+            recycle,
+            horizontal,
+            contentOffset,
+            dimensions,
+        } = container;
         this._recycle = recycle;
         this._toggle = toggle;
         this._horizontal = horizontal;
         if (recycle && offset >= recycle) {
-            console.warn('Recycle distance should be much more than render distance.');
+            console.warn(
+                "Recycle distance should be much more than render distance."
+            );
             recycle = offset;
         }
 
         measureLayout(container.data, (x, y, width, height) => {
-            let {width: sightWidth, height: sightHeight} = dimensions;
-            this._sight = horizontal ? {
-                start: -(sightWidth - x + offset),
-                end: x + width + offset
-            } : {
-                start: -(sightHeight - y + offset),
-                end: y + height + offset
-            };
+            let { width: sightWidth, height: sightHeight } = dimensions;
+            this._sight = horizontal
+                ? {
+                      start: -(sightWidth - x + offset),
+                      end: x + width + offset,
+                  }
+                : {
+                      start: -(sightHeight - y + offset),
+                      end: y + height + offset,
+                  };
             if (recycle) {
-                this._bound = horizontal ? {
-                    start: -(recycle + sightWidth - x),
-                    end: x + width + recycle
-                } : {
-                    start: -(recycle + sightHeight - y),
-                    end: y + height + recycle
-                };
+                this._bound = horizontal
+                    ? {
+                          start: -(recycle + sightWidth - x),
+                          end: x + width + recycle,
+                      }
+                    : {
+                          start: -(recycle + sightHeight - y),
+                          end: y + height + recycle,
+                      };
             }
 
             this.move(contentOffset.x, contentOffset.y);
@@ -49,11 +61,21 @@ export default class {
         let recycle = this._recycle;
         let scrolled = this._horizontal ? x : y;
 
-        if (this._recycled && scrolled >= bound.start && scrolled <= bound.end) { // Recycled element back into recycle distance
+        if (
+            this._recycled &&
+            scrolled >= bound.start &&
+            scrolled <= bound.end
+        ) {
+            // Recycled element back into recycle distance
             this._recycled = false;
             this._visible = true;
             this._toggle(true);
-        } else if (!this._visible && scrolled >= sight.start && scrolled <= sight.end) { // Invisible element scroll into sight
+        } else if (
+            !this._visible &&
+            scrolled >= sight.start &&
+            scrolled <= sight.end
+        ) {
+            // Invisible element scroll into sight
             this._visible = true;
             this._toggle(true);
         } else if (this._visible && recycle && !this._recycled) {

diff --git a/lib/LazyloadImage.js b/lib/LazyloadImage.js
@@ -1,7 +1,7 @@
 import React, {
     Component,
-    PropTypes
 } from 'react';
+import PropTypes from 'prop-types';
 import {
     Image,
     Platform

diff --git a/lib/LazyloadListView.js b/lib/LazyloadListView.js
@@ -1,27 +1,23 @@
-import React, {
-    Component,
-    PropTypes
-} from 'react';
-import {
-    ListView
-} from 'react-native';
-import ScrollableMixin from 'react-native-scrollable-mixin';
-import LazyloadScrollView from './LazyloadScrollView';
-
-class LazyloadListView extends Component{
-    static displayName = 'LazyloadListView';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import ListView from "deprecated-react-native-listview";
+import ScrollableMixin from "react-native-scrollable-mixin";
+import LazyloadScrollView from "./LazyloadScrollView";
+
+class LazyloadListView extends Component {
+    static displayName = "LazyloadListView";
 
     static propTypes = {
-        ...ListView.propTypes
+        ...ListView.propTypes,
     };
 
-    refresh () {
+    refresh() {
         this._scrollView.refresh();
     }
 
     get scrollProperties() {
         return this._listView.scrollProperties;
-    };
+    }
 
     /**
      * IMPORTANT: You must return the scroll responder of the underlying
@@ -36,14 +32,17 @@ class LazyloadListView extends Component{
     }
 
     render() {
-        return this.props.name ? <ListView
-            {...this.props}
-            renderScrollComponent={props => <LazyloadScrollView {...props} />}
-            ref={ele => this._listView = ele}
-        /> : <ListView
-            {...this.props}
-            ref={ele => this._listView = ele}
-        />;
+        return this.props.name ? (
+            <ListView
+                {...this.props}
+                renderScrollComponent={props => (
+                    <LazyloadScrollView {...props} />
+                )}
+                ref={ele => (this._listView = ele)}
+            />
+        ) : (
+            <ListView {...this.props} ref={ele => (this._listView = ele)} />
+        );
     }
 }
 

diff --git a/lib/LazyloadScrollView.js b/lib/LazyloadScrollView.js
@@ -1,7 +1,7 @@
 import React, {
     Component,
-    PropTypes
 } from 'react';
+import PropTypes from 'prop-types';
 import ReactNative, {
     ScrollView,
     Dimensions