111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import { CameraView, useCameraPermissions } from 'expo-camera';
|
|
import { useRef, useState } from 'react';
|
|
import { Button, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
export default function App() {
|
|
const [permission, requestPermission] = useCameraPermissions();
|
|
const [photo, setPhoto] = useState('');
|
|
const cameraRef = useRef<CameraView>(null);
|
|
|
|
async function _takePhoto() {
|
|
if (cameraRef.current) {
|
|
const pic = await cameraRef.current.takePictureAsync()
|
|
setPhoto(pic.base64 || '');
|
|
console.log(pic.base64);
|
|
}
|
|
}
|
|
|
|
async function sendData() {
|
|
const response = await fetch("localhost:3000/api/v1/posts", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
userID: '6883ddb2640ebaa1a12e3791',
|
|
date: new Date(),
|
|
photo: photo,
|
|
notes: '3333 W Smoochie St'
|
|
}),
|
|
}).then(() => {console.log(response)});
|
|
}
|
|
|
|
if (!permission) {
|
|
// Camera permissions are still loading.
|
|
return <View />;
|
|
}
|
|
|
|
if (!permission.granted) {
|
|
// Camera permissions are not granted yet.
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.message}>We need your permission to show the camera</Text>
|
|
<Button onPress={requestPermission} title="grant permission" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{photo ? (
|
|
<View style={styles.cameraContainer}>
|
|
<Image source={{ uri: photo }} style={styles.camera} />
|
|
<View style={styles.buttonContainer}>
|
|
<TouchableOpacity style={styles.button} onPress={() => setPhoto('')}>
|
|
<Text style={styles.text}>Retake</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.button} onPress={sendData}>
|
|
<Text style={styles.text}>Continue</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<>
|
|
<View style={styles.cameraContainer}>
|
|
<CameraView style={styles.camera} facing={'back'} ref={cameraRef}>
|
|
</CameraView>
|
|
</View>
|
|
<View style={styles.buttonContainer}>
|
|
<TouchableOpacity style={styles.button} onPress={_takePhoto}>
|
|
<Text style={styles.text}>Take Photo</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</>)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#25292e',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 25,
|
|
paddingVertical: 200
|
|
},
|
|
cameraContainer: {
|
|
flex: 1,
|
|
},
|
|
message: {
|
|
textAlign: 'center',
|
|
paddingBottom: 10,
|
|
},
|
|
camera: {
|
|
flex: 1,
|
|
},
|
|
buttonContainer: {
|
|
flex: 0.2,
|
|
flexDirection: 'row',
|
|
backgroundColor: 'orange',
|
|
marginTop: 15,
|
|
borderRadius: 5,
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
alignSelf: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
text: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: 'white',
|
|
},
|
|
});
|