react-native-qrcode-package/README.md

This package include QR code generator and QR code Scanner for React Native.

# react-native-qrcode-package
QR Code generator and QR Code Scanner for React Native.


## Features

* Rendering of QR code images from JSON file
* Scanning QR code images, data processing, log errors


## Installation

```bash
npm i react-native-qrcode-package
```

Install dependency packages to **generate qr code**:

```bash
yarn add react-native-svg
```
Or
```bash
npm i react-native-svg
```

Install dependency packages to **scan qr code**:

```bash
yarn add react-native-camera
```
```bash
yarn add react-native-permissions
```
Or
```bash
npm i react-native-camera
```
```bash
npm i react-native-permissions
```

**IMPORTANT** 
New version of react-native-permissions (3.8.0) has breaking changes and doesn't work correctly on ios with camera permission. Use **"react-native-permissions": "3.7.3"** or below version.

After that for ios go to the folder **your-project/ios** and run `pod install`. 

**WARNING**

You may got this warn after install react-native-camera: `ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'`. If you have warn then: go to the `node-modules` folder -> find `react-native-camera` folder -> `src` folder -> find the file `RNCamera.js` -> find inside the file: `import ViewPropTypes from from 'react-native';` -> delete this import from `'react-native'` -> create new import: `import {ViewPropTypes} from 'deprecated-react-native-prop-types';`
This is one of the solutions to this warn.

## Requirements

#### iOS 10

With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the **Info.plist** of your project. This should be found in `'your_project/ios/your_project/Info.plist'`. Add the following code:

```
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
```

Also you will need to add the following code to your **Podfile** (as part of the **react-native-permissions setup**):

```
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
```

You may also need to reset your simulator data after adding those permissions `Device -> Erase All`

#### Android 7

With Android 7 and higher you need to add the "Vibration" permission to your AndroidManifest.xml of your project if you want to use vibration after a successful scan. This should be found in your `android/app/src/main/AndroidManifest.xml` Add the following:

```
<uses-permission android:name="android.permission.VIBRATE"/>
```
You need to add the "missingDimensionStrategy" config for the 'react-native-camera' setting  to 'general', this should be found in your `android/app/build.gradle` add the following:
```
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
  }
}
```

## Examples

#### GenerateQRCode

```jsx
import GenerateQRCode from 'react-native-qrcode-package';

// Simple usage(all fields have default values except 'jsonObject')
 render() {
    return (
      <View>
        <GenerateQRCode
          jsonObject={data} // data - it's your json file(data.json)
          sizeQRcode={200}
        />
      </View>
    );
  }
```

```jsx
// error handle
handleError = (error: undefined) => {
    console.error('Something went wrong', error);
  };
render() {
    return (
      <View>
        <GenerateQRCode
          jsonObject={data}
          onError={e => handleError(e)}
        />
      </View>
    );
  }
```
#### ScanQRCode

```jsx
import ScanQRCode from 'react-native-qrcode-package';

// Simple usage(all fields have default values except 'onQRCodeScanned')
handleScanJsonObject = (json: object) => {
    console.log('QR Code data:', json);
  };
 render() {
    return (
      <View>
        <ScanQRCode
          onQRCodeScanned={handleScanJsonObject}
        />
      </View>
    );
  }
```

```jsx
// error handle
handleError = (error: undefined) => {
    console.error('Something went wrong', error);
    Alert.alert(
      'Invalid QR Code',
      'The scanned QR code does not contain valid JSON',
      [
        {
          text: 'OK',
          onPress: () => {},
        },
      ],
    );
  };
render() {
    return (
      <View>
         <ScanQRCode
          onQRCodeScanned={handleScanJsonObject}
          onError={handleError}
        />
      </View>
    );
  }
```



## Props

#### GenerateQRCode

