victorsoares96 / epubjs-react-native

ePub.js Reader for React Native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Swipe gesture not working on iOS

smallbonelu opened this issue · comments

Summary

When I swipe left/right, it not go next page and the onSwipe methods are not invoked.

What platform(s) does this occur on?

iOS

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.3.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.1 - ~/.volta/tools/image/node/18.19.1/bin/node
Yarn: 4.1.1 - ~/.volta/tools/image/yarn/4.1.1/bin/yarn
npm: 10.2.4 - ~/.volta/tools/image/node/18.19.1/bin/npm
Managers:
CocoaPods: 1.15.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11330709
Xcode: 15.2/15C500b - /usr/bin/xcodebuild
npmPackages:
react: 18.2.0 => 18.2.0
react-native: 0.73.6 => 0.73.6
@epubjs-react-native/core": 1.4.0-staging.11
Expo Workflow: managed

Minimal reproducible example

I just run the expo example within this repository.

Did you try to do something like this and it didn't work?

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

function Book() {
  const { width, height } = useWindowDimensions();
  const { goPrevious, goNext } = useReader();
  return (
    <View>
      <Reader
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        width={width}
        height={height * 0.7}
        fileSystem={useFileSystem}
        onSwipeLeft={() => console.log('swipe left')}
        onSwipeRight={() => console.log('swipe right')}
      />

      <View
        style={{
          marginTop: 20,
          width: '100%',
          justifyContent: 'space-evenly',
          flexDirection: 'row',
        }}
      >
        <TouchableOpacity onPress={goPrevious}>
          <Text>goPrevious</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={goNext}>
          <Text>goNext</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export function Basic() {
  return (
    <SafeAreaView>
      <ReaderProvider>
        <Book />
      </ReaderProvider>
    </SafeAreaView>
  );
}

Please try again using the latest 1.4.0 beta:

npm i @epubjs-react-native/core@1.4.0-beta.41

I've installed the latest 1.4.0 beta, swipe left/right works. Thank you so much!