import React, { useEffect, useRef, useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Platform } from 'react-native';
import { Camera } from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
const App = () => {
const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
const [recordingStatus, setRecordingStatus] = useState(false);
const cameraRef = useRef(null);
useEffect(() => {
(async () => {
const { status:camera } = await Camera.requestCameraPermissionsAsync();
if (camera !== 'granted') {
alert('Camera permission not granted');
}
const { status:audio } = await Camera.requestMicrophonePermissionsAsync();
if (audio !== 'granted') {
alert('audio permission not granted');
}
})();
}, []);
const flipCamera = () => {
setCameraType(
cameraType === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
};
const takePhoto = async () => {
if (cameraRef.current) {
const photo = await cameraRef.current.takePictureAsync();
if (Platform.OS === 'android' || Platform.OS === 'ios') {
await MediaLibrary.saveToLibraryAsync(photo.uri);
} else {
console.log('Saving to library not supported on this platform.');
}
}
};
const startRecording = async () => {
setRecordingStatus(true);
if (cameraRef.current) {
const video = await cameraRef.current.recordAsync();
if (Platform.OS === 'android' || Platform.OS === 'ios') {
await MediaLibrary.saveToLibraryAsync(video.uri);
} else {
console.warn('Saving to library not supported on this platform.');
}
}
};
const stopRecording = async () => {
setRecordingStatus(false);
if (cameraRef.current) {
cameraRef.current.stopRecording();
}
};
return (
<View style={styles.container}>
<Camera style={styles.camera} type={cameraType} ref={cameraRef} />
<View style={styles.controls}>
<TouchableOpacity style={styles.button} onPress={flipCamera}>
<Text style={styles.buttonText}>Flip</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={takePhoto}>
<Text style={styles.buttonText}>Photo</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.button,
{ backgroundColor: recordingStatus ? 'red' : '#DDDDDD' },
]}
onPress={() => (recordingStatus ? stopRecording() : startRecording())}
>
<Text style={styles.buttonText}>
{recordingStatus ? 'Stop Recording' : 'Start Recording'}
</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 0.9,
},
controls: {
flex: 0.1,
flexDirection: 'row',
backgroundColor: 'grey',
justifyContent: 'space-around',
alignItems: 'center',
},
button: {
alignItems: 'center',
padding: 15,
margin: 5,
},
buttonText: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default App;
NEW ENTRIES