Name            | Default    | Description
----------------|------------|--------------
sizeQRCode      | 150        | Size of rendered image in pixels
jsonObject      | object     | Put your a JSON .json file of the QR code. Example: '{"brand": "Name","model": "Model name"}'
colorQrCode     | 'black'    | Color of the QR code
onError(error)  | undefined  | Callback fired when exception happened during the code generating process
backgroundColorQRCode | 'white' | Color of the background QR code
enableLinearGradient | false     | Enable or disable linear gradient
linearGradient  |  ['rgb(255,0,0)','rgb(0,255,255)']  | Array of 2 rgb colors used to create the linear gradient
gradientDirection| [170,0,0,0]  | The direction of the linear gradient
logo             | null        | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize         | 20% of size | Size of the imprinted logo. Bigger logo equals less error correction in QR code
logoBackgroundColor | 'transparent' | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin       | 2           | Logo distance to it's wrapper
logoBorderRadius | 0           | Border-radius of logo image (Android isn't supported)
quietZone        | 0            | Quiet zone around the qr in pixels (Useful when saving image to gallery)
getRef          | null         | Get SVG ref for further usage
ecl             | 'M'          | Error correction level



Prop            | Type    
----------------|------------
sizeQRCode      | number        
jsonObject      | object     
colorQrCode     | string    
onError(error)  | Function  
backgroundColorQRCode | string 
enableLinearGradient | boolean    
linearGradient  |  string []
gradientDirection| string []  
logo             | ImageSourcePropType        
logoSize         | number 
logoBackgroundColor | string 
logoMargin       | number           
logoBorderRadius | number           
quietZone        | number           
getRef(c: any) => any | Function         
ecl             | 'L' or 'M' or 'Q' or 'H'



#### ScanQRCode

Name            | Default    | Description
----------------|------------|--------------
onQRCodeScanned(object) | -     | Will call this specified method when a QR code is detected in the camera.
vibrateAfterScan      | false    | Vibrate after Scanned QR
reactivateCamera      | true      |  Will reactivate the scanning ability of the component. 
reactivateScanTimeout | 0       | Use this to configure how long it should take (in milliseconds) before the ScanQRCode should reactivate.
fadeImageIn           | true       | When set to true this ensures that the camera view fades in after the initial load up instead of being rendered immediately. Set this to false to prevent the animated fade in of the camera view.
showScanMarker        | false        | Use this to show marker on the camera scanning window.
cameraType            | 'back'  | Use this to control which camera to use for scanning QR codes.(propType: ['front', 'back'])
customMarker          |  -       | Pass a RN element/component to use it as a custom marker.
containerStyle        |  -       | Use this to pass styling for the outermost container.
cameraStyle           |  -       | Use this to pass or overwrite styling for the camera window rendered.
cameraContainerStyle  |  -       | Use this to pass or overwrite styling for the camera container (view) window rendered.
markerStyle           |  -       | Use this to add custom styling to the default marker.
topViewStyle        |  -       | Use this to pass or overwrite styling for the '<View>' that contains the topContent prop.
bottomViewStyle       |  -      | Use this to pass or overwrite styling for the '<View>' that contains the bottomContent prop.
topContent        |  -       | Use this to render any additional content at the top of the camera view.(propType: oneOfType([ PropTypes.element, PropTypes.string, ]))
bottomContent        |  -       | Use this to render any additional content at the bottom of the camera view.(propType: oneOfType([ PropTypes.element, PropTypes.string, ]))
notAuthorizedView        |  -       | Pass a RN element/component to use it when no permissions given to a camera (only IOS).
permissionDialogTitle  |  'Permission'     | Use this to set permission dialog title (only Android).(propType: string)
permissionDialogMessage |  'Requires camera permission to scan' | Use this to set permission dialog message (only Android).(propType: string)
buttonPositive        |  'OK'   | Use this to set permission dialog button text (only Android).(propType: string)
checkAndroid6Permissions |  false    | Use this to enable permission checking on Android 6.
lightMode             | RNCamera.Constants.FlashMode.off  | Part of the react-native-camera package [react-native-camera/flashMode](https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md#flashmode):RNCamera.Constants.FlashMode.off (turns it off) / RNCamera.Constants.FlashMode.on(means camera will use flash in all photos taken) / RNCamera.Constants.FlashMode.auto(leaves your phone to decide when to use flash when taking photos, based on the lightning conditions that the camera observes) / RNCamera.Constants.FlashMode.torch(turns on torch mode, meaning the flash light will be turned on all the time (even before taking photo) just like a flashlight).
onError(error: Error) | 'this is handling errors that occurred during scanning'  | Callback fired when exception happened during the scanning process
cameraScanTimeout     | 0       | Use this to configure how long it should take (in milliseconds) before the ScanQRCode should be displayed. After that the camera will be inactive and press the view to reactivate it. 
cameraProps |  -    | Properties to be passed to the Camera component.(prop type: object)
cameraTimeoutView |    -    | Pass an RN element/component to show it when the camera is inactive for cameraScanTimeout (another prop) milliseconds. If the cameraScanTimeout is 0 or not specified, this prop will never be used.



Prop            | Type    
----------------|------------
onQRCodeScanned(json: object) => void | Function
vibrateAfterScan      | boolean
reactivateCamera      | boolean 
reactivateScanTimeout | number    
fadeImageIn           | boolean 
showScanMarker        | boolean
cameraType            | 'front' | 'back'
customMarker          |  JSX.Element    
containerStyle        |  StyleProp<ViewStyle>    
cameraStyle           |  StyleProp<ViewStyle>        
cameraContainerStyle  |  StyleProp<ViewStyle>        
markerStyle           |  StyleProp<ViewStyle>        
topViewStyle          |  StyleProp<ViewStyle>           
bottomViewStyle       |  StyleProp<ViewStyle>        
topContent            |  JSX.Element or string
bottomContent         |  JSX.Element or string    
notAuthorizedView     |  JSX.Element
permissionDialogTitle |  string
permissionDialogMessage | string
buttonPositive        |  string   
checkAndroid6Permissions | boolean
lightMode             | RNCamera.Constants.FlashMode.off or RNCamera.Constants.FlashMode.on or RNCamera.Constants.FlashMode.auto or RNCamera.Constants.FlashMode.torch
onError(error: undefined) => void | Function
cameraScanTimeout     | number       
cameraProps       |  RNCameraProps    
cameraTimeoutView |    JSX.Element