import React, { useEffect, useState, useRef } from 'react';
import { View, Text, ActivityIndicator, PermissionsAndroid, Platform, Button, Linking, StyleSheet } from 'react-native';
import { Camera, useCameraDevice } from 'react-native-vision-camera';
export default function CameraReels() {
const cameraRef = useRef<Camera>(null);
const [showCamera, setShowCamera] = useState(false);
const [cameraPosition, setCameraPosition] = useState<'front' | 'back'>('back');
const device = useCameraDevice(cameraPosition);
const [permissionDenied, setPermissionDenied] = useState(false);
// Request Android Permissions
const requestAndroidCameraPermission = async () => {
try {
const cameraGranted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: 'Camera Permission',
message: 'App needs access to your camera',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
}
);
const audioGranted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
{
title: 'Microphone Permission',
message: 'App needs access to your microphone',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
}
);
return cameraGranted === PermissionsAndroid.RESULTS.GRANTED && audioGranted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn(err);
return false;
}
};
useEffect(() => {
const requestPermissions = async () => {
console.log('Requesting camera permission...');
if (Platform.OS === 'android') {
const granted = await requestAndroidCameraPermission();
if (granted) {
console.log('Android camera permission granted');
setTimeout(() => setShowCamera(true), 3000);
} else {
console.log('Android permission denied');
setPermissionDenied(true);
}
} else {
const status = await Camera.requestCameraPermission();
if (status === 'authorized') {
console.log('iOS camera permission granted');
setTimeout(() => setShowCamera(true), 3000);
} else {
console.log('iOS permission denied');
setPermissionDenied(true);
}
}
};
requestPermissions();
}, []);
// Handle permission denied case
if (permissionDenied) {
return (
<View style={styles.centered}>
<Text style={{ marginBottom: 10 }}>Camera permission is required to use this feature.</Text>
<Button title="Open Settings" onPress={() => Linking.openSettings()} />
</View>
);
}
// Show loading before camera appears
if (!showCamera || device == null) {
return (
<View style={styles.centered}>
<Text>Loading Camera...</Text>
<ActivityIndicator size="large" />
</View>
);
}
// Render camera
return (
<View style={{ flex: 1 }}>
<Camera
ref={cameraRef}
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
photo={true}
video={true}
audio={true}
/>
</View>
);
}
const styles = StyleSheet.create({
centered: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
