https://www.npmjs.com/package/rn-qr-generator
$ npm install rn-qr-generator --save
$ react-native link rn-qr-generator
Linking is not needed anymore. [email protected]+ supports dependencies auto linking.
For iOS you also need additional step to install auto linked Pods (Cocoapods should be installed):
cd ios && pod install && cd ../
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜rn-qr-generatorand addRNQrGenerator.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNQrGenerator.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.gevorg.reactlibrary.RNQrGeneratorPackage;to the imports at the top of the file - Add
new RNQrGeneratorPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:rootProject.name = 'MyApp' include ':app' + include ':rn-qr-generator' + project(':rn-qr-generator').projectDir = new File(rootProject.projectDir, '../node_modules/rn-qr-generator/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle:dependencies { + compile project(':rn-qr-generator') }
import RNQRGenerator from 'rn-qr-generator';
RNQRGenerator.generate({
value: 'https://github.com/gevgasparyan/rn-qr-generator',
height: 100,
width: 100,
})
.then(response => {
const { uri, width, height, base64 } = response;
this.setState({ imageUri: uri });
})
.catch(error => console.log('Cannot create QR code', error));
// Detect QR code in image
RNQRGenerator.detect({
uri: PATH_TO_IMAGE
})
.then(response => {
const { values } = response; // Array of detected QR code values. Empty if nothing found.
})
.catch(error => console.log('Cannot detect QR code in image', error));input properties
| Property | Type | Description |
|---|---|---|
value |
string | Text value to be converted into QR image. (required) |
width |
number | Width of the QR image to be generated. (required) |
height |
number | Height of the QR image to be generated. (required) |
| backgroundColor | string | Background color of the image. (white by default) |
| color | string | Color of the image. (black by default) |
| fileName | string | Name of the image file to store in FileSystem. (optional) |
| correctionLevel | string | Data restoration rate for total codewords. Available values are 'L', 'M', 'Q' and 'H'. ('H' by default) |
| base64 | boolean | If true will return base64 representation of the image. (optional, false by default) |
| padding | Object | Padding params for the image to be generated: {top: number, left: number, bottom: number, right: number}. (default no padding) |
payload
| Property | Type | Description |
|---|---|---|
| uri | string | Path of the generated image. |
| width | number | Width of the generated image. |
| height | number | Height of the generated image. |
| base64 | boolean | Base64 encoded string of the image. |
input properties
| Property | Type | Description |
|---|---|---|
uri |
string | Local path of the image. Can be skipped if base64 is passed. |
base64 |
string | Base64 representation of the image to be scanned. If uri is passed this option will be skipped. |
payload
| Property | Type | Description |
|---|---|---|
| values | string[] | Array of detected QR code values. Empty if nothing found. |
| type | string | Type of detected code. |
The following barcode types are currently supported for decoding:
- UPC-A and UPC-E
- EAN-8 and EAN-13
- Code 39
- Code 93
- Code 128
- ITF
- Codabar
- RSS-14 (all variants)
- QR Code
- Data Matrix
- Maxicode
- Aztec ('beta' quality)
- PDF 417 ('beta' quality)
Example of 2FA QR code with Time Based (TOTP) or Counter Based (HOTP)
RNQRGenerator.generate({
...
value: 'otpauth://totp/Example:[email protected]?secret=HKSWY3RNEHPK3PXP&issuer=Issuer',
})
More information about totp can be found here.
This module uses Zxing library for encoding and decoding codes ( ios, Android).
Some simulators may not generate qr code properly. Use real device if you get an error.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
