All Projects â†’ xcarpentier â†’ Rn Pdf Reader Js

xcarpentier / Rn Pdf Reader Js

Licence: mit
📄 PDF reader in JavaScript only for Expo - Android & iOS capable

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Rn Pdf Reader Js

Vscode React Native
VSCode extension for React Native - supports debugging and editor integration
Stars: ✭ 2,366 (+831.5%)
Mutual labels:  expo
Awesome React Native Web
💙 React Native Web patterns, techniques, tips, and tricks ✨
Stars: ✭ 215 (-15.35%)
Mutual labels:  expo
React Native Examples
A repo that contain React Native examples most related to tutorials I publish
Stars: ✭ 222 (-12.6%)
Mutual labels:  expo
Rn Wunderlist
Wunderlist Clone written in React Native
Stars: ✭ 201 (-20.87%)
Mutual labels:  expo
Margarita
[not actively maintained] Mobile and Web application implementing Kiwi.com Tequila API
Stars: ✭ 213 (-16.14%)
Mutual labels:  expo
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-14.57%)
Mutual labels:  expo
Expo Native Firebase
đŸ”Ĩ Native Firebase Expo App (iOS, Android) Demo for Firestore, Notifications, Analytics, Storage, Messaging, Database 🚨
Stars: ✭ 197 (-22.44%)
Mutual labels:  expo
Pillar Valley
👾A cross-platform video game built with Expo, three.js, and Firebase! 🎮🕹
Stars: ✭ 242 (-4.72%)
Mutual labels:  expo
Image Upload Example
Demonstration of how to upload images from the ImagePicker, using a node backend to upload to S3
Stars: ✭ 214 (-15.75%)
Mutual labels:  expo
React Native
📓 Storybook for React Native!
Stars: ✭ 222 (-12.6%)
Mutual labels:  expo
Expo
An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
Stars: ✭ 15,550 (+6022.05%)
Mutual labels:  expo
Dribbble2react
Transform Dribbble designs to React-Native code | Shop UI Kit >>
Stars: ✭ 2,443 (+861.81%)
Mutual labels:  expo
Expo And Typescript
Showcase of an Expo app written in TypeScript.
Stars: ✭ 222 (-12.6%)
Mutual labels:  expo
Expo Firebase Starter
đŸ”Ĩ⚛ī¸đŸ“ą Expo + Firebase Starter Kit
Stars: ✭ 199 (-21.65%)
Mutual labels:  expo
Use Expo
Complementary hooks for Expo
Stars: ✭ 233 (-8.27%)
Mutual labels:  expo
React Native Pdfview
📚 PDF viewer for React Native
Stars: ✭ 198 (-22.05%)
Mutual labels:  pdf-viewer
React Native Stretchy
🤸‍♀ī¸A ReactNative scrollable stretchy header component
Stars: ✭ 216 (-14.96%)
Mutual labels:  expo
Expo Pixi
Tools for using pixi.js in Expo
Stars: ✭ 253 (-0.39%)
Mutual labels:  expo
Galio
Galio is a beautifully designed, Free and Open Source React Native Framework
Stars: ✭ 2,772 (+991.34%)
Mutual labels:  expo
React Native Youtube Iframe
A wrapper of the Youtube-iframe API built for react native.
Stars: ✭ 221 (-12.99%)
Mutual labels:  expo

PDF Reader

Android support 🚀





npm version npm downloads

Read a PDF just with JS (no native libs needed)

Requirements

  • 👉Install react-native-webview on your own!
  • 👉Install expo-file-system on your own!
  • 👉Install expo-constants on your own!
  • Use it into Expo app (from expo client, Standalone app or ExpoKit app).
  • Only React-Native 0.59-0.60+ support, Expo SDK 33-36+

PRs are welcome...

Example

import * as React from 'react'
import { View } from 'react-native'
import PDFReader from 'rn-pdf-reader-js'

export default class App extends React.Component {
  render() {
    return (
      <PDFReader
        source={{
          uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
        }}
      />
    )
  }
}

See more detailed example into App.tsx file.

Props

interface Source {
  uri?: string // can be local or served on the web (ie. start with `https://` or `file://`)
  base64?: string // should start with `data:application/pdf;base64,`. A base64 encoded pdf file tends to start with `JVBERi0xL` so your complete string should look something like this: `data:application/pdf;base64,JVBERi0xL...`
  headers?: { [key: string]: string }
}

interface Props {
  source: Source
  style?: View['props']['style'] // style props to override default container style
  webviewStyle?: WebView['props']['style'] // style props to override default WebView style
  webviewProps?: WebView['props']
  noLoader?: boolean
  useGoogleReader?: boolean // If you are not worried about confidentiality
  withScroll?: boolean // Can cause performance issue
  withPinchZoom?: boolean
  customStyle?: {
    readerContainer?: CSS.Properties
    readerContainerDocument?: CSS.Properties
    readerContainerNumbers?: CSS.Properties
    readerContainerNumbersContent?: CSS.Properties
    readerContainerZoomContainer?: CSS.Properties
    readerContainerZoomContainerButton?: CSS.Properties
    readerContainerNavigate?: CSS.Properties
    readerContainerNavigateArrow?: CSS.Properties
  }
  onLoad?(): void // callback that runs after WebView is loaded
  onLoadEnd?(): void // callback that runs after WebView is loaded
  onError?(): void // callback that runs when WebView is on error
}

Possibilities

Render type Platform Source prop
Custom PDF reader Android uri or base64
Direct from WebView iOS uri or base64
Google PDF Reader Android, iOS uri

What rn-pdf-reader-js use?

  • react-pdf (pdf.js)
  • WebView
  • Base64

FAQ

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].