feat(components): 🚀 add Haptic feedback to tappable components

Author: Karthik-B-06

src/components/button/Button.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useCallback } from "react";
 import {
+  GestureResponderEvent,
   Platform,
   PressableProps,
   PressableStateCallbackType,
@@ -14,6 +15,7 @@ import {
   cx,
   generateBoxShadow,
   styleAdapter,
+  useHaptic,
   useOnFocus,
   useOnHover,
   useScaleAnimation,
@@ -91,6 +93,12 @@ export interface ButtonProps extends PressableProps {
    * VoiceOver will read this string when a user selects the associated element.
    */
   accesibilityLabel: string;
+  /**
+   * When set to true, The Tap creates a Touch Feedback
+   * Check more -> https://docs.expo.dev/versions/latest/sdk/haptics/
+   * @default true
+   */
+  hapticEnabled: boolean;
 }
 
 const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
@@ -103,27 +111,36 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
       variant = "solid",
       themeColor = "base",
       loading = false,
+      hapticEnabled = true,
       prefix,
       suffix,
       iconOnly,
       spinner,
       textStyle,
       style,
       accesibilityLabel,
+      onPress,
       ...props
     },
     ref,
   ) => {
     const { ts, gc } = useTailwind();
     const buttonTheme = useTheme("button");
     const { handlers, animatedStyle } = useScaleAnimation();
+    const { hapticMedium } = useHaptic();
     const { onHoverIn, onHoverOut, hovered } = useOnHover();
     const { onFocus, onBlur, focused } = useOnFocus();
 
     const iconAspectRatio = 1;
 
     const isButtonDisabled = props.disabled || loading;
 
+    const handlePress = useCallback((event: GestureResponderEvent) => {
+      onPress && onPress(event);
+      hapticEnabled && hapticMedium();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     /**
      * Button Prefix Component
      */
@@ -329,6 +346,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
           ref={ref}
           disabled={isButtonDisabled}
           {...handlers}
+          onPress={handlePress}
         >
           {children}
         </Touchable>

src/components/checkbox/Checkbox.tsx

@@ -22,6 +22,7 @@ import {
   cx,
   generateBoxShadow,
   styleAdapter,
+  useHaptic,
   useOnFocus,
   useOnHover,
   useScaleAnimation,
@@ -91,6 +92,12 @@ export interface CheckboxProps extends TouchableProps {
    * Checkbox State Value if inside CheckboxGroup
    */
   value: string;
+  /**
+   * When set to true, The Tap creates a Touch Feedback
+   * Check more -> https://docs.expo.dev/versions/latest/sdk/haptics/
+   * @default true
+   */
+  hapticEnabled: boolean;
 }
 
 const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
@@ -117,12 +124,18 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
     setSelected,
     isInvalid,
     accessibilityLabel = "Check me",
+    hapticEnabled = true,
     isIndeterminate,
     isDisabled,
     style,
     index,
   } = props;
 
+  const { onHoverIn, onHoverOut, hovered } = useOnHover();
+  const { onFocus, onBlur, focused } = useOnFocus();
+  const { handlers, animatedStyle } = useScaleAnimation();
+  const { hapticSelection } = useHaptic();
+
   const hasOnlyLabel = label && !description;
 
   const size = checkboxGroupState
@@ -165,6 +178,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
   }, [checkboxToggleState.isSelected, isIndeterminate]);
 
   const handleChange = useCallback(() => {
+    hapticEnabled && hapticSelection();
     if (checkboxGroupState) {
       if (props.value) {
         if (checkboxToggleState.isSelected) {
@@ -176,12 +190,9 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
     } else {
       checkboxToggleState.toggle();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkboxGroupState, checkboxToggleState, props.value]);
 
-  const { onHoverIn, onHoverOut, hovered } = useOnHover();
-  const { onFocus, onBlur, focused } = useOnFocus();
-  const { handlers, animatedStyle } = useScaleAnimation();
-
   const children = ({
     pressed = false,
     isHovered = false,

src/components/radio/Radio.tsx

@@ -14,6 +14,7 @@ import {
   cx,
   generateBoxShadow,
   styleAdapter,
+  useHaptic,
   useOnFocus,
   useOnHover,
   useScaleAnimation,
@@ -49,6 +50,12 @@ export interface RadioProps extends TouchableProps {
    * @default "Tap me"
    */
   accesibilityLabel: string;
+  /**
+   * When set to true, The Tap creates a Touch Feedback
+   * Check more -> https://docs.expo.dev/versions/latest/sdk/haptics/
+   * @default true
+   */
+  hapticEnabled: boolean;
 }
 
 const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
@@ -61,6 +68,7 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
     isInvalid = false,
     isDisabled: isDisabledFromProps,
     accesibilityLabel = "Tap me",
+    hapticEnabled = true,
     style,
     index,
     focusable,
@@ -79,8 +87,10 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
 
   const { onHoverIn, onHoverOut, hovered } = useOnHover();
   const { onFocus, onBlur, focused } = useOnFocus();
+  const { hapticSelection } = useHaptic();
   const { handlers, animatedStyle } = useScaleAnimation();
   const state = useRadioGroupContext();
+
   const {
     themeColor: themeColorFromGroupContext,
     size: sizeFromGroupContext,
@@ -101,9 +111,11 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
   }, [index, props?.value, selectedValue, setFocusableIndex]);
 
   const handleChange = useCallback(() => {
+    hapticEnabled && hapticSelection();
     // @ts-ignore
     setSelectedValue(props?.value);
     setFocusableIndex(index as number);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index, props?.value, setFocusableIndex, setSelectedValue]);
 
   const size = sizeFromGroupContext;

src/components/tag/Tag.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useCallback } from "react";
 import {
+  GestureResponderEvent,
   Platform,
   PressableProps,
   PressableStateCallbackType,
@@ -15,6 +16,7 @@ import {
   generateBoxShadow,
   RenderPropType,
   styleAdapter,
+  useHaptic,
   useOnFocus,
   useOnHover,
   useScaleAnimation,
@@ -69,6 +71,12 @@ export interface TagProps extends PressableProps {
    * VoiceOver will read this string when a user selects the associated element.
    */
   accesibilityLabel: string;
+  /**
+   * When set to true, The Tap creates a Touch Feedback
+   * Check more -> https://docs.expo.dev/versions/latest/sdk/haptics/
+   * @default true
+   */
+  hapticEnabled: boolean;
 }
 
 const RNTag: React.FC<Partial<TagProps>> = forwardRef<
@@ -81,6 +89,8 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
   const { onHoverIn, onHoverOut, hovered } = useOnHover();
   const { onFocus, onBlur, focused } = useOnFocus();
   const { handlers, animatedStyle } = useScaleAnimation();
+  const { hapticSelection } = useHaptic();
+
   const {
     size = "md",
     variant = "solid",
@@ -91,9 +101,17 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
     style,
     textStyle,
     accesibilityLabel,
+    hapticEnabled = true,
+    onPress,
     ...otherProps
   } = props;
 
+  const handlePress = useCallback((event: GestureResponderEvent) => {
+    onPress && onPress(event);
+    hapticEnabled && hapticSelection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   /* Prefix Slot */
   const _prefix =
     prefix &&
@@ -226,6 +244,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
         accessibilityRole="button"
         accessibilityLabel={accesibilityLabel}
         {...handlers}
+        onPress={handlePress}
       >
         <>
           {_prefix}