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

)}
<Reader
src={params.uri}
height={Dimensions.get("screen").height * 0.8}
fileSystem={useFileSystem}
onSingleTap={onTapReader}
onWebViewMessage={(message) => {
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

• I looked for a solution to my problem in other open and resolved issues
• I checked the examples provided solve my problem
• I have verified that my problem is not caused by a third-party library
• I cloned the project environment examples and still the problem persists
• 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 :)

[FeMaffezzolli]

Hey @wizzbuzz ,

Turns out that the warning logs were not preventing the app to work properly.

But out of curiosity, what did you do to get rid of the warnings?

[wizzbuzz]

Hi @FeMaffezzolli, sadly I haven't been able to get rid of the warnings. I just added my own gestures outside of the reader component.

[VLadislav9607]

I'm having the same problem((

[VLadislav9607]

Hi, @wizzbuzz , could you tell me please about your "own gestures outside"? How did you do it?

[wizzbuzz]

Hi @VLadislav9607, of course! Here is my code:

const tap = Gesture.Tap()
    .onEnd(() => {
      // The function you want to be called when tapped
    })
    .runOnJS(true);

<GestureDetector gesture={tap}>
          <Reader
            src={params.uri}
            fileSystem={useFileSystem}
            }}
          />
        </GestureDetector>

You can read more about the gesture detector here: https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/

And please let me know if I can help you with anything else. Good luck!

[VLadislav9607]

@wizzbuzz Thank you so much! Good luck too!

In my case GestureDetector didn't help me, but I used GestureResponder for this

const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(
    null
  );

 const handleTouchStart = (event: GestureResponderEvent) => {
   const { locationX, locationY } = event.nativeEvent;
   touchStartRef.current = {
     x: locationX,
     y: locationY,
     time: Date.now()
   };
 };

 const handleTouchEnd = (event: GestureResponderEvent) => {
   const { locationX, locationY } = event.nativeEvent;

   if (touchStartRef.current) {
     const distanceMoved = Math.sqrt(
       Math.pow(locationX - touchStartRef.current.x, 2) +
         Math.pow(locationY - touchStartRef.current.y, 2)
     );

     const timeDiff = Date.now() - touchStartRef.current.time;

     // Criteria for a tap:
     // 1. Small movement (< 10 pixels)
     // 2. Short touch duration (< 200ms)
     if (distanceMoved < 10 && timeDiff < 200) {
       console.log("Tap detected!");

       setOpenEditor(true);
     }

     // Reset touch reference
     touchStartRef.current = null;
   }
 };

 const memoReader = useMemo(
   () => (
     <Reader
       src={params.epubUrl}
       fileSystem={useFileSystem}
     />
   ),
   []
 );

 return (
   <View
     style={[
       styles.container,
       { paddingTop: top, backgroundColor: COLORS.peach }
     ]}
     onStartShouldSetResponder={() => true}
     onResponderStart={handleTouchStart}
     onResponderRelease={handleTouchEnd}
   >
     {memoReader}
     <EpubEditor
       isOpen={isOpenEditor}
       onClose={() => setOpenEditor(false)}
       activeColor={COLORS.peach}
       activeTab={{ val: ReaderEditorTabs.Settings, label: "Settings" }}
       onChangeColor={(background) => null}
       onChangeTab={() => null}
       setPage={() => null}
     />
   </View>
 );

[victorsoares96]

Hi guys, check if the problem still occurs in the latest published version (v1.4.6)

[VLadislav9607]

Hi, @victorsoares96, i have checked, in my case the problem still occurs

[wizzbuzz]

Hi @victorsoares96, I just checked and the problem still occurs.