102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import React, { useState, useEffect, useRef } from "react";
|
|
import { Text, View, TouchableOpacity } from "react-native";
|
|
import { Camera } from "expo-camera";
|
|
import {
|
|
Ionicons,
|
|
FontAwesome,
|
|
MaterialCommunityIcons,
|
|
} from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
export default function ScreenCamera() {
|
|
const navigation = useNavigation();
|
|
const [hasPermission, setHasPermission] = useState(null);
|
|
const [type, setType] = useState(Camera.Constants.Type.back);
|
|
const cameraRef = useRef(null);
|
|
useEffect(() => {
|
|
(async () => {
|
|
const { status } = await Camera.requestPermissionsAsync();
|
|
setHasPermission(status === "granted");
|
|
})();
|
|
}, []);
|
|
|
|
const handleCameraType = () => {
|
|
setType(
|
|
type === Camera.Constants.Type.back
|
|
? Camera.Constants.Type.front
|
|
: Camera.Constants.Type.back
|
|
);
|
|
};
|
|
|
|
const handleTakePicture = async () => {
|
|
console.log("Taking the picture!");
|
|
if (cameraRef.current) {
|
|
let photo = await cameraRef.current.takePictureAsync();
|
|
console.log("The Photo", photo);
|
|
}
|
|
};
|
|
|
|
if (hasPermission === null) {
|
|
return <View />;
|
|
}
|
|
if (hasPermission === false) {
|
|
return <Text>No access to camera</Text>;
|
|
}
|
|
return (
|
|
<View style={{ display: "flex", flex: 1 }}>
|
|
<Camera style={{ flex: 1 }} type={type} ref={cameraRef}>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
margin: 20,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={handleCameraType}
|
|
style={{
|
|
alignSelf: "flex-end",
|
|
alignItems: "center",
|
|
backgroundColor: "transparent",
|
|
}}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name="camera-switch"
|
|
style={{ color: "#fff", fontSize: 40 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={handleTakePicture}
|
|
style={{
|
|
alignSelf: "flex-end",
|
|
alignItems: "center",
|
|
backgroundColor: "transparent",
|
|
}}
|
|
>
|
|
<FontAwesome
|
|
name="camera"
|
|
style={{ color: "#fff", fontSize: 40 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
navigation.push("MediaCache");
|
|
}}
|
|
style={{
|
|
alignSelf: "flex-end",
|
|
alignItems: "center",
|
|
backgroundColor: "transparent",
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name="ios-photos"
|
|
style={{ color: "#fff", fontSize: 40 }}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Camera>
|
|
</View>
|
|
);
|
|
}
|