Local images not being displayed on iOS

luizaugustoventura commented 2 years ago

Description

As you guys probably know, there was a problem previously with this library not rendering local images on Android. Now, I'm facing the exact same issue on iOS, with a difference that I can use static images like assets/src/assets/images/logo.png. But when the images start with something like file:///, storage://, ph:// it simply does not get rendered.

Whtat I'm doing is trying to generate a PDF report file, the static image is the logo of the company and the local image which is not being rendered is an image saved to the phone's storage with either Image Picker or Camera Roll. The React Native Image component displays the image perfectly, so I don't think I'm using the wrong path.

What have I tried so far?

Removing the file:/// or storage:// or ph:// from the begining of the path string;
In some cases, when I save the remote image with Camera Roll, it will return a path that starts with ph:// without an extension. I tried to put the extension manually, and still does not make any difference;
I tried to convert the image to base64 using rn-fetch-blob (with RNFetchBlob.fs.base64.encode(path)), but still no success.

Devices

iPhone SE with iOS 14 (also simulator iPhone 11 with iOS 15)
MacBook Air 2017 Core i5 1.8GHz and 8gb RAM (macOS Big Sur 11.5.2)

Environment

node: 12.22.7 npm: 6.14.15 react: 16.9.0 react-native: 0.61.5 react-native-html-to-pdf: ^0.11.0

luizaugustoventura commented 2 years ago

Update with solution

Alright guys, after a long time of research, me and a colleague got to a solution which may not be the best but does what we expected.

First of all, one thing that was discovered is that we have to divide the problem in two, because we actually had two problems.

Images from react-native-image-picker: After a long time trying to find the problem which was preventing the local images from getting rendered, I tried updating the library to version 4.7.3 (latest version at that day) and did a number of required changes to the code, as the version we were using was considerably aged. Well, it happened to work out for my surprise, even with the response uri's format not being changed;
Images from @react-native-community/cameraroll: This one was a bit more complicated. It took me some time to realize that the iOS' PHAsset was not supported in the WebView or react-native-html-to-pdf (which uses WebView in background). So, after some research, me and my colleague found a workaround that lead us to a relatively easy solution. Basically we used react-native-fs to copy the PHAsset media file to a temporary directory, which would return a uri that started with file:// and could be rendered by WebView. That's the code we used to do this:

    export default function getImageNameFromUrl(imageUrl = "") {
        if (imageUrl) {
            const splittedImageUrl = imageUrl.split('/');
            return splittedImageUrl.pop();
        }
        return null;
    };

    export default async function copyAssetsFileIOSAndReturnURI(remoteURL = '', localURI = '') {
        try {
            if (remoteURL && localURI) {
                const imageName = getImageNameFromUrl(remoteURL);
                const imgPath = await RNFS.copyAssetsFileIOS(localURI, RNFS.TemporaryDirectoryPath+imageName, 0, 0);

                return imgPath;
            }
            return null;
        } catch (err) {
            console.log(err);

            return null;
        }
    }

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

christopherdro / react-native-html-to-pdf