React-native-fileview NPM

React Native Fileview

The FileViewer component is a React Native interface designed to display various file types seamlessly within a mobile application. It leverages the capabilities of the WebView component to render both documents (such as PDFs and Word files) and images directly from a provided URL.

Many thanks to these companies for providing us with time to work on open source.
Please note that maintainers spend a lot of free time working on this too so feel free to sponsor them, it really makes a difference.

Madhusudhan from React Native for SS for helping a lot with the repo when he had more available time.
Bharanikumar from Team Lead @ SS for helping a lot with the repo when he had more available time.

Disclaimer

Dynamic File Handling: Automatically determines the type of file (document or image) based on the file extension and displays it accordingly.

Google Docs Integration: For document files, it utilizes Google Docs Viewer to render files efficiently, ensuring compatibility with a wide range of document formats.

Inline Image Rendering: For image files, the component embeds the image in a simple HTML structure, providing a smooth viewing experience without downloading the image.

Caching Support: Implements caching to enhance loading speed for subsequent views of the same file, minimizing network calls and improving performance.

Loading Indicator: Displays a loading spinner while the file is being fetched, enhancing user experience by providing visual feedback during loading times.

Platform compatibility

This project is compatible with iOS, Android, Windows and macOS.
This project supports both the old (paper) and the new architecture (fabric).

Usage

Import the FileView component from react-native-fileview and use it like so:

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import FileView from "react-native-fileview";

// ...
const App = () => {
  return <FileView source={"https://gbihr.org/images/docs/test.pdf"} />;
};

The FileViewer component accepts a source prop, which should be a string URL pointing to the file to be displayed. Depending on the file type, it will either load the document in Google Docs Viewer or render the image inline.