How to Download & Open Android & IOS Files using Expo

In this tutorial, we will discuss how to handle download files and open files using the Expo library, specifically for Android, we will use IntentLauncher so that users can choose which application will be used to display files that have finished downloading. Please also read the article How to Upload File/Image Using React Native Expo Data Form

Android

        // open with android intent                 
          await IntentLauncher.startActivityAsync(
            'android.intent.action.VIEW',
            {
              data: contentURL,
              flags: 1,
              type: 'application/pdf',
              // change this with any type of file you want
              // excel sample type
              // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            }
          );
          // or
          // Sharing.shareAsync(localPath);      
              
        

In addition to using IntentLauncher we can also use the expo-sharing library directly with the shareAsync method but the file is saved directly without being opened from the application.< /p>

Sharing.shareAsync(localPath); 

IOS

For IOS phones, the way to open the file and display is slightly different. After the file is downloaded, then we immediately Share the downloaded file, save the file and then to display it we have to open the Files application and look for the file that was just saved manually.

          Sharing.shareAsync(localPath);

Custom Dev

Weakness of how to display on IOS, users have to manually open the Files application, besides the Sharing method you can also use expo-dev-client, to display pdf files directly .

Here is the complete source code:

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import Constants from 'expo-constants';

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

import * as IntentLauncher from 'expo-intent-launcher';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  const openFile = () => {
    let remoteUrl = 'https://iuranwarga.com/bukukas-report.pdf';

    let localPath = `${FileSystem.documentDirectory}/sample.pdf`;

    FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
      const contentURL = await FileSystem.getContentUriAsync(uri);
      try {
        
        if (Platform.OS == 'android') {
          
          // open with android intent
          await IntentLauncher.startActivityAsync(
            'android.intent.action.VIEW',
            {
              data: contentURL,
              flags: 1,
              type: 'application/pdf',
              // change this with any type of file you want
              // excel sample type
              // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            }
          );
          // or
          // Sharing.shareAsync(localPath);      
              
        } else if (Platform.OS == 'ios') {
 
          Sharing.shareAsync(localPath);
        }
      } catch (error) {
        Alert.alert('INFO', JSON.stringify(error));
      }
    });
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <View style={{ alignItems: 'center' }}>
          <Text
            style={{
              fontSize: 30,
              textAlign: 'center',
              marginTop: 20,
              marginBottom: 30,
            }}>
            {`React Native Example \nDownload & Open File\nfor Android & IOS`}
          </Text>
        </View>
        <TouchableOpacity
          style={styles.buttonStyle}
          activeOpacity={0.5}
          onPress={openFile}>
          <Text style={styles.buttonTextStyle}>Download & Open File</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  buttonStyle: {
    backgroundColor: '#307ecc',
    borderWidth: 0,
    color: '#FFFFFF',
    borderColor: '#307ecc',
    height: 40,
    alignItems: 'center',
    borderRadius: 30,
    marginLeft: 35,
    marginRight: 35,
    marginTop: 15,
  },
  buttonTextStyle: {
    color: '#FFFFFF',
    paddingVertical: 10,
    fontSize: 16,
  },
});

Snack Expo Link

https://snack.expo.dev/@rudiahmad/react-native-open-any-type-of-file-url-local-for-android-ios-example

Note:

Sample code has been tested and runs on IOS iphone 11 Pro Max and Android Xiaomi 11 with Expo SDK 46