search

openspacelabs / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
191 stars 58 forks source link

Pan on ios has jumpy behavior #33

Closed rdreasn closed 2 years ago

rdreasn commented 2 years ago

Jumpy position while panning/dragging on ios (tested on ios 15.4).

thomasttvo commented 2 years ago

Are you using simulator on an M1 mac? React Native Animation doesn't work too well with M1s. Try it on a real device.

bergkamp commented 2 years ago

Same problem when I use M1 mac + real device ( iPhone13 )

thomasttvo commented 2 years ago

@bergkamp does it also happen to the example expo app?

bergkamp commented 2 years ago

Thanks @thomasttvo

I try to run example on my device , got this error:

iOS Bundling failed 334ms Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/zhrs/workshop/bergkamp/react-> native-zoomable-view/src/index.tsx: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:

  1. Clear watchman watches: watchman watch-del-all
  2. Delete node_modules and run yarn install
  3. Reset Metro's cache: yarn start --reset-cache
  4. Remove the cache: rm -rf /tmp/metro-* 1 | import ReactNativeZoomableView from './ReactNativeZoomableView'; 2 | import ReactNativeZoomableViewWithGestures from './ReactNativeZoomableViewWithGestures'; 3 | import { ReactNativeZoomableViewProps, ZoomableViewEvent } from './typings'; 4 |

This is my project running on iPhone13 (iOS 15.4.1)

Double tap on the photo

https://user-images.githubusercontent.com/36283/167333271-769d1a14-e460-4ff4-8514-5f58c43614e6.mov

thomasttvo commented 2 years ago

@bergkamp try again using this snack https://snack.expo.dev/@thomasttvo/e5b899. Do you still see the problem?

bergkamp commented 2 years ago

@bergkamp try again using this snack https://snack.expo.dev/@thomasttvo/e5b899. Do you still see the problem?

Perfect https://user-images.githubusercontent.com/36283/168202663-bcef49e5-0179-4bc9-8ff4-d4f1b0ddbad5.MOV

rdreasn commented 2 years ago

https://snack.expo.dev/@thomasttvo/e5b899

the snack working fine. But it also working fine on snack without zoomAnimatedValue={zoomAnimatedValue} prop.

It's still the same on my simulator Version 13.3.1 (977.2) (M1 mac), and I don't have access to test on real device. I ended up not using getPanMomentumDecayAnim() from source code.

thomasttvo commented 2 years ago

@bergkamp if the snack works fine then it's probably something to do with your local code. Also try replacing the image on the snack to see if the problem can be reproduced.

@rdreasn that's gonna be tricky if you don't have access to a real iOS device. React Native's built-in animation doesn't play well with M1. That said, we're gonna switch to reanimated in v3 so you'll be able to test it on your simulator then. Stay tuned!

For now, I'll close this thread. Let me know if you have any other issues