React Native + Expo - Triggering an android intent to open locally stored files. (Android)

Question

We've got a managed expo app, which is using the FileSystem.downloadAsync and this is all okay.

We've got a FlatList which is displaying a list of downloaded files.

We don't want to build in a file viewer, for every app under the sun, that's not the aim.

We want to be able to click a file from the list and potentially using the Android Intent system to offer the user a list of apps they already have installed which can handle the file type.

e.g. We've got something like

    class FileBrowser extends Component {
        state = {
            files: [
                {
                    key: '1'
                    name: 'file.jpg',
                    sys_path: 'file://blah.jpg'
                }
            ]
        }

        openFile(item) {
            IntentLauncherAndroid.startActivityAsync(
               'android.intent.action.OPEN_DOCUMENT', {
                data: item.sys_path
            })
        }

        render() {
            return (
                <FlatList data={ this.state.files } renderItem={ (item) => <Button title={ item.name } onPress={ this.openFile(item) } />} />
            )
        }
    }

We've pretty much exhausted the list of intents from https://chromium.googlesource.com/android_tools/+/febed84a3a3cb7c2cb80d580d79c31e22e9643a5/sdk/platforms/android-23/data/activity_actions.txt

The only one that almost gets there is android.intent.action.VIEW however that just opens a random list of apps, none of which can handle images - We've also passed in the mime type e.g. image/jpeg or image/* hoping that will filter the list.

---

What would be the correct way on Android only to offer the user to open the file in an appropriate apps?

Answer 1

with Expo SDK 34 (I use expo 34.0.3 because of there is font not resolve issues), you can do the open list as this way. but this is not a proper solution to open list. because the user has to do some work like this.

expo sharing api

                  await Sharing.shareAsync(
                        fileUri, 
                        {dialogTitle: 'share or copy your pdf via'}
                        ).catch(error =>{
                        console.log(error);
                    })

if you do this with providing a local file URI, you can see this bottom action sheet as below. then the user can choose the copy to option and paste it some location. after that user can open the file and then OS ask for what app will be used to open your file.