{"id":3328,"date":"2022-12-06T01:00:04","date_gmt":"2022-12-05T18:00:04","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=3328"},"modified":"2023-01-04T11:39:47","modified_gmt":"2023-01-04T04:39:47","slug":"bagaimana-cara-download-open-file-di-android-ios-menggunakan-react-native","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/how-to-download-open-android-ios-files-using-expo\/","title":{"rendered":"How to Download & Open Android & IOS Files using Expo"},"content":{"rendered":"\r\n<p>In this tutorial, we will discuss how to handle download files and open files using the Expo library, specifically for Android, we will use <strong>IntentLauncher<\/strong> so that users can choose which application will be used to display files that have finished downloading. Please also read the article <a href=\"https:\/\/www.bagi2info.com\/en\/how-to-upload-files-images-using-the-react-native-expo-data-form\/\" target=\"_blank\" rel=\"noopener\" title=\"How to Upload File\/Image Using React Native Expo Data Form \">How to Upload File\/Image Using React Native Expo Data Form <\/a><\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/how-to-download-open-android-ios-files-using-expo\/#Android\" >Android<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/how-to-download-open-android-ios-files-using-expo\/#IOS\" >IOS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/how-to-download-open-android-ios-files-using-expo\/#Custom_Dev\" >Custom Dev<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Android\"><\/span>Android <span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">        \/\/ open with android intent                 \r\n          await IntentLauncher.startActivityAsync(\r\n            'android.intent.action.VIEW',\r\n            {\r\n              data: contentURL,\r\n              flags: 1,\r\n              type: 'application\/pdf',\r\n              \/\/ change this with any type of file you want\r\n              \/\/ excel sample type\r\n              \/\/ 'application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n            }\r\n          );\r\n          \/\/ or\r\n          \/\/ Sharing.shareAsync(localPath);      \r\n              \r\n        <\/code><\/pre>\r\n\r\n\r\n\r\n<p>In addition to using <strong>IntentLauncher <\/strong>we can also use the <strong>expo-sharing<\/strong> library directly with the <strong>shareAsync<\/strong> method but the file is saved directly without being opened from the application.< \/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">Sharing.shareAsync(localPath); <\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"IOS\"><\/span>IOS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>For IOS phones, the way to open the file and display is slightly different. After the file is downloaded, then we immediately <strong>Share <\/strong>the downloaded file, save the file and then to display it we have to open the <strong>Files<\/strong> application and look for the file that was just saved manually. <\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">          Sharing.shareAsync(localPath);<\/code><\/pre>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Custom_Dev\"><\/span>Custom Dev<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>Weakness of how to display on IOS, users have to manually open the Files application, besides the <strong>Sharing<\/strong> method you can also use <strong>expo-dev-client<\/strong>, to display pdf files directly .<\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<p>Here is the complete source code:<\/p>\r\n\r\n\r\n\r\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">import * as React from 'react';\r\nimport {\r\n  Text,\r\n  View,\r\n  StyleSheet,\r\n  TouchableOpacity,\r\n  Platform,\r\n} from 'react-native';\r\nimport Constants from 'expo-constants';\r\n\r\nimport * as FileSystem from 'expo-file-system';\r\nimport * as Sharing from 'expo-sharing';\r\n\r\nimport * as IntentLauncher from 'expo-intent-launcher';\r\nimport { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';\r\n\r\nexport default function App() {\r\n  const openFile = () =&gt; {\r\n    let remoteUrl = 'https:\/\/iuranwarga.com\/bukukas-report.pdf';\r\n\r\n    let localPath = `${FileSystem.documentDirectory}\/sample.pdf`;\r\n\r\n    FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) =&gt; {\r\n      const contentURL = await FileSystem.getContentUriAsync(uri);\r\n      try {\r\n        \r\n        if (Platform.OS == 'android') {\r\n          \r\n          \/\/ open with android intent\r\n          await IntentLauncher.startActivityAsync(\r\n            'android.intent.action.VIEW',\r\n            {\r\n              data: contentURL,\r\n              flags: 1,\r\n              type: 'application\/pdf',\r\n              \/\/ change this with any type of file you want\r\n              \/\/ excel sample type\r\n              \/\/ 'application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n            }\r\n          );\r\n          \/\/ or\r\n          \/\/ Sharing.shareAsync(localPath);      \r\n              \r\n        } else if (Platform.OS == 'ios') {\r\n \r\n          Sharing.shareAsync(localPath);\r\n        }\r\n      } catch (error) {\r\n        Alert.alert('INFO', JSON.stringify(error));\r\n      }\r\n    });\r\n  };\r\n\r\n  return (\r\n    &lt;SafeAreaProvider&gt;\r\n      &lt;SafeAreaView style={styles.container}&gt;\r\n        &lt;View style={{ alignItems: 'center' }}&gt;\r\n          &lt;Text\r\n            style={{\r\n              fontSize: 30,\r\n              textAlign: 'center',\r\n              marginTop: 20,\r\n              marginBottom: 30,\r\n            }}&gt;\r\n            {`React Native Example \\nDownload &amp; Open File\\nfor Android &amp; IOS`}\r\n          &lt;\/Text&gt;\r\n        &lt;\/View&gt;\r\n        &lt;TouchableOpacity\r\n          style={styles.buttonStyle}\r\n          activeOpacity={0.5}\r\n          onPress={openFile}&gt;\r\n          &lt;Text style={styles.buttonTextStyle}&gt;Download &amp; Open File&lt;\/Text&gt;\r\n        &lt;\/TouchableOpacity&gt;\r\n      &lt;\/SafeAreaView&gt;\r\n    &lt;\/SafeAreaProvider&gt;\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    paddingTop: Constants.statusBarHeight,\r\n    backgroundColor: '#ecf0f1',\r\n    padding: 8,\r\n  },\r\n  buttonStyle: {\r\n    backgroundColor: '#307ecc',\r\n    borderWidth: 0,\r\n    color: '#FFFFFF',\r\n    borderColor: '#307ecc',\r\n    height: 40,\r\n    alignItems: 'center',\r\n    borderRadius: 30,\r\n    marginLeft: 35,\r\n    marginRight: 35,\r\n    marginTop: 15,\r\n  },\r\n  buttonTextStyle: {\r\n    color: '#FFFFFF',\r\n    paddingVertical: 10,\r\n    fontSize: 16,\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<p>Snack Expo Link<\/p>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/react-native-open-any-type-of-file-url-local-for-android-ios-example\">https:\/\/snack.expo.dev\/@rudiahmad\/react-native-open-any-type-of-file-url-local-for-android-ios-example<\/a><\/p>\r\n\r\n\r\n\r\n<p>Note:<\/p>\r\n\r\n\r\n\r\n<p>Sample code has been tested and runs on IOS <strong>iphone 11 Pro Max <\/strong>and Android <strong>Xiaomi 11<\/strong> with Expo SDK 46<\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>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&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":3346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,173],"tags":[79,150,145],"class_list":["post-3328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer","category-react-native","tag-android","tag-react-native","tag-source-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=3328"}],"version-history":[{"count":10,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3328\/revisions"}],"predecessor-version":[{"id":3628,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3328\/revisions\/3628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/3346"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=3328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=3328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=3328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}