epubjs-react-native

To use the framework's features, you must wrap your application (or the component passed to AppRegistry.registerComponent) in the ReaderProvider component.

ReaderProvider provides the context necessary for the useReader hook to function. Without this provider, useReader will not work and you will not be able to access reader manipulation methods.

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);

For vanilla React Native projects, you must install the core package along with file system, webview, and gesture handler dependencies:

npm install @epubjs-react-native/core @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler
# or
yarn add @epubjs-react-native/core @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler

iOS Setup: Run npx pod-install in your iOS project folder.

iOS Permissions: Add the following key to your Info.plist to support opening documents in place:

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

If you have an existing Expo project and want to migrate to TypeScript, follow these steps:

1. Create an empty TypeScript configuration file: touch tsconfig.json.
2. Start your development server using yarn start or npm run start. Expo will automatically detect the config file and configure TypeScript for you.
3. Rename your files to use TypeScript extensions:
   • Use .tsx for React components.
   • Use .ts for plain TypeScript files.

Note: If you need to prevent Expo from automatically configuring TypeScript, you can set the EXPO_NO_TYPESCRIPT_SETUP=1 environment variable when starting the server.

touch tsconfig.json
yarn start
# Or to disable auto-setup:
EXPO_NO_TYPESCRIPT_SETUP=1 expo start

To start a fresh project using Expo with TypeScript pre-configured, follow these steps:

1. Install the Expo CLI globally: npm i -g expo-cli.
2. Initialize a new project using the TypeScript template: npx create-react-native-app -t with-typescript.
3. Navigate into your project directory: cd <project-name>.

Install the core package using npm or yarn:

npm install @epubjs-react-native/core
# or
yarn add @epubjs-react-native/core

For Expo managed projects, use npx expo install to ensure compatible versions of the required dependencies:

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

The ReaderProvider is a context provider that manages the entire state of the ePub reader, including themes, font settings, locations, annotations, and bookmarks. Wrap your application (or the part of your app containing the reader) with ReaderProvider to make the reader's API and state accessible via the ReaderContext.

import { ReaderProvider } from '@epubjs-react-native/core';

function App() {
  return (
    <ReaderProvider>
      {/* Your reader components here */}
    </ReaderProvider>
  );
}

Use the library to intercept and open external links found within the ebook content.

// View implementation at: ../example-expo/examples/OpenExternalLink/index.tsx

You can control where the reader starts by providing an initial location when loading the book.

// View implementation at: ../example-expo/examples/InitialLocation/index.tsx

Implement text markup and annotations to allow users to highlight or mark up text within the ebook.

// View implementation at: ../example-expo/examples/Annotations/index.tsx

Implement search functionality to allow users to find specific terms within the ebook content.

// View implementation at: ../example-expo/examples/Search/index.tsx

You can inject custom scripts into the open ebook instance to extend its behavior or functionality.

// View implementation at: ../example-expo/examples/JavascriptInjection/index.tsx