Skip to content

Commit

Permalink
Improves README instructions and readability
Browse files Browse the repository at this point in the history
  • Loading branch information
douglasjunior committed Jul 29, 2020
1 parent a594e11 commit 315b696
Showing 1 changed file with 30 additions and 15 deletions.
45 changes: 30 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,50 @@ Discussion: https://discord.gg/RvFM97v
* Easily render QR code images
* Optionally embed a logotype

<img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/android.png" width="150">
<img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/ios.png" width="150">
| Android | iOS |
| - | - |
| <img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/android.png" width="240"> | <img src="https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/ios.png" width="240"> |

## Installation

Please install react-native-svg first.
Install dependency packages

```bash
yarn add react-native-svg react-native-qrcode-svg
```
Or
```bash
npm i -S react-native-svg react-native-qrcode-svg
```
npm install react-native-svg --save

If you are using `React Native 0.60.+` go to the folder **your-project/ios** and run `pod install`, and you're done.

If not, use one of the following method to link.

## Link with `react-native link`

If you are using `React Native <= 0.59.X`, link the native project:

```bash
react-native link react-native-svg
npm install react-native-qrcode-svg --save
```

## Examples

```
```jsx
import QRCode from 'react-native-qrcode-svg';

//Simple usage, defaults for all but the value
// Simple usage, defaults for all but the value
render() {
return (
<QRCode
value="http://awesome.link.qr"
/>
);
};
```

```
```jsx
// 30px logo from base64 string with transparent background
render() {
let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';
Expand All @@ -53,10 +68,9 @@ render() {
/>
);
};
```

```
```jsx
// 20% (default) sized logo from local file string with white logo backdrop
render() {
let logoFromFile = require('../assets/logo.png');
Expand All @@ -67,17 +81,18 @@ render() {
/>
);
};
```

```
```jsx
// get base64 string encode of the qrcode (currently logo is not included)
getDataURL() {
this.svg.toDataURL(this.callback);
}

callback(dataURL) {
console.log(dataURL);
}

render() {
return (
<QRCode
Expand All @@ -88,7 +103,6 @@ render() {
}
```


## Props

Name | Default | Description
Expand Down Expand Up @@ -117,7 +131,8 @@ onError(error) | undefined | Callback fired when exception happened during the
npm install --save react-native-fs

### Example for Android:
```

```js
import { CameraRoll , ToastAndroid } from "react-native"
import RNFS from "react-native-fs"
...
Expand Down

0 comments on commit 315b696

Please sign in to comment.