RNGH 3 beta 3 Touchable, and probably others too, need disallowInterruption on IOS?

[grego5]

No issues on android, then after testing the app on ios I had to press 10 times until something is activated.
I wrapped Pressable at first for most of my touch interaction needs with android ripple, then changed it to the new Touchable since it's the same thing but probably the new and most maintained component in the beta, so it has to be perfect.. Well, same thing.
It seems happens specifically when the Touchable is inside a parent that also has tap gesture detector. It's like they don't work simultaneously by default on ios.
For example bottom sheet that has swippable body using pan gesture detector, then buttons based on rngh primitives don't work inside. Though this one I can also guard with activeOffsetX/Y, since I don't need taps.
Or tap gesture wrapper to keyboard dismiss when clicking outside will intercept and block everything on ios.
It's like the gesture detection works bottom up on android and top down on ios? Very convenient for cross platform development, what can I say...

This works though...

    const nativeGesture = useNativeGesture({
      shouldActivateOnStart: true,
      disallowInterruption: true,
      disableReanimated: true,
      enabled: Platform.OS === 'ios' && !disabled,
    });

    return (
      <GestureDetector gesture={nativeGesture}>
        <Touchable
          ref={ref}
          accessible
          accessibilityRole={accessibilityRole}
          accessibilityLabel={accessibilityLabel}
          accessibilityHint={accessibilityHint}
          accessibilityState={
            accessibilityState ? { ...accessibilityState, disabled } : { disabled }
          }
          disabled={disabled}
          androidRipple={androidRippleConfig}
          {...rest}
          style={style}
        >
          {children}
        </Touchable>
      </GestureDetector>
    );

Also found cancelsTouchesInView: false option on parent gestures disable this unintuitive confusing IOS quirk.

const useKeyboardDismissGesture = () => {
  const config = useMemo<TapGestureConfig>(
    () => ({
      maxDuration: 250,
      maxDistance: 12,
      shouldCancelWhenOutside: false,
      disableReanimated: true,
      cancelsTouchesInView: false,
      onFinalize: ({ canceled }) => {
        if (!canceled) Keyboard.dismiss();
      },
    }),
    [],
  );

  return useTapGesture(config);
};

[m-bert]

Hi @grego5! Thank you for your feedback!

It seems happens specifically when the Touchable is inside a parent that also has tap gesture detector.

Is this the setup that you mean?

...
<GestureDetector gesture={tap}>
  <View style={{ width: 200, height: 200, backgroundColor: 'red' }}>
    <Touchable
      style={{ width: 100, height: 100, backgroundColor: 'blue' }}
      onPress={() => {
        console.log('pressed');
      }}
    />
  </View>
</GestureDetector>
...

It's like they don't work simultaneously by default on ios.

I don't think they should work simultaneously, though I have to say that in case of iOS Touchable should have higher priority. Do you agree with that?

Also, could you share some examples that you think behave inconsistently? You've mentioned few, but example code would be great.

Once again, thank you for providing feedback for beta!

[grego5]

i found that simply setting disallowInteruption prop on touchable to false solves all my awkward android and ios interactions with scrolllists, long presses, and swipables.
The prop is not even defined in the type but it works and apparently passed to the host, changing behavior.
I don't know what examples you might want now since this is it, the secret sauce hidden from user.

well, there's also ios quirk where you need to
toggle touchable pointerEvents to disable interactions. disabled doesnt work.

this my base for all buttons. though need to cleanup these accessibility prop reassignments.

const TouchableRipple = forwardRef<ComponentRef<typeof Touchable>, TouchableRippleProps>(
  (props, ref) => {
    const {
      children,
      disabled,
      disallowInterruption = false,
      accessibilityLabel,
      accessibilityHint,
      accessibilityRole = 'button',
      accessibilityState,
      rippleColor,
      androidRipple,
      activeUnderlayOpacity,
      underlayColor,
      style,
      ...rest
    } = props;

...

return (
      <Touchable
        ref={ref}
        accessible
        accessibilityRole={accessibilityRole}
        accessibilityLabel={accessibilityLabel}
        accessibilityHint={accessibilityHint}
        accessibilityState={accessibilityState ? { ...accessibilityState, disabled } : { disabled }}
        disabled={disabled}
        pointerEvents={disabled ? 'none' : 'box-only'}
        //@ts-ignore 
        disallowInterruption={disallowInterruption}
        androidRipple={interactionColors.androidRipple}
        activeUnderlayOpacity={
          activeUnderlayOpacity ?? (Platform.OS === 'ios' ? IOS_ACTIVE_UNDERLAY_OPACITY : undefined)
        }
        underlayColor={Platform.OS === 'ios' ? interactionColors.iosUnderlayColor : underlayColor}
        {...rest}
        style={style}
      >
        {children}
      </Touchable>
    );

[j-piasecki]

What exactly do you mean by

well, there's also ios quirk where you need to toggle touchable pointerEvents to disable interactions. disabled doesnt work.

pointerEvents={disabled ? 'none' : 'box-only'} will make it so that when disabled, only Touchable can handle touch and none of its children. disabled only works on the Touchable itself and not for anything in its subtree - a disabled Touchable can have an enabled Touchable as a descendant, and the inner one is expected to work. If your use case requires otherwise, then your approach with pointerEvents is the right one.

[grego5]

I did another sanity check, now it seems fine without explicit pointer events setting. The touchable is disabled while disabled on ios as expected. I had it with just submit button, nothing nested. Maybe confused with something else then.

[m-bert]

i found that simply setting disallowInteruption prop on touchable to false solves all my awkward android and ios interactions with scrolllists, long presses, and swipables.

We've done some changes to Native gesture (e.g. this PR). This will be included in beta.4, but you can also check that with nightly release.