A Camera component for React Native. Also supports barcode scanning!
Branch: master
Clone or download
Pull request Compare This branch is 6 commits ahead, 97 commits behind react-native-community:master.
Latest commit c6c8f95 Nov 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
Example Removed useless code Nov 2, 2018
android Support Dynamsoft Barcode Reader Nov 1, 2018
docs
ios
postinstall_project
src
types
.eslintrc chore(update): update package.json packages (react-native-community#1739 Aug 24, 2018
.flowconfig
.gitattributes
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
THIRD-PARTY-LICENSES
changelog.js
circle.yml
commitlint.config.js
package.json
react-native-camera.podspec update CocoaPod subspecs versions Oct 20, 2018
yarn-error.log
yarn.lock

README.md

React Native Camera with Dynamsoft Barcode Reader

The project based on react-native-camera supports Dynamsoft Barcode Reader for Android.

Usage

Install react-native-camera:

npm install react-native-camera --save
react-native link react-native-camera

Overwrite node_modules/react-native-camera with the project.

Write the code in App.js:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Dimensions } from 'react-native';

import { RNCamera } from 'react-native-camera';

export default class App extends Component {
	constructor() {
		super();
		this.state = {
			barcodeResult: 'No barcode detected.'
		};
	}

	render() {
		return (
			<RNCamera
				ref={(ref) => {
					this.camera = ref;
				}}
				style={styles.preview}
				type={RNCamera.Constants.Type.back}
				flashMode={RNCamera.Constants.FlashMode.on}
				permissionDialogTitle={'Permission to use camera'}
        permissionDialogMessage={'We need your permission to use your camera phone'}
        onDynamsoftVisionBarcodesDetected={({ barcodes }) => {

				  if (barcodes) {
            if (barcodes.length == 0) {
              this.setState({barcodeResult: 'No barcode detected.'})
            }
            else {
              let text = '';
              for (let i in barcodes) {
                let type = barcodes[i]['type'];
                let data = barcodes[i]['data'];
                text += 'Type: ' + type + ', Value: ' + data;
              }
              this.setState({barcodeResult: text})
            }
				  }
				  else {
				    this.setState({barcodeResult: 'No barcode detected.'})
				  }

        }}
			>
				<View style={styles.textBg}>
					<Text style={styles.scanText}>{this.state.barcodeResult}</Text>
				</View>
			</RNCamera>
		);
	}
}

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
	textBg: {
		width: deviceWidth,
		height: 100,
		marginTop: deviceHeight - 100
	},
	preview: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	scanText: {
		color: 'white',
    textAlign: 'center',
    fontSize: 20
	}
});

react native camera with Dynamsoft Barcode Reader