epubjs-react-native

A digital book reader in .opf .epub format for react native using epub.js library inside a webview.

Installation

npm install @epubjs-react-native/core

yarn add @epubjs-react-native/core

follow these steps below based on the type of project you want to apply this library:

Bare Installation

npm install @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler

yarn add @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler

Expo Installation

npx expo install @epubjs-react-native/expo-file-system react-native-fs react-native-webview react-native-gesture-handler

If you develop for iOS use this command for install CocoaPods deps (if you use an expo managed project you don't need this)

In your ios project folder run:

npx pod-install

For bare react-native projects, add the following permissions to Info.plist:

<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>

Usage

Wrap your root component in ReaderProvider. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to AppRegistry.registerComponent. This will usually be in the index.js file. If you have an Expo project, you can do this inside the exported component in the App.js file.

import * as React from 'react';
import { AppRegistry } from 'react-native';
import { ReaderProvider } from '@epubjs-react-native/core';
import { name as appName } from './app.json';
import App from './src/App';

export default function Main() {
  return (
    <ReaderProvider>
      <App />
    </ReaderProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

The <ReaderProvider> component provides <Reader> manipulation methods for all components of the framework. Without this the useReader hook will not work.

After the above step you can initialize the reader as follows:

import * as React from 'react';

import { SafeAreaView } from 'react-native';
import { Reader, useReader } from '@epubjs-react-native/core';
// import { useFileSystem } from '@epubjs-react-native/file-system'; // for Bare React Native project
// import { useFileSystem } from '@epubjs-react-native/expo-file-system'; // for Expo project

export default function App() {
  const { goToLocation } = useReader();
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Reader
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        fileSystem={useFileSystem}
      />
    </SafeAreaView>
  );
}

Reader Params

Param	Type	Description
src	string	Can be a base64, epub, opf. Required.
width	number string	The width of the ePub Rendition. Optional.
height	number string	The height of the ePub Rendition. Optional.
fileSystem	function	A function that returns a FileSystem object. Required.
initialLocation	ePubCfi	Can be an ePubCfi or chapter url. Optional.
enableSwipe	boolean	Enable swipe actions. Default is true.
enableSelection	boolean	Enable text selection feature on the book. Default is true.
onSwipeLeft	function	Called when swipe left gesture is detected. Optional.
onSwipeRight	function	Called when swipe right gesture is detected. Optional.
renderLoadingFileComponent	JSX.Element	Render when the book is loading. Optional.
renderOpeningBookComponent	JSX.Element	Appears when the book is been rendering. Optional.
onStarted	function	Called once the book loads is started. Optional.
onReady	function	Called once book has been displayed. Optional.
onDisplayError	function	Called once book has not been displayed. Optional.
onRendered	function	Emit that a section has been rendered. Optional.
onResized	function	Called when occurred a page change. Optional.
onLocationChange	function	Called when occurred a page change. Optional.
onSearch	function	Called once when the book has been searched. Optional.
onLocationsReady	function	Called once the locations has been generated. Optional.
onSelected	function	Called once a text selection has occurred. Optional.
onOrientationChange	function	Called when screen orientation change is detected. Optional.
onPress	function	Called when the book was pressed. Optional.
onDoublePress	function	Called when the book was double pressed. Optional.
onBeginning	function	Called when the book is on the homepage. Optional.
onFinish	function	Called when the book is on the final page. Optional.
onLayout	function	Called when book layout is change. Optional.
defaultTheme	object	Theme object. Optional.
allowScriptedContent	boolean	Allow run scripted content on sandbox. Default is false on Android and true in iOS
allowPopups	boolean	Epubjs is rendering the epub-content inside and iframe which defaults to sandbox="allow-same-origin", to enable opening links or running javascript in an epub, you will need to pass this param.
onPressExternalLink	function	Function that is invoked when external link is pressed. When used, the allowPopups property is automatically enabled
menuItems	array	An array of objects which will be shown when selecting text. An empty array will suppress the menu.
onAddAnnotation	function	Function that is invoked when annotation is added in book.
onChangeAnnotations	function	Function that is invoked when annotations array is modified.
onPressAnnotation	function	Function that is invoked when annotation is pressed.
initialAnnotations	array	Used for load book with annotations attached
onAddBookmark	function
onRemoveBookmark	function
onRemoveBookmarks	function
onUpdateBookmark	function
onChangeBookmarks	function	Function that is invoked when bookmarks array is modified.
initialBookmarks	array	load bookmarks after render book
injectedJavascript	string	Provide JavaScript that will be injected after the book loads.
getInjectionJavascriptFn	function	Provides injectJavascript function, is same the webView function
onWebViewMessage	function	A webview event listener, is same the webView onMessage
manager	default continuous
flow	auto paginated scrolled scrolled-doc scrolled-continuous
snap	boolean
spread	auto none always
fullsize	boolean
waitForLocationsReady	boolean	only render book after locations generated
keepScrollOffsetOnLocationChange	boolean	Prevents scroll top when change location. Works with scrolled-doc flow.

Hooks

useReader

useReader() is a customized hook that will return all Book states and the methods that will help you. Make sure you use it within the ReaderProvider

const { changeFontSize, goToLocation, ... } = useReader();

Methods

Method	Receives	Description
changeFontSize	size	Change font size of all elements in the book. Can be a px, pt or percent.
changeFontFamily	font	Change font family of all elements in the book
goToLocation	cfi	Go to specific location in the book
getLocations		Get the total locations of the book
goPrevious	PaginateOptions	Go to previous page in the book
goNext	PaginateOptions	Go to next page in the book
search	query	Search for a specific text in the book
clearSearchResults	void	Clear search results
changeTheme	theme	Change active theme
getCurrentLocation		Returns the current location of the book
getMeta		Returns an object containing the book's metadata.
addAnnotation	annotation	Attach annotation in the book.
addAnnotationByTagId	annotation	Attach annotation in the book by dom element tag id.
updateAnnotation	annotation, data, styles	Update annotation data and style
updateAnnotationByTagId	annotation, data, styles	Update annotation data and style by dom element tag id
removeAnnotation	annotation	Detach annotation in the book.
removeAnnotationByTagId	annotation	Detach annotation in the book by dom element tag id.
removeAnnotationByCfi cfi		Detach annotations in the book by provided cfi.
removeAnnotations	type?: optional	Detach all annotations in the book. Can be detach by type
removeSelection		Remove selection
addBookmark	bookmark	Attach bookmark
updateBookmark	id, data	Update bookmark data
removeBookmark	bookmark	Remove bookmark
removeBookmarks		Remove all bookmarks
injectJavascript	function	Provide JavaScript that will be injected after the book loads.
changeFlow	Flow	Adjust the flow of the rendition to paginated or scrolled (scrolled-continuous vs scrolled-doc are handled by different view managers)

States

• theme: A object containing theme.
• key: Works like a unique id for book.
• atStart: Indicates if you are at the beginning of the book.
• atEnd: Indicates if you are at the end of the book.
• currentLocation: The current location of the book.
• totalLocations: The total number of locations.
• progress: The progress of the book.
• isLoading: Indicates if the book is loading.
• searchResults: Search results.
• meta: A object containing the book's metadata.
• annotations: A array containing the book's annotations.
• section: A current section(chapter) of the book.
• toc: Also called table of contents, is an ordered list of links into the content.
• landmarks: Containing a array of major sections of the content
• bookmarks: A array containing the bookmarks.
• isBookmarked: Indicates if current location is bookmarked.

The meta object contains:

• cover (string, ArrayBuffer, null or undefined): The book's cover image e.g.data:image/jpeg;base64,/9j/4AAQSkZJ...
• author (string): The name of the book's creator/author e.g. Herman Melville
• title (string): The book's title e.g. Moby-Dick
• description (string): The book's description/summary.
• language (string) : The book's language e.g. en-US
• publisher (string): The eBook's publisher e.g. Harper & Brothers, Publishers
• rights (string): The book's rights e.g. This work is shared with the public using the Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license.

Examples

• You can see the examples demo here

• Examples running on Expo Project

• Examples running on Bare React Native Project

Did you like this project? Consider sponsoring the development of this project to keep it alive! ❤️

License

MIT