5-stones / react-native-readium Goto Github PK

I'm having problems with fullscreen on android, to be honest I would like to remove it, is there any way to do this?

The app's fullscreen on android does not remove the React Navigation Header, and besides, if I activate and deactivate the fullscreen a few times in a row, the location starts to "return" to the beginning of the chapter. I believe that removing the fullscreen action solves the location problem

the fullscreen action I mean, is when you click in the middle of the screen

I wish to know if this is any solution for preventing users from copying the text from the reader and taking screenshot.

Thanks for creating this library.

When an epub is loaded with toc, if the href contains '#', navigation doesn't work properly.

Attached a sample epub with toc href values like
<a href="7604861093435514544_67098-h-0.htm.xhtml#pgepubid00012" id="np-13">IN WHICH EEYORE LOSES A TAIL AND POOH FINDS ONE</a>

pg67098-images-3.epub.zip

Currently setting Link object location as

{ href: "7604861093435514544_67098-h-0.htm.xhtml#pgepubid00012", type: 'application/xhtml+xml',}

I need help on giving file path to ReadiumView
@jspizziri @mrogers-5s @Ken-Michalak

import { observer } from "mobx-react-lite"
import React, { FC, useEffect, useMemo } from "react"
import {
  ActivityIndicator,
  StyleSheet,
  View,
  SafeAreaView,
  useWindowDimensions
} from "react-native"
import { Reader, ReaderProvider, useReader, ePubCfi } from '@epubjs-react-native/core'
import { useFileSystem } from '@epubjs-react-native/file-system'
import { AppStackScreenProps } from "../../navigators"
import WebView from "react-native-webview"
import AppHeader from "../../components/AppHeader"
import { spacing } from "../../theme"
import { ReadiumView } from 'react-native-readium';
import type { File } from 'react-native-readium';


export const ReadFile: FC<AppStackScreenProps<"ReadFile">> = observer(({ route }) => {
  const { width, height } = useWindowDimensions();
  const [file] = React.useState<File>({
    url: require('../../../assets/storybook/book.epub'),
  });

  return (
    <SafeAreaView style={styles.container}>
      <View style={{flex:1, marginTop: spacing.extraLarge}}>
      <AppHeader backButton/>
      </View>
      <ReadiumView file={file}/>
    </SafeAreaView>
  )
})


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
  },
})

In my eBook application, measures are in place to restrict users from copying book content as a piracy prevention strategy. However, applications such as Google Reading Mode have activated accessibility features, allowing them to access our book content. Is there an approach to block accessibility features in the react-Native-readium package?

Because of the dependency R2Streamer i can not run for IOS with XCode 15.

Swift Compiler Error (Xcode): /Users/coderythm/workspace/Digilib/bilal/wordrobe_mobile_app/ios/Pods/R2Streamer/Sources/Streamer/Server/PublicationServer.swift:364:6 Stored properties cannot be marked unavailable with '@available'

XCode version : 15.0
pods version : 1.12.1

Is readium support bookmark feature? if yes, How can I add?

Can highlighting be added?

tried all . facing these error
1.projectpath/ios/Pods/SwiftSoup/Sources/TokeniserState.swift:98:19 Protocol 'TokeniserStateProtocol' requires 'read' to be available in iOS 8.0 and newer

tried everything - clean build folder pod install

any help appreciated

Thanks.

I was able to change the appearance, font size, etc. But on Android, these changes last forever. It did not reset automatically. It works fine on iOS

Location doesn't work on Android. Always opens the first page. Locator props works fine.

<ReadiumView
file={{url: filePath}}
settings={settings}
location={{
href: '/EPUB/text/ch002.xhtml',
locations: {
position: 5,
progression: 0,
totalProgression: 0.024390243902439025,
},
type: 'application/xhtml+xml',
}}
onLocationChange={locator => locationChanged(locator)}
/>

Error: lateinit property navigator has not been initialized

I'm trying to use this library with the latest React Native version 0.73.4

But I'm having problems on Android.
I'm running the app from an emulator.

How to reproduce

npx react-native@latest init Readium073
yarn add react-native-readium
yarn android

or use my repo

https://github.com/casperolesen/Readium073

Java version error

`Execution failed for task ':react-native-readium:compileDebugKotlin'.

'compileDebugJavaWithJavac' task (current target is 17) and 'compileDebugKotlin' task (current target is 1.8) jvm target compatibility should be set to the same Java version. Consider using JVM toolchain: https://kotl.in/gradle/jvm/toolchain`

I've tried to remove this from the build.gradle

kotlinOptions {
    jvmTarget = "1.8"
  }

This fixes the issues with the Java version.

Build failed with an exception

I'm now getting multiple errors when trying to build like

/react-native-readium/android/src/main/java/com/reactnativereadium/ReadiumView.kt:62:7 'when' expression must be exhaustive, add necessary 'is Failure', 'OpenDrmManagementRequested', 'OpenOutlineRequested', 'StartNewSearch' branches or 'else' branch instead
/react-native-readium/android/src/main/java/com/reactnativereadium/epub/UserSettings.kt:226:73 Unresolved reference: webView
/react-native-readium/android/src/main/java/com/reactnativereadium/reader/EpubReaderFragment.kt:112:55 Unresolved reference: epub_navigator_tag

