Here is an example of basic usage:
`js
'use strict';

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
Linking,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';

class ScanScreen extends Component {
onSuccess(e) {
Linking
.openURL(e.data)
.catch(err => console.error('An error occured', err));
}

render() {
return (
onRead={this.onSuccess.bind(this)}
topContent={

Go to wikipedia.org/wiki/QR_code on your computer and scan the QR code.

}
bottomContent={

OK. Got it!

}
/>
);
}
}

const styles = StyleSheet.create({
centerText: {
flex: 1,
fontSize: 18,
padding: 32,
color: '#777',
},
textBold: {
fontWeight: '500',
color: '#000',
},
buttonText: {
fontSize: 21,
color: 'rgb(0,122,255)',
},
buttonTouchable: {
padding: 16,
},
});

AppRegistry.registerComponent('default', () => ScanScreen);
`

Screenshot of the above:

!screenshot 2017-05-02 15 06 33


Please open an issue if something doesn't work or is not clear enough.

Methods

#### reactivate()

Call this method to programmatically enabling scanning again. Use this by attaching a ref like so { this.scanner = node }}> and calling this.scanner.reactivate()

Props

#### onRead (required)
propType: func.isRequired
default: (e) => (console.log('QR code scanned!', e))

Will call this specified method when a QR code or a barcode is detected in the camera's view passing in the event emitted upon reading the code.

#### fadeIn
propType: bool
default: 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.

#### reactivate
propType: bool
default: false

When set to false, when a QR code is scanned, the QRCodeScanner will not scan another code until it is re-rendered.
When set to true this will reactivate the scanning ability of the component.

#### reactivateTimeout
propType: number
default: 0

Use this to configure how long it should take before the QRCodeScanner should reactivate.

#### topContent
propType: oneOfType([
PropTypes.element,
PropTypes.string,
])

Use this to render any additional content at the top of the camera view.

#### bottomContent
propType: oneOfType([
PropTypes.element,
PropTypes.string,
])

Use this to render any additional content at the bottom of the camera view.

#### containerStyle
propType: any

Use this to pass styling for the outermost container. Useful for adding margin/padding to account for navigation bar.

#### cameraStyle
propType: any

Use this to pass or overwrite styling for the camera window rendered.

#### topViewStyle
propType: any

Use this to pass or overwrite styling for the that contains the topContent prop.

#### bottomViewStyle
propType: any

Use this to pass or overwrite styling for the that contains the bottomContent prop.

#### showMarker
propType: boolean
default: false

Use this to show marker on the camera scanning window

#### customMarker
propType: element

Pass a RN element/component to use it as a custom marker.

#### notAuthorizedView
propType: element

Pass a RN element/component to use it when no permissions given to the camera (iOS only).

#### cameraType
propType: oneOf(['front', 'back'])
default: 'back'

Use this to control which camera to use for scanning QR codes, defaults to rear camera.

#### checkAndroid6Permissions
propType: bool
default: false

Use this to enable permission checking on Android 6

#### permissionDialogTitle
propType: string
default: 'Info'

Use this to setting permission dialog title (Android only).

#### permissionDialogMessage
propType: string
default: 'Need camera permission'`

Use this to setting permission dialog message (Android only).

Contributors

License

Thanks

This QR code scanner was inspired by the QR code scanner within Whatsapp.

Other notes

$3