vemarav / react-native-avatar-crop

Highly customisable <Crop /> component for React Native < 💅 >
https://www.npmjs.com/package/react-native-avatar-crop
MIT License
54 stars 14 forks source link

Pinch to zoom gesture not working on Android when used inside ScrollView #12

Closed christianrank closed 2 years ago

christianrank commented 2 years ago

Describe the bug When the Crop component is used inside of a ScrollView, the image can't be zoomed with 2 fingers on Android, instead the ScrollView is moving. Just moving the image with 1 finger works fine.

On iOS, everything works as expected.

To Reproduce Steps to reproduce the behavior:

  1. Put the <Crop> inside a <ScrollView>
  2. Try to zoom the image with 2 fingers on Android
  3. The screen is scrolling

Expected behavior Pinch to zoom should work on Android also when used inside a ScrollView.

Smartphone:

Additional context Might be related: https://github.com/software-mansion/react-native-gesture-handler/issues/1082

vemarav commented 2 years ago

change import { ScrollView } from 'react-native'; to import { ScrollView } from 'react-native-gesture-handler';

christianrank commented 2 years ago

I tried that already, it didn't work.

(tried with react-native-gesture-handler versions 1.10.3 and 2.1.0)

vemarav commented 2 years ago

Try following scrollview props, if it still doesn't work please create a reproducible repo

//...
import { ScrollView } from 'react-native';

//...
<ScrollView 
disableScrollViewPanResponder={true}
nestedScrollEnabled={true}
pinchGestureEnabled={false}
>
<Crop>
//...
</ScrollView>
christianrank commented 2 years ago

Thanks, I also didn't have luck with that.

I'm currently trying to setup a reproduction repo, but with a fresh project I can't get any gestures working on Android, even without using a ScrollView on this screen I can't move the image now. It's working fine on iOS.

So this repo isn't showing the bug yet, but something else is already broken.

I'm giving up for today, but maybe you have an idea?

https://github.com/christianrank/react-native-avatar-crop-bug-reproduction

vemarav commented 2 years ago

The example already uses a scrollview and it works, https://github.com/vemarav/react-native-avatar-crop/blob/d0910826126869e22d82aa2d8acc0762df1a1fe9/example/CropImage.tsx#L46

use react-native-gesture-handler@1.10.3

WIP to support react-native-gesture-handler v2

nitin41 commented 2 years ago

Please check #14 for the solution.