I can get the build to complete by fixing or removing the lines with errors.

Metro error

Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release

This is were I'm stuck now.

When I remove react-native-readium the app is running fine again.

I'm not an experienced kotlin developer, but I would like to help fixing this! 🦸‍♂️
I just don't know if it's a small bug or something that needs a bigger rewrite of this library.

If someone else can confirm that it's not working with the latest release of React Native - how should we fix it?

Please check the following video;

It works fine in debug mode. But, in the release build app crashes when navigating to ReadiumView page.

How can I change the initial loading activity indicator?

Is there support for pdf files?

I would like to add highlight/underline and ability to add notes feature . From my understanding in readium architecture a text object in Locator helps us to access text in the publication. But I’m not getting the text object in react native readium. Could you please provide information on how to access the text object using React Native Readium?

If my explanation isn't clear, the text object I'm referring is : https://readium.org/architecture/models/locators/#the-text-object

I'm having issues with brightness on the page I implemented Readium. The brightness is the same as the system brightness on other pages in the app, but the brightness changes when I navigate to the page with Readium. Also I would like to know if there is any way to control the brightness as in the kotlin-readium?

Add the ability to view PDF files in addition to the other currently supported formats.

Hi guys,

is there any example to search in the book ?

Readium full screen option works well on iOS. But it doesn't work well on Android.

In android :- Title and status bar part is not hidden in full screen option. Is there an option to enable / disable full screen? Also, how to handle the bottom page number indication? (Page number hint doesn't work on Android)

Please check the following screenshots;

iOS

android

Support for react-native-web via https://github.com/readium/ts-toolkit

EDIT: at the time of initial exploration the above readium lib is not production ready

As a result, initial implementation will be done via https://github.com/d-i-t-a/R2D2BC

On iOS the page number is shown below. But it doesn't show in Android. How to handle page number indicator?

I'm trying to disable copying text from the reader. Can someone please explain how to disable the "SelectionActionModeCallback" menu?

The following error is caused by an outdated kotlin-toolkit dependency:

[stderr] 
FAILURE:
[stderr] 
Build failed with an exception.
[stderr] 
* What went wrong:
[stderr] 
Could not determine the dependencies of task ':app:buildReleasePreBundle'.
[stderr] 
>
[stderr] 
Could not resolve all task dependencies for configuration ':app:releaseRuntimeClasspath'.
[stderr] 
>
[stderr] 
Could not find com.shopgun.android:utils:1.0.9.
[stderr] 
Searched in the following locations:
[stderr] 
- http://10.4.1.4:8081/artifactory/libs-release/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - file:/home/expo/.m2/repository/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - file:/home/expo/workingdir/build/node_modules/react-native/android/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - file:/home/expo/workingdir/build/node_modules/jsc-android/dist/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - https://dl.google.com/dl/android/maven2/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - https://repo.maven.apache.org/maven2/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - https://www.jitpack.io/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
       - https://plugins.gradle.org/m2/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
[stderr] 
     Required by:
[stderr] 
         project :app > project :react-native-readium > com.github.readium.kotlin-toolkit:readium-navigator:2.2.1

After a brief discussion here it looks like this project needs to get updated to version 2.3. I noticed there is an open PR #38 containing the required changes. Just checking if it has been forgotten or it will be released soon?

Could you please assist me in resolving an issue I encountered while attempting to run the Example app on Android using npm and yarn? Unfortunately, I'm currently facing an error message.

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Volumes/Data/WorkSpace/RNReadium/react-native-readium/src/components/ReadiumView.tsx: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
../../../../node_modules

1 | import React, { useCallback, useState, useRef, useEffect } from 'react';
2 | import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
3 |
4 | import type { BaseReadiumViewProps, Dimensions } from '../interfaces';

I have made several attempts to resolve the issue by trying different node versions, namely v14.20.1, v16.18.1, and v18.14.0. Despite multiple attempts, including deleting node modules, package.json, and yarn.lock files, clearing the cache, and adjusting the package version of @babel/runtime, I have been unable to successfully resolve the problem. Could you kindly assist me in finding a solution to this issue?

Hi,

On a clean clone of this repo I tried building the example app for android following this guide: Example App

First yarn bootstrap and yarn example start work fine. But i get the following error in the next step of yarn example android:

warn Package react-native-vector-icons contains invalid configuration: "dependency.assets" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.
info JS server already running.
info Installing the app...

FAILURE: Build failed with an exception.

* What went wrong:
Could not open settings generic class cache for settings file '/home/robert/code/polyglot/react-native-main/react-native-readium/example/android/settings.gradle' (/home/robert/.gradle/caches/7.5.1/scripts/hnp36d491odjmf9trkeyzhln).
> BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 63

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 944ms

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Could not open settings generic class cache for settings file '/home/robert/code/polyglot/react-native-main/react-native-readium/example/android/settings.gradle' (/home/robert/.gradle/caches/7.5.1/scripts/hnp36d491odjmf9trkeyzhln).
> BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 63

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 944ms

    at makeError (/home/robert/code/polyglot/react-native-main/react-native-readium/example/node_modules/execa/index.js:174:9)
    at /home/robert/code/polyglot/react-native-main/react-native-readium/example/node_modules/execa/index.js:278:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOnAllDevices (/home/robert/code/polyglot/react-native-main/react-native-readium/example/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:82:7)
    at async Command.handleAction (/home/robert/code/polyglot/react-native-main/react-native-readium/example/node_modules/@react-native-community/cli/build/index.js:108:9)
info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Using the example app, I'm unable to navigate to the selected page. The modal closes but it doesn't perform the navigation.

Upon further investigation, I found out that onPress parameter on TableOfContents component returns a Link and not a Locator.

I also attempted to use the returned Link object as the initialLocation but it didn't work too.

Swipe navigation works as expected.

Please add a method to to get text from currently displayed page.

Whats would this enable:

It would be helpful to implement accessibility options i.e. text-to-speech implementations.
Or ability to get a copy of text if the ePub might be educational for example.
Ability to create implementation for citations.
etc....

Personally i would love if it was in one of two formats:
a) A method accessible through ref you can manually call.
b) A callback that is fired on page change.

