Pressable usage

[arekrgw]

I've been using Pressable component as a base for Button and IconButton components.

Here's my implementation

// styles...

export type ButtonProps = PressableProps & VariantProps<typeof buttonVariants>;

const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { variant, color, size, className, ...otherProps } = props;

  return <Pressable ref={ref} {...otherProps} className={cn(buttonVariants({ variant, color, size }), className)} />;
});

Button.displayName = 'Button';

export default Button;

And I've been using it like that:

<Button onPress={e => console.log(e)}>Hello</Button

And everything worked until I started testing app on mobile. The issue I came around was that the press event wasn't firing on mobile, after some digging I recreated this on desktop also.

1. It looks like moving cursor by even small amount of px inside button between pressing and release cancels event. I've managed to log the pointerType on mobile and it was "virtual" (maybe it will help).

Screen.Recording.2023-09-24.at.15.34.24.mov

2. It happens on my POCO F3 with Android 13 with Chromium based browsers (works on Firefox). What's strange, everything is fine on Realme with Android 12. Haven't tested on other devices.

After that I was confused and wasn't sure if this Pressable component is for simple buttons, that's why for now I moved to onClick handlers but because of that I'm opting out of some cool accessibility features?

Ark version: 0.15.0

[arekrgw]

As of version 1.0 of Ark this component is removed, I assume normal html button should be used then. Closing