react-native-file-viewer
A React Native library for previewing any file type supported by the mobile device using native viewers.
What is react-native-file-viewer?
react-native-file-viewer is a React Native library that enables developers to open and preview files using the device's native file viewers. It provides a unified API to handle various file types across iOS, Android, and Windows platforms, simplifying file interaction in mobile applications by leveraging native platform capabilities for optimal performance and user experience.
React Native developers building mobile applications that require file preview functionality, such as document viewers, media apps, or any app needing to open user-selected or downloaded files.
Developers choose this library because it offers a simple, promise-based API that abstracts away platform-specific complexities, ensuring consistent file viewing behavior across iOS, Android, and Windows while utilizing each platform's native file viewers for reliability and performance.
Overview
Native file viewer for React Native. Preview any type of file supported by the mobile device.
Use Cases
Best For
- Opening local files stored within a React Native app's directory structure for preview.
- Integrating file picking from device storage (e.g., using react-native-document-picker) and immediately previewing selected files.
- Downloading files from URLs (e.g., using react-native-fs) and opening them with the device's default viewer.
- Previewing files from Android assets by copying them to a accessible path before opening.
- Prompting users on Android to choose from multiple installed apps that support a file type via an 'Open With' dialog.
- Customizing file viewer behavior with options like display names, dismissal callbacks, and app suggestions on Android.
Not Ideal For
- Apps requiring embedded, in-app file previewers without launching external applications
- Expo-managed projects that want to avoid ejecting to the bare workflow
- Teams needing advanced file manipulation like editing or annotating files within the app
- Projects demanding perfectly consistent file viewer UI and behavior across all platforms
Pros & Cons
Pros
Leverages iOS QuickLook Framework and Android ACTION_VIEW intents to use device-native viewers, ensuring optimal performance and user experience as described in the README's philosophy.
Provides a consistent promise-based JavaScript API for iOS, Android, and Windows, abstracting platform-specific complexities while maintaining a unified interface.
Supports opening files from local paths, Android assets (via copying with react-native-fs), and downloaded URLs, with clear examples in the usage section.
Offers configurable options like showOpenWithDialog and showAppsSuggestions on Android, allowing tailored user interactions as detailed in the API documentation.
Cons
Requires adding complex <queries> elements to AndroidManifest.xml for API level 30+, with warnings about Play Store approval, making setup error-prone.
Does not work with Expo managed workflow; projects must eject to bare workflow, limiting its use for teams preferring Expo's simplicity and rapid development.
Lacks built-in file downloading or picking; developers must integrate additional libraries like react-native-fs or react-native-document-picker, increasing project complexity and maintenance.
Relies on native viewers, so file preview experience and options differ across iOS, Android, and Windows, leading to inconsistent user interfaces and potential debugging challenges.
Frequently Asked Questions
Related Projects
react-native-hyperlinkA <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable
react-native-markdown-displayReact Native 100% compatible CommonMark renderer
react-native-responsive-fontsize🔠 Responsive fontSize based on screen-size of the device in React-Native
react-native-html-to-pdfConvert html strings to PDF documents using React Native
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.