Merge branch 'release/5.0.3'

Author: awesomejerry

README.md

@@ -98,6 +98,8 @@ color           | 'black'        | Color of the QR code
 logo | null        | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
 logoSize | 20% of size | Size of the imprinted logo. Bigger logo = less error correction in QR code
 logoBackgroundColor | backgroundColor        | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
+logoMargin | 2 | logo's distance to its wrapper
+logoBorderRadius | null | the border-radius of logo image (Android is not supported)
 getRef          | null       | Get SVG ref for further usage
 ecl             | 'M'        | Error correction level
 
@@ -117,7 +119,7 @@ import RNFS from "react-native-fs"
    	this.svg.toDataURL((data) => {
    		RNFS.writeFile(RNFS.CachesDirectoryPath+"/some-name.png", data, 'base64')
    		  .then((success) => {
-   			  return CameraRoll.saveToCameraRoll(RNFS.CachesDirectoryPath+"/some-name", 'photo')
+   			  return CameraRoll.saveToCameraRoll(RNFS.CachesDirectoryPath+"/some-name.png", 'photo')
    		  })
    		  .then(() => {
    			  this.setState({ busy: false, imageSaved: true  })

package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-native-qrcode-svg",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "A QR Code generator for React Native based on react-native-svg and javascript-qrcode.",
   "main": "index.js",
   "scripts": {
     "test": "jest",
     "test-update": "npm run test -- --updateSnapshot",
     "lint-staged": "lint-staged",
     "lint": "standard 'src/**/*.js'",
-    "2npm": "publish"
+    "2npm": "publish",
+    "check-update": "yarn upgrade-interactive"
   },
   "standard": {
     "env": [
@@ -36,24 +37,24 @@
   },
   "homepage": "https://github.com/awesomejerry/react-native-qrcode-svg#readme",
   "peerDependencies": {
-    "react": "^15.4.2",
-    "react-native": "^0.42.0",
-    "react-native-svg": "^5.1.5"
+    "react-native": ">=0.46.0",
+    "react": "16.0.0-alpha.12",
+    "react-native-svg": "^5.4.1"
   },
   "dependencies": {
     "prop-types": "^15.5.10",
-    "qrcode": "^0.8.1"
+    "qrcode": "^0.9.0"
   },
   "devDependencies": {
-    "babel-eslint": "^7.2.2",
-    "babel-jest": "^19.0.0",
-    "babel-preset-react-native": "^1.9.1",
-    "jest": "^19.0.2",
-    "lint-staged": "^3.4.0",
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.2.0",
+    "babel-preset-react-native": "^4.0.0",
+    "jest": "^21.2.1",
+    "lint-staged": "^4.2.3",
     "pre-commit": "^1.2.2",
     "publish": "^0.6.0",
-    "react": "^15.4.2",
-    "react-test-renderer": "^15.4.2",
-    "standard": "^10.0.2"
+    "react": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
+    "standard": "^10.0.3"
   }
 }

src/index.js

@@ -28,6 +28,8 @@ export default class QRCode extends PureComponent {
     logoBackgroundColor: PropTypes.string,
     /* logo's distance to its wrapper */
     logoMargin: PropTypes.number,
+    /* the border-radius of logo image */
+    logoBorderRadius: PropTypes.number,
     /* get svg ref for further usage */
     getRef: PropTypes.func,
     /* error correction level */
@@ -91,36 +93,32 @@ export default class QRCode extends PureComponent {
     return d
   }
   renderLogo () {
-    const {
-      size,
-      backgroundColor,
-      logo,
-      logoBackgroundColor = backgroundColor,
-      logoSize = size * 0.2,
-      logoMargin
-    } = this.props
+    const { size, backgroundColor, logo, logoBackgroundColor = backgroundColor,
+      logoSize = size * 0.2, logoMargin, logoBorderRadius } = this.props
     const wrapSize = logoSize + logoMargin * 2
     const position = size / 2 - logoSize / 2 - logoMargin
 
+    const viewStyle = {
+      backgroundColor: logoBackgroundColor,
+      width: wrapSize,
+      height: wrapSize,
+      position: 'absolute',
+      left: position,
+      top: position,
+      padding: logoMargin,
+      borderRadius: logoBorderRadius,
+      overflow: 'hidden'
+    }
+
+    const imageStyle = {
+      width: logoSize,
+      height: logoSize
+    }
+
     return (
-      <View
-        style={{
-          backgroundColor: logoBackgroundColor,
-          width: wrapSize,
-          height: wrapSize,
-          position: 'absolute',
-          left: position,
-          top: position
-        }}
-      >
+      <View style={viewStyle}>
         <Image
-          style={{
-            width: logoSize,
-            height: logoSize,
-            position: 'absolute',
-            left: logoMargin,
-            top: logoMargin
-          }}
+          style={imageStyle}
           source={logo}
           resizeMode='contain'
         />