On iOS, No File is Displayed

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, ); 
});

[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('.')); 

[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('.'));