Pinchable inside a pressable component

[pierroo]

Library works awesome: great job!

One minor inconvenience is that if the pinchable component (image) is inside a parent pressable item, upon leaving the pinched image to zoom, it will trigger the pressable component behind.

is there any way that when the pinch is triggered, it disables any "background" event?

[renanbronchart]

Any answer about that?

[jeffinhk]

We need solution for this issue very much. Anyone know how to mention any related people about this issue?

[jslok]

I use this custom component. If the pinchable action is more than 160 milliseconds, it will avoid triggering the press.

import React from 'react'
import { Pressable } from 'react-native'

const PressableDelayed: React.FC = ({ onPress, children, ...props }) => {
  const timer = React.useRef(0)

  return (
    <Pressable
      onPressIn={() => {
        timer.current = new Date().getTime()
      }}
      onPress={() => {
        if (new Date().getTime() - timer.current > 160) return
        if (onPress) onPress()
      }}
      {...props}
    >
      {children}
    </Pressable>
  )
}

export default PressableDelayed

    <Pinchable>
      <PressableDelayed onPress={...}>
        ...stuff
      </PressableDelayed>
    </Pinchable>

In my use case, the pinchable is the parent but I would guess it works in the reverse as well.