1import React, { useState, useEffect } from 'react';
2import { Text, View, TouchableOpacity } from 'react-native';
3import { Camera } from 'expo-camera';
4
5export default function App() {
6  const [hasPermission, setHasPermission] = useState(null);
7  const [type, setType] = useState(Camera.Constants.Type.back);
8
9  useEffect(() => {
10    (async () => {
11      const { status } = await Camera.requestPermissionsAsync();
12      setHasPermission(status === 'granted');
13    })();
14  }, []);
15
16  if (hasPermission === null) {
17    return <View />;
18  }
19  if (hasPermission === false) {
20    return <Text>No access to camera</Text>;
21  }
22  return (
23    <View style={{ flex: 1 }}>
24      <Camera style={{ flex: 1 }} type={type}>
25        <View
26          style={{
27            flex: 1,
28            backgroundColor: 'transparent',
29            flexDirection: 'row',
30          }}>
31          <TouchableOpacity
32            style={{
33              flex: 0.1,
34              alignSelf: 'flex-end',
35              alignItems: 'center',
36            }}
37            onPress={() => {
38              setType(
39                type === Camera.Constants.Type.back
40                  ? Camera.Constants.Type.front
41                  : Camera.Constants.Type.back
42              );
43            }}>
44            <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
45          </TouchableOpacity>
46        </View>
47      </Camera>
48    </View>
49  );
50}
51

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);

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