Showing local Image save with FileSystem onto a Canvas (react native)

Please provide the following:

  1. SDK Version: 3.21.13
  2. Platforms(Android/iOS/web/all): All (testing on Android)

This question may be more relevant somewhere else, but I am trying to display on a react-native-canvas a file that is being saved into the local file system from the web (using createDownloadResumable). The code below works fine if I use the URL (https://), but it fails to load silently if I try to substitute image.src = url by image.src = uri (file:///).

I considered converting the image to base64 and render it as data, but this would be too large (>250 Kb) from what I can read.

This is the closest I have come to a solution, which suggests that it can work from local files. What would be the equivalent in Expo?

import * as FileSystem from 'expo-file-system';
import React, { useRef, useEffect } from 'react';
import Canvas, { Image } from 'react-native-canvas';
import { View } from 'react-native';

export default function Test(props) {
    const canvasRef = useRef(null);

    useEffect(() => {

        const canvasObj = canvasRef.current;
        const ctx = canvasObj.getContext('2d');
        canvasObj.width = 320;
        canvasObj.height = 320;


        let url = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Catedral_de_Mar%C3%ADa_Reina_del_Mundo%2C_Montreal%2C_Canad%C3%A1%2C_2017-08-12%2C_DD_61-63_HDR.jpg/1280px-Catedral_de_Mar%C3%ADa_Reina_del_Mundo%2C_Montreal%2C_Canad%C3%A1%2C_2017-08-12%2C_DD_61-63_HDR.jpg";

        let localSRC = FileSystem.cacheDirectory + 
            Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) +
            '.jpg';

        (async () => {

            const downloadResumable = FileSystem.createDownloadResumable(
                url, localSRC, {}, downloadProgress => {
                    const progress = downloadProgress.totalBytesWritten / downloadProgress.totalBytesExpectedToWrite;
                }
            );

            const { uri } = await downloadResumable.downloadAsync();

            const image = new Image(canvasObj);
            // uri = 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540user%252Fappname/g0ibtcg4zag2kcxoxvozr9.jpg';
            /* THIS IS NOT WORKING WITH URI (file:///) BUT IT DOES WITH URL (https://) */
            image.src = url;
            console.log(uri);
            console.log(url);
            image.addEventListener('load', () => {
                ctx.drawImage(image, 0, 0, 320, 320);
                console.log("made it here");
            });
        })();

    });

    return (
        <View style={{ flex: 1 }}>
            <Canvas ref={canvasRef} />
        </View>
    )
}


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.