magicismight · skantus · Jul 21, 2019 · Jul 21, 2019 · Jul 21, 2019 · Jul 21, 2019
diff --git a/lib/Anim.js b/lib/Anim.js
@@ -1,9 +1,6 @@
-import React, {
-    PropTypes
-} from 'react';
-import ReactNative, {
-   LayoutAnimation
-} from 'react-native';
+import React from "react";
+import ReactNative, { LayoutAnimation } from "react-native";
+import PropTypes from "prop-types";
 
 export default PropTypes.shape({
     duration: PropTypes.number,
@@ -13,4 +10,3 @@ export default PropTypes.shape({
     type: PropTypes.oneOf(Object.keys(LayoutAnimation.Types)),
     property: PropTypes.oneOf(Object.keys(LayoutAnimation.Properties))
 });
-
diff --git a/lib/LazyloadImage.js b/lib/LazyloadImage.js
@@ -1,17 +1,15 @@
-import React, {
-    Component,
-    PropTypes
-} from 'react';
-import {
-    Image,
-    Platform
-} from 'react-native';
-import LazyloadView from './LazyloadView';
-import Anim from './Anim';
-const emptySource = {uri:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'};
+import React, { Component } from "react";
+import { Image, Platform } from "react-native";
+import PropTypes from "prop-types";
+import LazyloadView from "./LazyloadView";
+import Anim from "./Anim";
+const emptySource = {
+    uri:
+        "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+};
 
-class LazyloadImage extends LazyloadView{
-    static displayName = 'LazyloadImage';
+class LazyloadImage extends LazyloadView {
+    static displayName = "LazyloadImage";
 
     static propTypes = {
         host: PropTypes.string,
@@ -31,18 +29,19 @@ class LazyloadImage extends LazyloadView{
     render() {
         let key = null;
         if (this.props.animation) {
-            key = this.state.visible ? 'visible' : 'invisible';
+            key = this.state.visible ? "visible" : "invisible";
         }
-        return this.props.host ? <Image
-            ref={ele => this._root = ele}
-            {...this.props}
-            onLayout={this._onLayout}
-            key={key}
-            source={this.state.visible ? this.props.source : emptySource}
-        /> : <Image
-            ref={ele => this._root = ele}
-            {...this.props}
-        />;
+        return this.props.host ? (
+            <Image
+                ref={ele => (this._root = ele)}
+                {...this.props}
+                onLayout={this._onLayout}
+                key={key}
+                source={this.state.visible ? this.props.source : emptySource}
+            />
+        ) : (
+            <Image ref={ele => (this._root = ele)} {...this.props} />
+        );
     }
 }
 

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
     };
 
-    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,35 +1,28 @@
-import React, {
-    Component,
-    PropTypes
-} from 'react';
-import ReactNative, {
-    ScrollView,
-    Dimensions
-} from 'react-native';
-import ScrollableMixin from 'react-native-scrollable-mixin';
-import LazyloadManager from './LazyloadManager';
-
-class LazyloadScrollView extends Component{
-    static displayName = 'LazyloadScrollView';
+import React, { Component } from "react";
+import ReactNative, { ScrollView, Dimensions } from "react-native";
+import PropTypes from "prop-types";
+import ScrollableMixin from "react-native-scrollable-mixin";
+import LazyloadManager from "./LazyloadManager";
+
+class LazyloadScrollView extends Component {
+    static displayName = "LazyloadScrollView";
 
     static propTypes = {
         name: PropTypes.string,
         renderDistance: PropTypes.number,
         recycle: PropTypes.bool,
-        recycleDistance : PropTypes.number,
+        recycleDistance: PropTypes.number,
         horizontal: PropTypes.bool,
         ...ScrollView.propTypes
     };
 
     static defaultProps = {
         renderDistance: 0,
         recycle: true,
-        recycleDistance: Dimensions.get('window').height * 4,
+        recycleDistance: Dimensions.get("window").height * 4,
         horizontal: false
     };
 
-
-
     constructor() {
         super();
 
@@ -41,7 +34,7 @@ class LazyloadScrollView extends Component{
     }
 
     componentWillUnmount = () => {
-        if(this._manager){
+        if (this._manager) {
             this._manager.destroy();
             this._manager = null;
         }
@@ -66,13 +59,8 @@ class LazyloadScrollView extends Component{
 
     _onLayout = (e, node) => {
         this.props.onLayout && this.props.onLayout(e, node);
-        let {width, height} = e.nativeEvent.layout;
-        let {
-            name,
-            renderDistance,
-            recycle,
-            recycleDistance
-        } = this.props;
+        let { width, height } = e.nativeEvent.layout;
+        let { name, renderDistance, recycle, recycleDistance } = this.props;
 
         this._manager = new LazyloadManager(
             {
@@ -87,28 +75,31 @@ class LazyloadScrollView extends Component{
             },
             ReactNative.findNodeHandle(this)
         );
-
     };
 
     _onScroll = e => {
         this.props.onScroll && this.props.onScroll(e);
-        let {x, y} = e.nativeEvent.contentOffset;
-        this.currentPosition = {x, y};
-        this._manager && this._manager.calculate({x, y});
+        let { x, y } = e.nativeEvent.contentOffset;
+        this.currentPosition = { x, y };
+        this._manager && this._manager.calculate({ x, y });
     };
 
     render() {
-        return this.props.name ? <ScrollView
-            {...this.props}
-            ref={ele => this._scrollResponder = ele}
-            name={null}
-            onScroll={this._onScroll}
-            onLayout={this._onLayout}
-            scrollEventThrottle={this.props.scrollEventThrottle || 16}
-        /> : <ScrollView
-            {...this.props}
-            ref={ele => this._scrollResponder = ele}
-        />;
+        return this.props.name ? (
+            <ScrollView
+                {...this.props}
+                ref={ele => (this._scrollResponder = ele)}
+                name={null}
+                onScroll={this._onScroll}
+                onLayout={this._onLayout}
+                scrollEventThrottle={this.props.scrollEventThrottle || 16}
+            />
+        ) : (
+            <ScrollView
+                {...this.props}
+                ref={ele => (this._scrollResponder = ele)}
+            />
+        );
     }
 }
 

diff --git a/lib/LazyloadView.js b/lib/LazyloadView.js
@@ -1,18 +1,13 @@
-import React, {
-    Component,
-    PropTypes
-} from 'react';
-import {
-    View,
-    LayoutAnimation
-} from 'react-native';
-import LazyloadManager from './LazyloadManager';
-import Anim from './Anim';
+import React, { Component } from "react";
+import { View, LayoutAnimation } from "react-native";
+import PropTypes from "prop-types";
+import LazyloadManager from "./LazyloadManager";
+import Anim from "./Anim";
 
 let id = 0;
 
-class LazyloadView extends Component{
-    static displayName = 'LazyloadView';
+class LazyloadView extends Component {
+    static displayName = "LazyloadView";
 
     static propTypes = {
         host: PropTypes.string,
@@ -35,7 +30,7 @@ class LazyloadView extends Component{
             duration: 350,
             create: {
                 property: LayoutAnimation.Properties.opacity,
-                type: 'easeIn'
+                type: "easeIn"
             }
         }
     };
@@ -49,7 +44,7 @@ class LazyloadView extends Component{
                 visible: this._visible
             };
         }
-    };
+    }
 
     componentWillUnmount = () => {
         if (this.props.host) {
@@ -58,7 +53,7 @@ class LazyloadView extends Component{
         this._unmounted = true;
     };
 
-    shouldComponentUpdate = (nextProps) => {
+    shouldComponentUpdate = nextProps => {
         return this._visible || !nextProps.host;
     };
 
@@ -73,16 +68,25 @@ class LazyloadView extends Component{
             clearTimeout(this._timeout);
 
             // If we have a callback, call it with the visibility state change
-            if (this.props.onVisibilityChange && typeof this.props.onVisibilityChange === 'function') {
-                this.props.onVisibilityChange(this._visible, this.ref, this.props);
+            if (
+                this.props.onVisibilityChange &&
+                typeof this.props.onVisibilityChange === "function"
+            ) {
+                this.props.onVisibilityChange(
+                    this._visible,
+                    this.ref,
+                    this.props
+                );
             }
 
             this._timeout = setTimeout(() => {
                 if (this._unmounted) {
                     return;
                 }
 
-                visible && this.props.animation && LayoutAnimation.configureNext(this.props.animation);
+                visible &&
+                    this.props.animation &&
+                    LayoutAnimation.configureNext(this.props.animation);
                 this.setState({
                     visible
                 });
@@ -126,16 +130,17 @@ class LazyloadView extends Component{
     };
 
     render() {
-        return this.props.host ? <View
-            {...this.props}
-            ref={ele => this._root = ele}
-            onLayout={this._onLayout}
-        >
-            {this.state.visible ? this.props.children : null}
-        </View> : <View
-            ref={ele => this._root = ele}
-            {...this.props}
-        />;
+        return this.props.host ? (
+            <View
+                {...this.props}
+                ref={ele => (this._root = ele)}
+                onLayout={this._onLayout}
+            >
+                {this.state.visible ? this.props.children : null}
+            </View>
+        ) : (
+            <View ref={ele => (this._root = ele)} {...this.props} />
+        );
     }
 }
 

diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
         "url": "https://github.com/magicismight/react-native-lazyload"
     },
     "dependencies": {
-        "react-native-scrollable-mixin": "^1.0.1"
+        "prop-types": "^15.7.2",
+        "react-native-scrollable-mixin": "^1.0.1",
+        "deprecated-react-native-listview": "0.0.5"
     },
     "keywords": [
         "react-component",