RNFetchBlob.ios.openDocument does not work with Modal and Alerts components

[nobady90]

Hello everyone, this problem was already reported in the repository wkh237: https://github.com/wkh237/react-native-fetch-blob/issues/675 The problem is only on iOS since on Android it works correctly. You can verify? The example is like that of the linked issue, Thank you.

[Kyonru]

have you try to use RNFetchBlob.ios.previewDocument(res.path()) ?

[nobady90]

@Kyonru Yes, I also tried previewDocument but it does not work the same ... this is the code:

await AsyncStorage.getItem('id_token').then(token => {
  **this.setState({ loading: true });**
  let DocumentDir = RNFetchBlob.fs.dirs.DocumentDir + '/' + item.original_filename;
  let extensionFile = item.mime_type.split('/').pop();
  RNFetchBlob.config({
    fileCache: true,
    appendExt: extensionFile,
    path: DocumentDir,
  })
    .fetch('GET', url + item.unique_file_name, {
      Authorization: 'Bearer ' + token,
    })
    .then(res => {
      **this.setState({ loading: false });**
      if (Platform.OS === 'ios') {
        RNFetchBlob.ios.previewDocument(res.path());
      }
      if (Platform.OS === 'android') {
        RNFetchBlob.android.actionViewIntent(res.path(), item.mime_type);
      }
    })
    // Something went wrong:
    .catch((errorMessage, statusCode) => {
      Alert.alert(
        'Download Document',
        "ERROR: '" + item.title + "'."
      );
    });
});

Is there a way to calculate .progress when it has finished downloading? I could close the loader at that point in order to run the .then openDocument or PreviewDocument correctly

ES:

.fetch('GET', url + item.unique_file_name, {
Authorization: 'Bearer ' + token,
})
.progress((received, total) => {
WHEN FINISH -> **this.setState({ loading: false });**
})
.then(res => {
if (Platform.OS === 'ios') {
RNFetchBlob.ios.previewDocument(res.path());
}
if (Platform.OS === 'android') {
RNFetchBlob.android.actionViewIntent(res.path(), item.mime_type);
}
})

Even if the best solution would be to understand what is wrong when using Modal or Alert on iOS ... otherwise there is currently no way to make the user understand when click to download that the application is doing something ?! Thank you!

[nobady90]

guys, I do not know at the moment how you are doing but I can not insert a modal or alert from the precise moment when the download starts when it ends. in .progress ((received, total) => {[...] the value total is always at -1 while at every turn the received value increases... how can i solve?? thanks a lot!

[nobady90]

any news for this bug guys??

[erenilhan]

Hi, I have the same problem. any news?

[nobady90]

@erenilhan I had to get around the problem ... instead of using a modal or alerts I used an ActivityIndicator inside the button: Download File that just clicked will turn until it has finished uploading the file and then previewing it correctly on both iOS and Android.

[erenilhan]

@nobady90 I solved it temporarily. When the file downloaded I did close modal and open file. But its not good solution :/

[DevJett]

I was able to resolve the issue, but I don't know why it actually happened in the first place. I used an Alert.alert to find if the file existed or not and then called the RNFetchBlob.ios.openDocument function, upon removing the alert just before the function call it started working

[alnorris]

FYI: You can get around this issue by calling openDocument in the onDismiss Modal callback prop

https://facebook.github.io/react-native/docs/modal#ondismiss

[FRizzonelli]

This is still an issue, I'm using modals in my architecture and I want to open the system preview over modals. This should be possible!

I think it's related to order in UIViewControllers of iOS, but unfortunately I'm not an objective C dev 😢. Any idea where we could investigate?

[barbarossusuz]

still happening, is there any workaround beside closing modal? @FRizzonelli i have same issue, did you find any solution ?

[wincjh]

+1 :/

[davorbuha]

+1

[dancherb]

Still an issue - e.g. opening a "terms" document from a settings or agreement modal isn't possible on iOS.

[erennyuksell]

+1

[willnaoosmith]

same

[XxOsirisxX]

@FRizzonelli Same problem for me

[edritech93]

same for me

[jackie66]

这应该是RNFetchBlob的问题。 const localFile = ${RNFS.DocumentDirectoryPath}/temporary_file.xlsx; RNFS.downloadFile({fromUrl: fileFullPath, toFile: localFile}).promise .then(() => { if (isIos()) { RNFetchBlob.ios.openDocument(localFile); } else { RNFetchBlob.android.actionViewIntent(localFile, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); } }); 转而使用react-native-fs就可以了

[R4DIC4L]

i'm having the same problem and it's frustrating because the content in the modal is part of data in a form in my case. Creating a new screen is harder in this case and closing the modal doesn't seem a nice solution. Tried to close and reopen the modal afterwards, but this closes the iOS action sheet and there is otherwise no way of knowing when the action sheet closes.

The modal + document opening works fine in android, i guess iOS has additional restrictions related to modals?

[arun537]

+1 Working with a modal to open in WebView. Now view is not working in IOS

[MannySauce]

I'm facing the same issue with an .xlsx that im generating in server and downloading to iPhone... It only downloads to the Files app, I have an alert with a button inside that fires RNFetchBlob.ios.openDocument(res.path()); (if its iOS of course), when it's pressed nothing happens, apart from the alert closing.

[RublevD]

I've managed to solve this issue with opening my pdf files. Try to add 'Supports opening documents in place' in your Info.plist

Also, try to save to cache dir, not documents - fetchBlob.fs.dirs.CacheDir (https://github.com/joltup/rn-fetch-blob/wiki/File-System-Access-API#dirs)

[sandeepa91]

@RublevD It's not worked for me. I'm having the same problem. RNFetchBlob.ios.openDocument(filePath) not works on top of Modal.
I'm opening the document(pdf) through InAppBrowser as an optional way.

 const openDocument = Platform.select({
      android: () => RNFetchBlob.android.actionViewIntent(filePath, extension),
      ios: () => Promise.resolve(RNFetchBlob.ios.openDocument(filePath)),
    })
    await openDocument()

[yuval-herman]

This was fixed in this package: https://github.com/vinzscam/react-native-file-viewer/pull/5 Not an ios dev but maybe someone can copy that?