-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
68 lines (63 loc) · 2.08 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity, Button } from 'react-native';
import { Camera } from 'expo-camera';
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const [flash, setFlash] = useState('off');
const [autoFocus, setAutoFocus] = useState('off');
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
console.log(Camera.Constants.AutoFocus);
const toggleFlash = () => setFlash(flash === 'off' ? 'torch' : 'off');
const toggleAutoFocus = () => setAutoFocus(autoFocus === 'off' ? 'on' : 'off');
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1, justifyContent: 'flex-start' }}>
<Camera style={{ height: 300 }} type={type} flashMode={flash} autoFocus={autoFocus}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
<View style={{
alignItems: 'center',
justifyContent: 'space-evenly',
backgroundColor: '#aaa',
marginTop: 30,
height: 500
}
}>
<Button onPress={toggleFlash} title="Toggle flash" />
<Button onPress={toggleAutoFocus} title="Toggle auto-focus" />
</View>
</View>
);
}