{"id":4425,"url":"https://github.com/vinzscam/react-native-file-viewer","last_synced_at":"2025-11-12T22:36:02.735Z","repository":{"id":41086365,"uuid":"106719563","full_name":"vinzscam/react-native-file-viewer","owner":"vinzscam","description":"Native file viewer for React Native. Preview any type of file supported by the mobile device.","archived":false,"fork":false,"pushed_at":"2024-01-16T12:51:07.000Z","size":2387,"stargazers_count":445,"open_issues_count":46,"forks_count":108,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-11-05T11:34:23.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinzscam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-12T16:43:01.000Z","updated_at":"2025-09-04T13:43:46.000Z","dependencies_parsed_at":"2024-01-08T01:03:07.998Z","dependency_job_id":"4d844acd-0000-41be-ac5c-81b7bfe2f868","html_url":"https://github.com/vinzscam/react-native-file-viewer","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/vinzscam/react-native-file-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinzscam%2Freact-native-file-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinzscam%2Freact-native-file-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinzscam%2Freact-native-file-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinzscam%2Freact-native-file-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinzscam","download_url":"https://codeload.github.com/vinzscam/react-native-file-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinzscam%2Freact-native-file-viewer/sbom","scorecard":{"id":922893,"data":{"date":"2025-08-11","repo":{"name":"github.com/vinzscam/react-native-file-viewer","commit":"118d91a4006df4fd542adb6bbab581a2cd46c210"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 2/26 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-25T06:17:20.754Z","repository_id":41086365,"created_at":"2025-08-25T06:17:20.754Z","updated_at":"2025-08-25T06:17:20.754Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284122919,"owners_count":26951149,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-12T02:00:06.336Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:11.502Z","updated_at":"2025-11-12T22:36:02.718Z","avatar_url":"https://github.com/vinzscam.png","language":"Java","funding_links":[],"categories":["Components","Java"],"sub_categories":["Text \u0026 Rich Content"],"readme":"# react-native-file-viewer\n\nNative file viewer for react-native. Preview any type of file supported by the mobile device.\n\n**iOS**: it uses [QuickLook Framework](https://developer.apple.com/library/content/documentation/FileManagement/Conceptual/DocumentInteraction_TopicsForIOS/Articles/UsingtheQuickLookFramework.html)\n\n**Android**: it uses `ACTION_VIEW` Intent to start the default app associated with the specified file.\n\n**Windows**: Start the default app associated with the specified file.\n\n![Usage example](docs/react-native-file-viewer-usage-example.gif)\n\n## Getting started\n\n`$ npm install react-native-file-viewer --save`\n\nor\n\n`$ yarn add react-native-file-viewer`\n\n### Mostly automatic installation (recommended)\n\n```\n# RN \u003e= 0.60\ncd ios \u0026\u0026 pod install\n\n# RN \u003c 0.60\nreact-native link react-native-file-viewer\n```\n\n#### Extra step (Android only)\n\nIf your app is targeting **Android 11 (API level 30) or newer**, the following extra step is required, as described in [Declaring package visibility needs](https://developer.android.com/training/package-visibility/declaring) and [Package visibility in Android 11](https://medium.com/androiddevelopers/package-visibility-in-android-11-cc857f221cd9).\n\nSpecifically:\n\n\u003e If your app targets Android 11 or higher and needs to interact with apps other than the ones that are visible automatically, add the \u003cqueries\u003e element in your app's manifest file. Within the \u003cqueries\u003e element, specify the other apps by package name, by intent signature, or by provider authority, as described in the following sections.\n\nFor example, if you know upfront that your app is supposed to open PDF files, the following lines should be added to your `AndroidManifest.xml`.\n\n```diff\n    ...\n  \u003c/application\u003e\n+ \u003cqueries\u003e\n+   \u003cintent\u003e\n+     \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n+     \u003c!-- If you don't know the MIME type in advance, set \"mimeType\" to \"*/*\". --\u003e\n+     \u003cdata android:mimeType=\"application/pdf\" /\u003e\n+   \u003c/intent\u003e\n+ \u003c/queries\u003e\n\u003c/manifest\u003e\n```\n\n**IMPORTANT**: Try to be as granular as possible when defining your own queries. This might affect your Play Store approval, as mentioned in [Package visibility filtering on Android](https://developer.android.com/training/package-visibility).\n\n\u003e If you publish your app on Google Play, your app's use of this permission is subject to approval based on an upcoming policy.\n\n### Expo\n\nIf your project is based on [Expo](https://expo.io), you need to eject your project by switching to the [Bare workflow](https://docs.expo.dev/workflow/customizing), in order to use this library.\n\n### Manual installation\n\n#### iOS (CocoaPods)\n\nAdd the following to your Podfile:\n\n```\npod 'RNFileViewer', :path =\u003e '../node_modules/react-native-file-viewer'\n```\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-file-viewer` and add `RNFileViewer.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNFileViewer.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n\n- Add `import com.vinzscam.reactnativefileviewer.RNFileViewerPackage;` to the imports at the top of the file\n- Add `new RNFileViewerPackage()` to the list returned by the `getPackages()` method\n\n2. Append the following lines to `android/settings.gradle`:\n\n   ```\n   include ':react-native-file-viewer'\n   project(':react-native-file-viewer').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-file-viewer/android')\n   ```\n\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n\n   ```\n   compile project(':react-native-file-viewer')\n   ```\n\n4. Locate `react-native-file-viewer` inside `node_modules` folder and copy `android/src/main/res/xml/file_viewer_provider_paths.xml` to your project `res/xml/` directory\n5. Add the following lines to `AndroidManifest.xml` between the main `\u003capplication\u003e\u003c/application\u003e` tag:\n\n   ```\n   ...\n   \u003capplication\u003e\n   ...\n   \t\u003cprovider\n   \t\tandroid:name=\"com.vinzscam.reactnativefileviewer.FileProvider\"\n   \t\tandroid:authorities=\"${applicationId}.provider\"\n   \t\tandroid:exported=\"false\"\n   \t\tandroid:grantUriPermissions=\"true\"\u003e\n   \t\t\u003cmeta-data\n   \t\t\tandroid:name=\"android.support.FILE_PROVIDER_PATHS\"\n   \t\t\tandroid:resource=\"@xml/file_viewer_provider_paths\"\n   \t\t/\u003e\n   \t\u003c/provider\u003e\n   \u003c/application\u003e\n   ....\n   ```\n\n#### Windows\n\nFollow the instructions in the ['Linking Libraries'](https://github.com/Microsoft/react-native-windows/blob/master/docs/LinkingLibrariesWindows.md) documentation on the react-native-windows GitHub repo. For the first step of adding the project to the Visual Studio solution file, the path to the project should be `../node_modules/react-native-file-viewer/windows/RNFileViewer/RNFileViewer.csproj`.\n\n## Usage\n\n### Open a local file\n\n```javascript\nimport FileViewer from \"react-native-file-viewer\";\n\nconst path = FileViewer.open(path) // absolute-path-to-my-local-file.\n  .then(() =\u003e {\n    // success\n  })\n  .catch((error) =\u003e {\n    // error\n  });\n```\n\n### Pick up and open a local file #1 (using [react-native-document-picker](https://github.com/Elyx0/react-native-document-picker))\n\n```javascript\nimport FileViewer from \"react-native-file-viewer\";\nimport DocumentPicker from \"react-native-document-picker\";\n\ntry {\n  const res = await DocumentPicker.pick({\n    type: [DocumentPicker.types.allFiles],\n  });\n  await FileViewer.open(res.uri);\n} catch (e) {\n  // error\n}\n```\n\n### Pick up and open a local file #2 (using [react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker))\n\n```javascript\nimport FileViewer from \"react-native-file-viewer\";\nimport ImagePicker from \"react-native-image-crop-picker\";\n\nImagePicker.openPicker({})\n  .then((image) =\u003e FileViewer.open(image.path))\n  .catch((error) =\u003e {\n    // error\n  });\n```\n\n### Prompt the user to choose an app to open the file with (if there are multiple installed apps that support the mimetype)\n\n```javascript\nimport FileViewer from \"react-native-file-viewer\";\n\nconst path = FileViewer.open(path, { showOpenWithDialog: true }) // absolute-path-to-my-local-file.\n  .then(() =\u003e {\n    // success\n  })\n  .catch((error) =\u003e {\n    // error\n  });\n```\n\n### Open a file from Android assets folder\n\nSince the library works only with absolute paths and Android assets folder doesn't have any absolute path, the file needs to be copied first. Use [copyFileAssets](https://github.com/itinance/react-native-fs#copyfileassetsfilepath-string-destpath-string-promisevoid) of [react-native-fs](https://github.com/itinance/react-native-fs).\n\nExample (using react-native-fs):\n\n```javascript\nimport FileViewer from \"react-native-file-viewer\";\nimport RNFS from \"react-native-fs\";\n\nconst file = \"file-to-open.doc\"; // this is your file name\n\n// feel free to change main path according to your requirements\nconst dest = `${RNFS.DocumentDirectoryPath}/${file}`;\n\nRNFS.copyFileAssets(file, dest)\n  .then(() =\u003e FileViewer.open(dest))\n  .then(() =\u003e {\n    // success\n  })\n  .catch((error) =\u003e {\n    /* */\n  });\n```\n\n### Download and open a file (using [react-native-fs](https://github.com/itinance/react-native-fs))\n\nNo function about file downloading has been implemented in this package.\nUse [react-native-fs](https://github.com/itinance/react-native-fs) or any similar library for this purpose.\n\nExample (using react-native-fs):\n\n```javascript\nimport RNFS from \"react-native-fs\";\nimport FileViewer from \"react-native-file-viewer\";\nimport { Platform } from \"react-native\";\n\nconst url =\n  \"https://github.com/vinzscam/react-native-file-viewer/raw/master/docs/react-native-file-viewer-certificate.pdf\";\n\n// *IMPORTANT*: The correct file extension is always required.\n// You might encounter issues if the file's extension isn't included\n// or if it doesn't match the mime type of the file.\n// https://stackoverflow.com/a/47767860\nfunction getUrlExtension(url) {\n  return url.split(/[#?]/)[0].split(\".\").pop().trim();\n}\n\nconst extension = getUrlExtension(url);\n\n// Feel free to change main path according to your requirements.\nconst localFile = `${RNFS.DocumentDirectoryPath}/temporaryfile.${extension}`;\n\nconst options = {\n  fromUrl: url,\n  toFile: localFile,\n};\nRNFS.downloadFile(options)\n  .promise.then(() =\u003e FileViewer.open(localFile))\n  .then(() =\u003e {\n    // success\n  })\n  .catch((error) =\u003e {\n    // error\n  });\n```\n\n## API\n\n### `open(filepath: string, options?: Object): Promise\u003cvoid\u003e`\n\n| Parameter              | Type   | Description                                                                                                                                                                                                                                        |\n| ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **filepath**           | string | The absolute path where the file is stored. The file needs to have a valid extension to be successfully detected. Use [react-native-fs constants](https://github.com/itinance/react-native-fs#constants) to determine the absolute path correctly. |\n| **options** (optional) | Object | Some options to customize the behaviour. See below.                                                                                                                                                                                                |\n\n#### Options\n\n| Parameter                          | Type     | Description                                                                                                      |\n| ---------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |\n| **displayName** (optional)         | string   | Customize the QuickLook title (iOS only).                                                                        |\n| **onDismiss** (optional)           | function | Callback invoked when the viewer is being dismissed (iOS and Android only).                                      |\n| **showOpenWithDialog** (optional)  | boolean  | If there is more than one app that can open the file, show an _Open With_ dialogue box (Android only).           |\n| **showAppsSuggestions** (optional) | boolean  | If there is not an installed app that can open the file, open the Play Store with suggested apps (Android only). |\n\n## Issues\n\n### Android X Breaking changes\n\nThe library supports [Android X](https://developer.android.com/jetpack/androidx/) and React Native 0.60+.\n\nIf you're using **React Native \u003c 0.60**, please append the following snippet to your `android/app/build.gradle` file:\n\n```\npreBuild.doFirst {\n    ant.replaceregexp(match:'androidx.core.content.', replace:'android.support.v4.content.', flags:'g', byline:true) {\n        fileset(dir: '../../node_modules/react-native-file-viewer/android/src/main/java/com/vinzscam/reactnativefileviewer', includes: '*.java')\n    }\n}\n```\n\nIf you prefer to not touch your gradle file, you can still use version `1.0.15` which is perfectly compatible.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinzscam%2Freact-native-file-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinzscam%2Freact-native-file-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinzscam%2Freact-native-file-viewer/lists"}