React native camera view for android. Enabling you to take pictures directly on camera view, controlling flash light of the device, and also reading barcode from camera.
npm install react-native-camera-android###A react native camera component inspired by
#####https://github.com/lwansbrough/react-native-camera
#####https://github.com/ideacreation/react-native-barcodescanner

``bash`
npm i --save react-native-camera-android
* In android/setting.gradle
`gradle`
...
include ':ReactNativeCameraAndroid', ':app'
project(':ReactNativeCameraAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera-android/android')
* In android/app/build.gradle
``
dependencies {
...
...
compile project(':react-native-camera-android')
}
* register module (in MainActivity.java)
`java
import com.ReactCamera.RNCameraViewPackage; // <--- import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new RNCameraViewPackage()) // <------ add here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}
`
javascript
var Camera = require('react-native-camera-android');var Example = React.createClass({
render() {
return (
ref="cam" // the reference of your camera view
type={"back"} // the type of your camera
autoFocus={true}
torchMode={"off"} // flashlight settings of your camera
viewFinderDisplay={true} // set it to true if you want to scan barcodes
onBarCodeRead={this._barcodeReceived}
onPictureTaken={this._onPictureTaken}
/>
);
}
_takePicture() {
this.refs.cam.takePicture();
}
_barcodeReceived(event) {
console.log('Barcode: ' + e.data);
console.log('Type: ' + e.type);
}
_onPictureTaken(event) {
if(event.type !== 'error') {
console.log("file://" + event.message)
}
}
});
`Usage
All you need is to
require the react-native-camera-android module and then use the
tag.Actions
####
takePicture1. First add refs tag to your camera:
2. Then call the function this.refs.cam.takePicture() anywhere you like.Properties
####
onPictureTakenAfter the picture is taken, the
component will return an event to onPictureTaken, which contains following data payloads.onPictureTaken = function(event) {} 1.
type: success or error
2. message: the result of the callback####
onBarCodeReadWill call the specified method when a barcode is detected in the camera's view.
Event contains
data (barcode value) and type (barcode type).
The following barcode types can be recognised:`java
BarcodeFormat.UPC_A
BarcodeFormat.UPC_E
BarcodeFormat.EAN_13
BarcodeFormat.EAN_8
BarcodeFormat.RSS_14
BarcodeFormat.CODE_39
BarcodeFormat.CODE_93
BarcodeFormat.CODE_128
BarcodeFormat.ITF
BarcodeFormat.CODABAR
BarcodeFormat.QR_CODE
BarcodeFormat.DATA_MATRIX
BarcodeFormat.PDF_417
`####
torchModeValues:
on,
off (default)Use the
torchMode property to specify the camera torch mode.####
typeValues:
back (default),
frontUse the
type property to specify the camera to use. If you specify the front camera, but the device has no front camera the back camera is used.$3
The following properties can be used to style the viewfinder:
viewFinderBackgroundColor,
viewFinderBorderColor,
viewFinderBorderWidth,
viewFinderBorderLength,
viewFinderDrawLaser,
viewFinderLaserColorAll color values are strings and must be specified as
#AARRGGBB (alpha, red, green, blue). viewFinderBorderWidth and viewFinderBorderLength are numbers, viewFinderDrawLaser is either true or false` (default).