Book Pages position got disturbed when try to select multiple lines or swiping fast

Summary

I am working on a React native epub book reader for both IOS and Android, the problem is that if we select one of the lines to highlight the text and drag the selected text to multiple lines or along the boundary of the mobile, the page position gets disturbed

I tried to change the highlight color option model but still the problem was same this is very bad for the user, I am looking for the solution but cannot understand what the problem is

What platform(s) does this occur on?

Android, iOS

What workflow(s) does this occur on?

Bare Workflow

Environment (or package.json)

{ "name": "aabBooksMobile", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "patch-package && react-native start", "test": "jest", "android-wifi": "adb kill-server && adb tcpip 5555 && adb connect 192.168.0.32:5555 && adb devices" }, "dependencies": { "@epubjs-react-native/core": "^1.4.4", "@epubjs-react-native/file-system": "^1.1.2", "@gorhom/bottom-sheet": "^4.6.1", "@react-native-async-storage/async-storage": "^1.22.3", "@react-native-clipboard/clipboard": "^1.14.1", "@react-navigation/bottom-tabs": "^6.5.19", "@react-navigation/native": "^6.1.16", "@react-navigation/native-stack": "^6.9.25", "@reduxjs/toolkit": "^2.2.2", "axios": "^1.6.8", "eventemitter3": "^5.0.1", "patch-package": "^8.0.0", "react": "18.2.0", "react-native": "0.73.6", "react-native-bouncy-checkbox": "^3.0.7", "react-native-dropdown-select-list": "^2.0.5", "react-native-element-dropdown": "^2.10.4", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "^2.16.0", "react-native-global-font": "^1.0.3", "react-native-popup-menu": "^0.16.1", "react-native-range-slider": "^0.1.2", "react-native-raw-bottom-sheet": "^3.0.0", "react-native-reanimated": "^3.8.1", "react-native-reanimated-carousel": "^3.5.1", "react-native-safe-area-context": "^4.9.0", "react-native-screens": "^3.29.0", "react-native-simple-dialogs": "^2.0.3", "react-native-snap-carousel": "^4.0.0-beta.6", "react-native-swipe-gestures": "^1.0.5", "react-native-webview": "^13.8.4", "react-redux": "^9.1.0", "rn-range-slider": "^2.2.2" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.73.21", "@react-native/eslint-config": "0.73.2", "@react-native/js-polyfills": "^0.75.0-main", "@react-native/metro-babel-transformer": "^0.75.0-main", "@react-native/metro-config": "^0.73.5", "@react-native/typescript-config": "0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "metro-config": "^0.80.7", "metro-runtime": "^0.80.7", "prettier": "2.8.8", "react-native-svg": "^15.1.0", "react-native-svg-transformer": "^1.3.0", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }

Your .epub file

https://aab-book-stag.s3.eu-west-2.amazonaws.com/65718a24835592f22a309948/9780853304029.epub

Minimal reproducible example

I have reproduced the bug with your basic-example; changing the code like this

import * as React from 'react';
import {SafeAreaView} from 'react-native';
import {Reader, ReaderProvider, useReader} from '@epubjs-react-native/core';
import {useFileSystem} from '@epubjs-react-native/file-system';

export default function Basic() {
  const {addAnnotation, removeAnnotation, annotations} = useReader();

  return (
    <SafeAreaView style={{flex: 1}}>
      {/* <ReaderProvider> */}
      <Reader
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        fileSystem={useFileSystem}
        enableSelection
        menuItems={[
          {
            label: '🟡',
            action: cfiRange => {
              addAnnotation('highlight', cfiRange, undefined, {
                color: COLORS[2],
              });
              return true;
            },
          },
          {
            label: '🔴',
            action: cfiRange => {
              addAnnotation('highlight', cfiRange, undefined, {
                color: COLORS[0],
              });
              return true;
            },
          },
          {
            label: '🟢',
            action: cfiRange => {
              addAnnotation('highlight', cfiRange, undefined, {
                color: COLORS[3],
              });
              return true;
            },
          },
          {
            label: 'Add Note',
            action: (cfiRange, text) => {
              setSelection({cfiRange, text});
              addAnnotation('highlight', cfiRange, {isTemp: true});
              annotationsListRef.current?.present();
              return true;
            },
          },
        ]}
      />
      {/* </ReaderProvider> */}
    </SafeAreaView>
  );
}

just select some text and grab one of the selection handles, then move that selection handle along with all corners of the mobile, it will show like this

and then it remains like this even if you navigate between pages

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 cloned the project environment examples and still the problem persists
[X] I have verified that my problem is not caused by a third-party library
[X] I'm using the latest available version of the library and its complements

victorsoares96 / epubjs-react-native