On iOS, No File is Displayed

[Bilal-Abdeen]

On iOS, no file is displayed. The screen only displays the file name and its size (screenshoft below). On Android, it works perfectly fine! Using macOS's Finder, I can find the file on the disk. However, I am not sure why it does not display on the screen.

react-native: 0.64.2
react-native-file-viewer: 2.1.4
react-native-fs: 2.18.0
simulator: iOS 14.4 - iPhone 12

const ext = URI.substring(URI.lastIndexOf(".")); // Get the extension of the file. 
const localFile = `${RNFS.DocumentDirectoryPath}/temporaryfile${ext}`;

RNFS.downloadFile({ fromUrl: URI, toFile: localFile }).promise
     .then(() => { 
          FileViewer.open(localFile, {showOpenWithDialog: true, showAppsSuggestions: true, })
	      .then(() => {
   	          console.log("_dislayFile - FileViewer - success", " - localFile:", localFile); 
                 // The execution reaches here, and the result of console.log() follows. I can find the file on the disk. 
	         // -> result: /Users/macbilal/Library/Developer/CoreSimulator/Devices/A2614BF5-7312-4DB5-917F-9F74311B95BE/data/Containers/Data/Application/4B45536B-2583-45AC-8C2B-FA47BC558236/Documents/temporaryfile.jpg?alt=media&token=ec9d814a-27d5-4283-9ae1-d4950e43489f
	})
	.catch(error => {
		console.error("_dislayFile - FileViewer - error:", error, ); 		
	});
})
.catch(error => {
	console.error("CertDetails - downloadFile - error:", error, "localFile:", localFile, ); 
});

[sjschubert]

@Bilal-Abdeen Are you running your sim on an M1 mac by chance?

[Bilal-Abdeen]

@sjschubert ,
No, I am not. It is running on a macOS 10.15.7.

[kr396]

@Bilal-Abdeen Are you running your sim on an M1 mac by chance?

I'm facing same issue. And I'm facing this issue in m1 simulator

[vincent-paing]

Were you able to solve this?

[oberruti]

I'm having the same issue, running in mac m1.

[jwh-hutchison]

I'm having the same issue, running in Mac M1

[truongngodang]

I got crash on IOS 15 simulator, but real device is not.

[vinzscam]

Hi @Bilal-Abdeen,

the issue seems to be related on your function used for retrieving the extensions from the uri.
On Android you are able to open the file because specifying the file's extension as part of the saved file name is not required. On iOS this is a strict requirement: So, if you are downloading a jpg file, the file needs to be saved as something.jpg.
Looking at your logs, you are saving the file as temporaryfile.jpg?alt=media&token=ec9d814a-27d5-4283-9ae1-d4950e43489f, which isn't recognized from iOS as .jpg.

In your case instead of invoking const ext = URI.substring(URI.lastIndexOf("."));

the following should do the trick:

const ext = URI
    .substring(0, URI.indexOf('?'))
    .substring(URI.lastIndexOf('.'));

[Bilal-Abdeen]

@vinzscam You are a genius!!!
Your code fixed the problem.

However, I suspect this problem won't occur on an actual iOS device. Anyway, to make sure the extension extraction code does NOT fail when the file name does not have a (?), I added a bit more checking to it. Here is the final version, should anybody else be interested.

// It seems that on iOS simulator, some additional characters are added to the name of the file, e.g. temporaryfile.jpg?alt=media&token=ec9d814a-27d5
// To get rid of them, an additional .substring() was added to remove the "?" and everything after it before looking for the ".". 
// The code caters for the case in which there is no "?" at all in the string. 
const ext = 
   (URI.substring(0, URI.indexOf('?')).length > 0 
    ? URI.substring(0, URI.indexOf('?')) 
    : URI)
   .substring(URI.lastIndexOf('.'));