The Linking does not open an external application

[TsplayerT]

Description

The openURL function cannot find the newly downloaded image file 😔
Generates a Toast message saying media not found

import { Linking } from 'react-native';
import * as FileSystem from "expo-file-system";

// imageAPI -> https://cdn2.thecatapi.com/images/tOGSsMx5J.jpg

async function showImageAsync(imageAPI: string): Promise<void> {
    try {
      const fileName = imageAPI.substring(imageAPI.lastIndexOf('/') + 1);
      // filePath -> tOGSsMx5J.jpg
      
      const filePath = `${FileSystem.documentDirectory}/${fileName}`;
      // filePath -> file:///data/user/0/com.package.test/files/tOGSsMx5J.jpg

      const fileDownloaded = await FileSystem.downloadAsync(imageAPI, filePath);

      const fileContent = await FileSystem.getContentUriAsync(fileDownloaded.uri);
      // fileContent -> content://com.package.test.FileSystemFileProvider/expo_files/tOGSsMx5J.jpg
      
      const canOpenURL = await Linking.canOpenURL(fileContent);
      // canOpenURL -> true

      if (canOpenURL) {
        await Linking.openURL(fileContent);
      }
    } catch (error) {
      console.log("showImageAsync", error);
    }
}

Steps to reproduce

1. 🏃Run example function
2. 🐛Bug

React Native Version

0.73.5

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
  Memory: 12.53 GB / 31.77 GB
Binaries:
  Node:
    version: 18.13.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33627.172 (Visual Studio Community 2022)
Languages:
  Java: 11.0.16.1
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.5
    wanted: 0.73.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

openURL generates a Toast message saying media not found

Reproducer

https://snack.expo.dev/@tsplayert/linking-example

Screenshots and Videos

No response

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[frankcalise]

Hello there! I don't believe Linking isn't used to open files, but known URL schemes for core functionality such as mail, SMS, etc.

You can find more about the supported Built-int URL Schemes here: https://reactnative.dev/docs/linking#built-in-url-schemes

I think what you may be looking to do here is follow it up with starting a specific Android intent for viewing an image, as mentioned in Expo's documentation as a follow up to getContentUriAsync. That looks like this:

FileSystem.getContentUriAsync(uri).then(cUri => {
  console.log(cUri);
  IntentLauncher.startActivityAsync('android.intent.action.VIEW', {
    data: cUri,
    flags: 1,
  });
});

But there is more details on that over at Expo's documentation: https://docs.expo.dev/versions/latest/sdk/filesystem/#filesystemgetcontenturiasyncfileuri

[TsplayerT]

@frankcalise cool, this really works! 🎉
But I will also want to do the same for iOS, how can I do that? 🤔

I would like you to open a modal so that the user can choose which application should display the image, is there any way?

[frankcalise]

@TsplayerT I don't believe there is an equivalent of Android Intents system on iOS. That's why that getContentUriAsync method is labeled Android only

You'd probably have to change your workflow a little to save the image off to the user's media library, then they'll open it with their default photos app.

However, I think this is more of a implementation question and not a direct issue with react-native itself anymore.

[TsplayerT]

@frankcalise i'm only using the getContentUriAsync method because I could only do it that way. 😭

By any chance, could you help me with the function to save the image to the user's media library and then he would open it with the default photo application? Please 🙏

It would be more interesting if it opened a modal so that the user can choose which application should display the image. 🥺

[TsplayerT]

@frankcalise is there any way to open a native modal for the user to choose which application should display the content of the image downloaded from an API for Android and iOS? 🤔

[frankcalise]

@TsplayerT iOS doesn't allow for such a thing AFAIK.

I would reach out to a community for help such as Stack Overflow or any of the Company Based Communities listed where many developers can share their experiences on running into issues with feature parity such as this one.

But as we have solved the original issue in question, I think this can be closed now if you wouldn't mind

[TsplayerT]

Ok, I understand and thanks for the help 😁