onSingleTap, onDoubleTap, onSwipeUp do not work

[wizzbuzz]

Summary

In my app, the gesture handlers for the Reader component do not work at all. They do not run a simple console.log. Besides this, I am getting a warning whenever the Reader is loaded, or swiped to the next page:

(NOBRIDGE) WARN [react-native-gesture-handler] None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread. [Component Stack]

Is the problem related to the warning?

Besides, I can not find information on onSingleTap in the documentation. Also, the onPress event seems depricated, while still being mentioned in the docs.

What platform(s) does this occur on?

Android

What workflow(s) does this occur on?

Expo Workflow

Environment (or package.json)

expo-env-info 1.2.1 environment info: System: OS: Windows 11 10.0.26100 Binaries: Node: 22.11.0 - C:\Program Files\nodejs\node.EXE npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: AI-242.23339.11.2421.12550806 npmPackages: expo: ^52.0.11 => 52.0.11 expo-router: ^4.0.9 => 4.0.9 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 react-native: ^0.76.3 => 0.76.3 react-native-web: ~0.19.13 => 0.19.13 Expo Workflow: managed

Your .epub file

https://www.gutenberg.org/ebooks/2701

Minimal reproducible example

import React, { useEffect, useState } from "react"; import { Gesture } from "react-native-gesture-handler"; import { SafeAreaView, View, Text, StatusBar, StyleSheet, ActivityIndicator, Dimensions, } from "react-native"; import { Reader, useReader } from "@epubjs-react-native/core"; import { useFileSystem } from "@epubjs-react-native/expo-file-system"; import { useLocalSearchParams } from "expo-router"; import { connectToDatabase, getRow } from "../../components/DBManager"; import Colors from "../../constants/Colors"; import CFI from "epub-cfi-resolver"; import Footer from "../../components/Reader/Footer";

const GetDBInfo = async (uri) => { const db = await connectToDatabase(); const result = await getRow(db, "uploadedBooks", uri);

return result; };

export default function bookViewer() { const [params, setParams] = useState(useLocalSearchParams()); const [DBInfo, setDBInfo] = useState(null);

const [hasLoadedPage, setHasLoadedPage] = useState(false); const [showMenu, setShowMenu] = useState(false); const { goToLocation, onSingleTap } = useReader();

// Run only once when the page loads. useEffect(() => { // Gather information, params, DB info const fetchData = async () => { setDBInfo(await GetDBInfo(params.uri)); }; fetchData();

// Get all the locations in the book

// If no DB info is found, save it to the database

// If DB info is found, go to the current page saved in DB

// Set hasLoadedPage to true. Reading can begin.
setHasLoadedPage(true);

}, []);

const onTapReader = () => { console.log("Tap"); };

return (

{hasLoadedPage == false && ( Loading Book )} { if (message.type === "onCfiFromPercentage") { goToLocation(message.cfi); } }} /> {showMenu &&

}

); }

const styles = StyleSheet.create({ safeAreaContainer: { flex: 1, paddingTop: StatusBar.currentHeight, }, loadingView: { width: "100%", height: "100%", justifyContent: "center", alignItems: "center", }, loadingText: { fontFamily: "outfit", fontSize: 20, }, });

I confirm that i have

• [X] I looked for a solution to my problem in other open and resolved issues
• [X] I checked the examples provided solve my problem
• [X] I have verified that my problem is not caused by a third-party library
• [X] I cloned the project environment examples and still the problem persists
• [X] I'm using the latest available version of the library and its complements

[FeMaffezzolli]

I'm having the same problem.

[wizzbuzz]

@FeMaffezzolli I made a simple workaround if you're interested, but I see you are much more experienced than I am! Nonetheless; if you are interested just let me know :)