[React Native][expo-camera] Corrupt base64 saved image on Android

Question

I use React Native and Expo to develop an application on mobile and tablet. I need to be able to take a photo and save it to my local SQLite database. I manage to take my photo and save it, then display it on a page. I use expo-camera .

Everything is fine in IOS. However, the image is corrupted on Android . My images are saved in base64. I add two links leading to the result on android and on IOS.

IOS version Android version

The conversion to base64 takes place at the end of this extract in __takePicture :

    const [startCamera, setStartCamera] = useState(false);
    const [photo, setPhoto] = useState(null);
    const [zoom, setZoom] = useState(0);
    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(CameraType.back);
    const [camera, setCamera] = useState(null);

    useEffect(() => {
     (async () => {
        const { status } = await Camera.requestCameraPermissionsAsync();
        setHasPermission(status === 'granted');
      })();
    }, []);

    useEffect(() => {
        __startCamera(props.startCamera);
    }), [startCamera, props.startCamera];

    const __startCamera = async (props) => {
        const { status } = await Camera.requestCameraPermissionsAsync();
        if (status === "granted") {
            setStartCamera(props);
        } else {
            Alert.alert("Action impossible", "Demande d'accès");
        }
    };

    const __takePicture = async () => {
        if (!camera) return;
        const photo = await camera.takePictureAsync({ base64: true });

        setPhoto(photo);

        const manipResult = await manipulateAsync(photo.uri, [], {
            compress: 0,
            format: SaveFormat.JPEG,
            base64: true,
        });

        setPhoto(manipResult);
    };

Picture display:

<Image
    source={{ uri: photo.uri }}
    resizeMode="cover"
    style={{
        width: "80%",
        height: "80%",
        backgroundColor: "black",
        borderWidth: 5,
        borderRadius: 10,
    }}
/>

Do you know where the problem comes from? Thank you for your time.

Answer 1

Answer provided by Timotius from the Discord Reactiflux server which worked for me: change compress: 0 to compress: 1

Another element that he brings back from their documentation which may prove useful: "SaveFormat.PNG compression is lossless but slower, SaveFormat.JPEG is faster but the image has visible artifacts. Defaults to SaveFormat.JPEG"