Cara Download & Open File Android & IOS menggunakan Expo

Pada tutorial kali kita akan membahas bagaimana menghandle file download dan membuka file tersebut menggunakan library Expo, khusus Android kita akan menggunakan IntentLauncher agar pengguna dapat memilih aplikasi apa yang akan digunakan untuk menampilkan file selesai download. Silahkan baca juga artikel Cara Upload File/Image Menggunakan Form Data React Native Expo

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

Selain menggunakan IntentLauncher kita juga bisa menggunakan library expo-sharing secara langsung dengan method shareAsync namun file langsung tersimpan tanpa dibuka dari aplikasi.

Sharing.shareAsync(localPath); 

IOS

Untuk ponsel IOS, cara membuka file dan menampilkan sedikit berbeda. Setelah file di download maka selanjutnya kita langsung men-Share file hasil download, simpan file lalu untuk menampilkan kita harus membuka aplikasi Files dan mencari file yang baru di simpan secara manual.

          Sharing.shareAsync(localPath);

Custom Dev

Kelemahan cara menampilkan di IOS, pengguna harus secara manual membuka aplikasi Files, selain cara Sharing Anda juga bisa menggunakan expo-dev-client, namun cara ini khusus untuk menampilkan file pdf secara langsung. Caranya bisa dilihat di link https://expo.canny.io/feature-requests/p/pdf-viewer

Berikut adalah source code lengkap:

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 sudah di test dan berjalan di IOS iphone 11 Pro Max dan Android Xiaomi Redmi Note 11 dengan Expo SDK 46

Referensi:

https://expo.canny.io/feature-requests/p/pdf-viewer