Merge pull request #7 from rishichawda/development

Development

Author: rishichawda

README.md

@@ -1,18 +1,22 @@
-# THIS PROJECT IS NO LONGER MAINTAINED
+#### This is a fork of [react-native-qrcode](https://github.com/cssivision/react-native-qrcode) with fixes and other enhancements since the original is not maintained anymore.
 
 # react-native-qrcode
-A react-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code), not only support English.
+A react-native component to generate [QRcode](http://en.wikipedia.org/wiki/QR_code).
 
 ## Installation
+
 ```sh
-npm install react-native-qrcode --save
+npm install react-native-qrcode-generator --save
 ```
+
+*(**Note** : If you want to use the original unmaintained package, [visit this link](https://github.com/cssivision/react-native-qrcode)).*
+
 ## Usage
 ```jsx
 'use strict';
 
 import React, { Component } from 'react'
-import QRCode from 'react-native-qrcode';
+import QRCode from 'react-native-qrcode-generator';
 
 import {
     AppRegistry,
@@ -37,7 +41,7 @@ class HelloWorld extends Component {
         <QRCode
           value={this.state.text}
           size={200}
-          bgColor='purple'
+          bgColor='black'
           fgColor='white'/>
       </View>
     );
@@ -66,17 +70,24 @@ AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
 
 module.exports = HelloWorld;
 ```
+
+#### Output : 
+
+<img src='qrcode.png' height = '256' width = '256'/>
+
+##
+
 ## Available Props
 
-prop      | type                 | default value
+prop      | type                 | Description
 ----------|----------------------|--------------
-`value`   | `string`             | `http://facebook.github.io/react-native/`
-`size`    | `number`             | `128`
-`bgColor` | `string` (CSS color) | `"#000"`
-`fgColor` | `string` (CSS color) | `"#FFF"`
+`value`   | `string`  ( **Default** : `http://facebook.github.io/react-native/` ) | Value of the QRCode. 
+`size`    | `number` ( **Default** : `128` ) | Size of the qrcode / image.
+`bgColor` | `string` ( **Default** : `white` ) | Background Color for the qrcode / image.
+`fgColor` | `string` ( **Default** : `black` ) | Foreground Color for the qrcode / image.
+`getImageOnLoad` | `function` | Returns the base64 png image data *( string )*.
 
-<img src='qrcode.png' height = '256' width = '256'/>
 
-# Licenses
+## Licenses
 
-All source code is licensed under the [MIT License](https://github.com/cssivision/react-native-qrcode/blob/master/LICENSE).
+All source code is licensed under the [MIT License](https://github.com/rishichawda/react-native-qrcode/blob/master/LICENSE).

lib/Canvas.js

@@ -7,9 +7,40 @@ var createReactClass = require('create-react-class');
 var {
     View,
     WebView,
-    Platform
+    Platform,
 } = require('react-native');
 
+function getRenderHTML(context, render, generator) {
+    return `
+    <style>
+        *{margin:0;padding:0;}canvas{transform:translateZ(0);}
+    </style>
+    <canvas></canvas>
+    <script>
+        var canvas = document.querySelector('canvas');
+        (${render}).call(${context}, canvas);
+        (${generator}).call('', ${context} , canvas);
+    </script>"
+    `; 
+}
+
+function generateImage(context, canvas) {
+    if (window.postMessage.length !== 1) {
+        setTimeout(function() {
+        (generateImage).call(this, context, canvas);
+        }, 100);
+    } else {
+        const image = document.createElement('canvas');
+        const imageContext = image.getContext('2d');
+        image.width = context.size;
+        image.height = context.size;
+        imageContext.fillStyle = context.bgColor;
+        imageContext.fillRect(0, 0, context.size, context.size);
+        imageContext.drawImage(canvas, 0, 0);
+        window.postMessage(image.toDataURL());
+    }
+}
+
 var Canvas = createReactClass({
     propTypes: {
         style: PropTypes.object,
@@ -19,16 +50,23 @@ var Canvas = createReactClass({
         onLoadEnd: PropTypes.func,
     },
 
+    getImage: function(event) {
+        if(this.props.generateImage) {
+            this.props.generateImage(event.nativeEvent.data);
+        }
+    },
+
     render() {
         var contextString = JSON.stringify(this.props.context);
         var renderString = this.props.render.toString();
+        var generate = generateImage.toString();
         return (
             <View style={this.props.style}>
                 <WebView
                     automaticallyAdjustContentInsets={false}
                     scalesPageToFit={Platform.OS === 'android'}
                     contentInset={{top: 0, right: 0, bottom: 0, left: 0}}
-                    source={{html: "<style>*{margin:0;padding:0;}canvas{transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector('canvas');(" + renderString + ").call(" + contextString + ", canvas);</script>"}}
+                    source={{ html: getRenderHTML(contextString, renderString, generate), baseUrl: '' }}
                     opaque={false}
                     underlayColor={'transparent'}
                     style={this.props.style}
@@ -37,6 +75,7 @@ var Canvas = createReactClass({
                     onLoad={this.props.onLoad}
                     onLoadEnd={this.props.onLoadEnd}
                     originWhitelist={['*']}
+                    onMessage={this.getImage}
                 />
             </View>
         );

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,
@@ -55,19 +60,40 @@ var QRCode = createReactClass({
         fgColor: PropTypes.string,
         onLoad: PropTypes.func,
         onLoadEnd: PropTypes.func,
+        getImageOnLoad: PropTypes.func,
     },
 
     getDefaultProps: function() {
         return {
-            value: 'https://github.com/cssivision',
+            value: 'https://github.com/rishichawda/react-native-qrcode-generator',
             fgColor: 'white',
             bgColor: 'black',
             size: 128,
             onLoad: () => {},
             onLoadEnd: () => {},
+            getImageOnLoad: () => {},
+        }
+    },
+
+    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 = "";
@@ -91,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,
@@ -101,12 +130,14 @@ var QRCode = createReactClass({
                         fgColor: this.props.fgColor,
                         cells: qr(value).modules,
                     }}
+                    generateImage={this.props.getImageOnLoad}
                     render={renderCanvas}
                     onLoad={this.props.onLoad}
-                    onLoadEnd={this.props.onLoadEnd}
+                    onLoadEnd={this.onLoadEnd}
                     style={{height: size, width: size}}
                 />
             </View>
+            </>
         );
     }
 });