I personally favor option a but this is only an opinion.

Add support for LCP content protection

The error warning occurs when following the guide to build and run the example app [Example App] (https://github.com/5-stones/react-native-readium/blob/main/example/README.md). It is shown in Metro after the app starts (see screenshot). There is also a warning pop up in the app itself (see second screenshot).

Is there any way to track reading progress in react-native-readium?

• What went wrong:
  Could not determine the dependencies of task ':react-native-readium:compileReleaseAidl'.

Could not resolve all task dependencies for configuration ':react-native-readium:releaseCompileClasspath'.
Could not find com.github.edrlab.nanohttpd:nanohttpd:master-SNAPSHOT.
Required by:
project :react-native-readium
Could not find com.github.edrlab.nanohttpd:nanohttpd-nanolets:master-SNAPSHOT.
Required by:
project :react-native-readium

• Try:

Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.3.3/userguide/command_line_interface.html#sec:command_line_warnings

Is readium support TTS feature? if yes, How can I use that?

Hi Jacob,
This package seems to be very promising! Wanted to have an updated on Readium LCP support.

Can we expect it in any nearest future? How big/challenging is the scope of works seems to be?

Thanks in advance.

With these specifications, I tried to install the build.gradle and the latest version of React Native, but I failed to get the build.
buildscript {
ext {
buildToolsVersion = "34.0.0"
minSdkVersion = 21
compileSdkVersion = 34
targetSdkVersion = 34
ndkVersion = "23.1.7779620"
kotlinVersion = "1.8.0"
}
repositories {
google()
mavenCentral()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle")
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
}
}

I encountered the following errors:
Could not determine the dependencies of task ':app:processDebugResources'.

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not resolve com.github.barteksc:android-pdf-viewer:2.8.2.
Required by:
project :app > project :react-native-readium > com.github.readium.kotlin-toolkit:readium-navigator:2.2.1
> Could not resolve com.github.barteksc:android-pdf-viewer:2.8.2.
> Could not get resource 'https://www.jitpack.io/com/github/barteksc/android-pdf-viewer/2.8.2/android-pdf-viewer-2.8.2.pom'.
> Could not GET 'https://www.jitpack.io/com/github/barteksc/android-pdf-viewer/2.8.2/android-pdf-viewer-2.8.2.pom'. Received status code 401 from server: Unauthorized
Could not find com.duolingo.open:rtl-viewpager:1.0.3.
Searched in the following locations:
- https://oss.sonatype.org/content/repositories/snapshots/com/duolingo/open/rtl-viewpager/1.0.3/rtl-viewpager-1.0.3.pom
- https://repo.maven.apache.org/maven2/com/duolingo/open/rtl-viewpager/1.0.3/rtl-viewpager-1.0.3.pom
- file:/C:/Users/UP/Desktop/tessset/ZiBook/node_modules/jsc-android/dist/com/duolingo/open/rtl-viewpager/1.0.3/rtl-viewpager-1.0.3.pom
- https://dl.google.com/dl/android/maven2/com/duolingo/open/rtl-viewpager/1.0.3/rtl-viewpager-1.0.3.pom - https://www.jitpack.io/com/duolingo/open/rtl-viewpager/1.0.3/rtl-viewpager-1.0.3.pom
Required by:
project :app > project :react-native-readium > com.github.readium.kotlin-toolkit:readium-navigator:2.2.1
Could not find com.shopgun.android:utils:1.0.9.
Searched in the following locations:
- https://oss.sonatype.org/content/repositories/snapshots/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
- https://repo.maven.apache.org/maven2/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
- file:/C:/Users/UP/Desktop/tessset/ZiBook/node_modules/jsc-android/dist/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
- https://dl.google.com/dl/android/maven2/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
- https://www.jitpack.io/com/shopgun/android/utils/1.0.9/utils-1.0.9.pom
Required by:
project :app > project :react-native-readium > com.github.readium.kotlin-toolkit:readium-navigator:2.2.1

What is wrong???