React Native Expo Media Library “This file type is not supported yet” for PNG and JPG

Expo SDK
1
  1. SDK Version: 40
  2. Platforms(Android/iOS/web/all): Android / iOS

Im working on React Native - Expo App and i can’t successfully create assets for images on iOS using the MediaLibrary and I get the error: “This file type is not supported yet” This works perfectly fine for Android.

The code is pretty straightforward, I pass an array of Files witch are images (JPG or PNG) both theoretically supported in iOS and Android. I download all the files from the uri given with FileSystem.downloadAsync, this works fine, then I pass the downloaded files local Uris to the saving function where I create the assets in order to move them to a specific gallery album. I repeat this works just fine in Android, buy in iOS when I resolve the assetsPromises I get in every image the error “This file type is not supported yet”. I have the status == ‘granted’ for MEDIA_LIBRARY permissions

the code is:

export type FileForDownload = {
    uri: string;
    fileName: string;
    fileExtension: string;
};

export const downloadArrayFiles = async (files: Array<FileForDownload>) => {
    const { notificationToken, mediaLibrary, notifications } = store.getState().permissions;
    if (notifications && notificationToken) sendPushNotification(notificationToken, 'Archivos', 'Descargando...');
    if (mediaLibrary) {
        const downloadFilesPromise = [];
        files.forEach(({ uri, fileName, fileExtension }) => {
            const fileFormated = fileName.replace(/ /g,"_").normalize("NFD").replace(/[\u0300-\u036f]/g, "");
            downloadFilesPromise.push(
                FileSystem.downloadAsync(uri, FileSystem.documentDirectory + fileFormated + fileExtension, {
                    md5: true,
                }),
            );
        });
        const promises = downloadFilesPromise.map(p => p.catch(e => e));
        Promise.all(promises)
            .then(result => {
                const fileUris = result.map(res => res.uri);
                if (saveArrayFilesAsync(fileUris)) {
                    if (notifications && notificationToken) sendPushNotification(notificationToken, 'Archivos', 'Descarga completada!');
                } else {
                    if (notifications && notificationToken) sendPushNotification(notificationToken, 'Archivos', 'Error en la descarga');
                }
            })
            .catch(error => {
                console.error(error);
                if (notifications && notificationToken) sendPushNotification(notificationToken, 'Archivos', 'Error en la descarga');
            });
    }
};

async function saveArrayFilesAsync(fileUris: string[]): Promise<boolean> {
    try {
        const assetPromises = [];
        fileUris.forEach(fileUri => {
            assetPromises.push(MediaLibrary.createAssetAsync(fileUri));
        });
        const promises = assetPromises.map(p => p.catch(e => e));
        await Promise.all(promises).then(async assets => {
            const album = await MediaLibrary.getAlbumAsync(ALBUM_NAME);
            if (album === null) {
                const newAlbum = await MediaLibrary.createAlbumAsync(ALBUM_NAME, assets[0], false);
                assets.shift();
                if (assets.length > 0) {
                    await MediaLibrary.addAssetsToAlbumAsync([...assets], newAlbum.id, false);
                }
            } else {
                await MediaLibrary.addAssetsToAlbumAsync([...assets], album.id, false);
            }
            return true;
        });
    } catch (error) {
        console.error(error);
        return false;
    }
}
2

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