react native camera example

1import React, { PureComponent } from 'react';
2import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
3import { RNCamera } from 'react-native-camera';
4
5class ExampleApp extends PureComponent {
6  render() {
7    return (
8      <View style={styles.container}>
9        <RNCamera
10          ref={ref => {
11            this.camera = ref;
12          }}
13          style={styles.preview}
14          type={RNCamera.Constants.Type.back}
15          flashMode={RNCamera.Constants.FlashMode.on}
16          androidCameraPermissionOptions={{
17            title: 'Permission to use camera',
18            message: 'We need your permission to use your camera',
19            buttonPositive: 'Ok',
20            buttonNegative: 'Cancel',
21          }}
22          androidRecordAudioPermissionOptions={{
23            title: 'Permission to use audio recording',
24            message: 'We need your permission to use your audio',
25            buttonPositive: 'Ok',
26            buttonNegative: 'Cancel',
27          }}
28          onGoogleVisionBarcodesDetected={({ barcodes }) => {
29            console.log(barcodes);
30          }}
31        />
32        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
33          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
34            <Text style={{ fontSize: 14 }}> SNAP </Text>
35          </TouchableOpacity>
36        </View>
37      </View>
38    );
39  }
40
41  takePicture = async() => {
42    if (this.camera) {
43      const options = { quality: 0.5, base64: true };
44      const data = await this.camera.takePictureAsync(options);
45      console.log(data.uri);
46    }
47  };
48}
49
50const styles = StyleSheet.create({
51  container: {
52    flex: 1,
53    flexDirection: 'column',
54    backgroundColor: 'black',
55  },
56  preview: {
57    flex: 1,
58    justifyContent: 'flex-end',
59    alignItems: 'center',
60  },
61  capture: {
62    flex: 0,
63    backgroundColor: '#fff',
64    borderRadius: 5,
65    padding: 15,
66    paddingHorizontal: 20,
67    alignSelf: 'center',
68    margin: 20,
69  },
70});
71
72AppRegistry.registerComponent('App', () => ExampleApp);

1  <uses-permission android:name="android.permission.CAMERA" />

1import React, { Component } from 'react'
2import { StyleSheet, View, Alert } from 'react-native'
3import { RNCamera } from 'react-native-camera'
4