init project

README.md

@@ -0,0 +1 @@
+##react-native-qrcode

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib/qrcode.js');

lib/Canvas.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react-native');
+var {
+    View,
+    WebView
+} = React;
+
+var Canvas = React.createClass({
+    propTypes: {
+        context: React.PropTypes.object,
+        render: React.PropTypes.func.isRequired
+    },
+
+    render() {
+        var contextString = JSON.stringify(this.props.context);
+        var renderString = this.props.render.toString();
+        return (
+            <View>
+                <WebView
+                    automaticallyAdjustContentInsets={false}
+                    contentInset={{top: 0, right: 0, bottom: 0, left: 0}}
+                    html={"<style>*{margin:0;padding:0;}canvas{position:absolute;transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector('canvas');(" + renderString + ").call(" + contextString + ", canvas);</script>"}
+                    opaque={false}
+                    underlayColor={'transparent'}
+                    style={this.props.style}
+                />
+            </View>
+        );
+    }
+});
+
+module.exports = Canvas;

lib/qrcode.js

@@ -0,0 +1,44 @@
+'use strict'
+
+var React = require('react-native');
+var Canvas = require('./Canvas.js');
+var {
+    View
+} = React;
+var qr = require('qr.js');
+
+module.exports = React.createClass({
+    propTypes: {
+        context: React.PropTypes.object,
+        render: React.PropTypes.func.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            height: 200,
+            width: 200,
+            value: 'https://github.com/cssivision',
+        }
+    },
+
+    renderCanvas: function(canvas) {
+        var ctx = canvas.getContext('2d');
+        canvas.width = this.props.width;
+        canvas.height = this.props.height;
+        canvas.style.left = (window.innerWidth - 200)/2 + 'px';
+        if(window.innerHeight>200) canvas.style.top = (window.innerHeight - 200)/2 + 'px';
+
+    },
+
+    render: function() {
+        return (
+            <View>
+                <Canvas
+                    context={{this.props.context}}
+                    render={this.renderCanvas}
+                    style={{height: this.props.height, width: this.props.width}}
+                />
+            </View>
+        );
+    }
+});

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "react-native-qrcode",
+  "version": "1.0.0",
+  "description": "react-native qrocode generator",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/cssivision/react-native-qrcode.git"
+  },
+  "keywords": [
+    "react-native",
+    "qrcode"
+  ],
+  "author": "sivision.chen",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cssivision/react-native-qrcode/issues"
+  },
+  "homepage": "https://github.com/cssivision/react-native-qrcode#readme"
+}