From 653ce3873dd4699e5130c45a612fd1346356bb2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=A1=95?= <liushuo@visionet.com.cn>
Date: Tue, 25 Jul 2017 11:54:14 +0800
Subject: [PATCH] add ActivityIndicator before complete load image

1.update package.json to use ActivityIndicator
2.add ActivityIndicator before complete load image
3.add prop showLoading to make user control show loading view
---
 Demo/App.js                   |  5 ++++-
 Demo/package.json             |  6 ++---
 library/TransformableImage.js | 41 +++++++++++++++++++++++------------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/Demo/App.js b/Demo/App.js
index f8a0560..6e00ebc 100644
--- a/Demo/App.js
+++ b/Demo/App.js
@@ -44,6 +44,7 @@ export default class App extends Component {
           <Image
             style={{width: width - 50, height: height - 100, backgroundColor: 'black'}}
             source={{uri: this.state.uri}}
+            showLoading={true} //show loading
             //pixels={{width: 1920, height: 1080}}
           />
         </View>
@@ -81,7 +82,9 @@ export default class App extends Component {
         />
         <Image
           style={{width: width, height: height}}
-          source={{uri: 'http://p10.qhimg.com/t019e9cf51692f735be.jpg'}}/>
+          source={{uri: 'http://p10.qhimg.com/t019e9cf51692f735be.jpg'}}
+        />
+
       </ScrollView>
     );
   }
diff --git a/Demo/package.json b/Demo/package.json
index ca614e9..97a40ad 100644
--- a/Demo/package.json
+++ b/Demo/package.json
@@ -6,8 +6,8 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "react": "15.2.1",
-    "react-native": "^0.29.2",
-    "react-native-transformable-image": "0.0.18"
+    "react-native-transformable-image": "0.0.18",
+    "react": "15.4.1", 
+    "react-native": "0.39.2"
   }
 }
diff --git a/library/TransformableImage.js b/library/TransformableImage.js
index 17dd7d3..1919519 100644
--- a/library/TransformableImage.js
+++ b/library/TransformableImage.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React, { Component, PropTypes } from 'react';
-import { Image } from 'react-native';
+import { Image, ActivityIndicator,View } from 'react-native';
 
 import ViewTransformer from 'react-native-view-transformer';
 
@@ -24,13 +24,15 @@ export default class TransformableImage extends Component {
     enableTranslate: PropTypes.bool,
     onSingleTapConfirmed: PropTypes.func,
     onTransformGestureReleased: PropTypes.func,
-    onViewTransformed: PropTypes.func
+    onViewTransformed: PropTypes.func,
+      showLoading:PropTypes.bool
   };
 
   static defaultProps = {
     enableTransform: true,
     enableScale: true,
-    enableTranslate: true
+    enableTranslate: true,
+      showLoading:false
   };
 
   constructor(props) {
@@ -99,23 +101,34 @@ export default class TransformableImage extends Component {
         contentAspectRatio={contentAspectRatio}
         onLayout={this.onLayout.bind(this)}
         style={this.props.style}>
-        <Image
-          {...this.props}
-          style={[this.props.style, {backgroundColor: 'transparent'}]}
-          resizeMode={'contain'}
-          onLoadStart={this.onLoadStart.bind(this)}
-          onLoad={this.onLoad.bind(this)}
-          capInsets={{left: 0.1, top: 0.1, right: 0.1, bottom: 0.1}} //on iOS, use capInsets to avoid image downsampling
-        />
+          <Image
+              {...this.props}
+              style={[this.props.style, {backgroundColor: 'transparent'}]}
+              resizeMode={'contain'}
+              onLoadStart={this.onLoadStart.bind(this)}
+              onLoad={this.onLoad.bind(this)}
+              capInsets={{left: 0.1, top: 0.1, right: 0.1, bottom: 0.1}} //on iOS, use capInsets to avoid image downsampling
+          >
+              {/* loading activityIndicator (android & ios) before image onLoaded */}
+              {this.props.showLoading && !this.state.imageLoaded &&
+              <View style={{position: 'absolute',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  left: 0,
+                  right: 0,
+                  top: 0,
+                  bottom: 0,}}>
+                  <ActivityIndicator animating={!this.state.imageLoaded} size={"large"}/>
+              </View>
+              }
+          </Image>
       </ViewTransformer>
     );
   }
 
   onLoadStart(e) {
     this.props.onLoadStart && this.props.onLoadStart(e);
-    this.setState({
-      imageLoaded: false
-    });
+    this.state.imageLoaded = false  //solve (react-native 0.44.3 android) multiple update views
   }
 
   onLoad(e) {