I'm having an issue where I can successfully take a picture with a preview, but it's not saving to the gallery.
Even after adding
MediaLibrary.createAssetAsync, the image preview doesn't show up and the picture still isn't saved locally.
I've been struggling with this problem for days now. Any tips or hints would be greatly appreciated.
//imports
import { Camera } from "expo-camera";
import * as MediaLibrary from 'expo-media-library';
import * as Permissions from 'expo-permissions';
// useState
const [hasPermission, setHasPermission] = useState(null);
const [rollPermision, setRollPermission] = useState(null);
// useEffect and ref to the camera
const cameraRef = useRef();
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
// camera roll
const { cam_roll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
setRollPermission(cam_roll === "granted");
setRollPermission(true);
})();
}, []);
// shutter button function to take picture
const takePicture = async () => {
if (cameraRef.current) {
const options = { quality: 0.5, base64: true, skipProcessing: true };
const data = await cameraRef.current.takePictureAsync(options);
//camera roll (saving picture)
const asset = await MediaLibrary.createAssetAsync(data);
const source = asset.uri;
if (source) {
await cameraRef.current.pausePreview();
setIsPreview(true);
console.log("picture source", source);
}
}
};
//if statement if it hit an error
if (hasPermission === null || rollPermision === null) {
return <View />;
}
if (hasPermission === false || rollPermision === false) {
return <Text style={styles.text}>No access to camera</Text>;
}