Glazzes / react-native-zoom-toolkit

Smoothly zoom any image, video or component you want!
https://glazzes.github.io/react-native-zoom-toolkit/
MIT License
158 stars 9 forks source link

[Bug]: extendGestures={true} make pan gesture not work at Android Device #20

Closed PangPangPangPangPang closed 4 months ago

PangPangPangPangPang commented 4 months ago

Summary

extendGestures={false} works fine, but I have some button in ResumableZoom, these button can not trigger onPress callback when extendGestures is false. But when extendGestures is true, I can not pan the content to the left side.

Environment

import React from 'react'
import { Image, Pressable, Text, View, useWindowDimensions } from 'react-native'
import { ResumableZoom, getAspectRatioSize, useImageResolution } from 'react-native-zoom-toolkit'

const uri = 'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg'

const App = () => {
  const { width } = useWindowDimensions()

  // Gets the resolution of your image
  const { isFetching, resolution } = useImageResolution({ uri })
  if (isFetching || resolution === undefined) {
    return null
  }
  return (
    <View style={{
      width: '100%', height: '100%'
    }}>
      < ResumableZoom maxScale={2} extendGestures={true} >
        <View>
          <Pressable onPress={() => { console.log('touch not work') }}><Text> touch me</Text></Pressable>
          <Image source={{ uri }} style={resolution} />
        </View>
      </ResumableZoom >
    </View >
  )
}

export default App

Steps to Reproduce

pan to left but not scroll

Glazzes commented 4 months ago

Your use case is quite interesting as an edge case to take care of, so let me explain.

Pressable component

When using gesture handler, its gestures components have a bigger prescende over any pressable components, for this use case use onTap callback property.

ExtendGestures property

You're attemping to render a big image, bigger than the space ResumableZoom is taking on the screen, extendGestures property is desgined for elements smaller than the space occupied by ResuambleZoom it should make no effect for elements bigger than ResuambleZoom, I actually made a fix to forgive its usage on Gallery component for really big elements but I forgot it should be useful for ResumableZoom aswell.

If you're not sure how this property works, try the example in the docs and attempt to zoom while a finger is in blank area, then set extendGesture to true and try again.

Solution

Your best bet is to set extendGestures to false and use onTap callback property for your pressable needs.

Glazzes commented 3 months ago

After some thoughts in this topic I decided to "fix" this issue, whatever you were attempting to do is now possible in version 2.0.1.