fix(lib): fix render on update (#5)

Add activity indication / loader while the qrcode is generated on initial and subsequent renders /
re-renders. This removes the broken layout / render of the qrcode canvas from view and only displays
it when qrcode is ready.

#3

Author: rishichawda

lib/Canvas.js

@@ -7,7 +7,7 @@ var createReactClass = require('create-react-class');
 var {
     View,
     WebView,
-    Platform
+    Platform,
 } = require('react-native');
 
 function getRenderHTML(context, render, generator) {

lib/QRCode.js

@@ -7,6 +7,7 @@ var Canvas = require('./Canvas.js');
 var qr = require('qr.js');
 var {
     View,
+    ActivityIndicator,
 } = require('react-native');
 
 function renderCanvas(canvas) {
@@ -47,6 +48,10 @@ function renderCanvas(canvas) {
     });
 }
 
+function getDiff(x, y) {
+    return Object.keys(x).some(value => x[value] !== y[value]);
+}
+
 var QRCode = createReactClass({
     PropTypes: {
         value: PropTypes.string,
@@ -70,6 +75,25 @@ var QRCode = createReactClass({
         }
     },
 
+    componentDidUpdate: function(prev) {
+        const hasChanged = getDiff(prev, this.props);
+        if(hasChanged) {
+            this.setState({ isLoading: true });
+        }
+    },
+
+    getInitialState: function() {
+        return { isLoading: true };
+    },
+
+    onLoadEnd: function() {
+        this.setState({
+            isLoading: false,
+        }, () => {
+            this.props.onLoadEnd();
+        });
+    },
+
     utf16to8: function(str) {
         var out, i, len, c;
         out = "";
@@ -93,8 +117,11 @@ var QRCode = createReactClass({
     render: function() {
         var size = this.props.size;
         var value = this.utf16to8(this.props.value);
+        var styles = this.state.isLoading ? { width: 0, height: 0, overflow: 'hidden' } : undefined;
         return (
-            <View>
+            <>
+            { this.state.isLoading && <ActivityIndicator /> }
+            <View style={styles}>
                 <Canvas
                     context={{
                         size: size,
@@ -106,10 +133,11 @@ var QRCode = createReactClass({
                     generateImage={this.props.getImageOnLoad}
                     render={renderCanvas}
                     onLoad={this.props.onLoad}
-                    onLoadEnd={this.props.onLoadEnd}
+                    onLoadEnd={this.onLoadEnd}
                     style={{height: size, width: size}}
                 />
             </View>
+            </>
         );
     }
 });