roninoss / rn-primitives

Style-agnostic, accessible React Native components for iOS, Android, and Web
https://rnprimitives.com
MIT License
424 stars 12 forks source link

Label onPress callbacks are not working #36

Closed kaumac closed 1 month ago

kaumac commented 1 month ago

I can't get onPress, onLongPress, onPressIn or onPressOut to work on LabelPrimitive.Root... It works if I add them to LabelPrimitive.Text, but that creates all sorts of bugs and weird behaviors.

On the reusables form showcase demo (https://rnr-showcase.vercel.app/form) you can click all labels and they trigger the input elements, but I copied the exact same code from the "showcase/form" source on github and yet the labels don't work, it's driving me crazy!

I don't know if I should post it on the rn-reusables repo or here, but I imagine its here because the primitives don't seem to trigger the callbacks.

Could anyone help me with this?

sakhnyuk commented 1 month ago

Facing with the same issue. Fixed by adding onPress callback to the Text component

UPD: Check next comment

sakhnyuk commented 1 month ago

@kaumac So, digging further I was able to make it work as it should (without additional onPress callbacks). This is a demo component:

export const CheckboxDemo = () => {
  const [checked, setChecked] = React.useState(false);

  return (
    <View className="flex-row gap-3 items-center">
      <Checkbox
        id="terms-checkbox"
        checked={checked}
        onCheckedChange={setChecked}
      />
      <Label
        nativeID="terms-label"
        htmlFor="terms-checkbox"
        onPress={Platform.OS !== "web" ? () => setChecked((prev) => !prev) : undefined}
      >
        Accept terms and conditions
      </Label>
    </View>
  );
};
mrzachnugent commented 1 month ago

@kaumac Please install the latest version of the label primitive, it was just released with the fix.