feat: add haptic feedback support to ButtonAnimated component

Author: PatrykLucka

packages/design-system-react-native/jest.config.js

@@ -43,7 +43,7 @@ module.exports = merge(baseConfig, {
     '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!react-native|@react-native|react-native-reanimated|@react-navigation)',
+    'node_modules/(?!react-native|@react-native|react-native-reanimated|react-native-nitro-haptics|react-native-nitro-modules|@react-navigation)',
   ],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   moduleNameMapper: {

packages/design-system-react-native/jest.setup.js

@@ -15,6 +15,14 @@ jest.mock('react-native-svg', () => {
   };
 });
 
+jest.mock('react-native-nitro-haptics', () => ({
+  Haptics: {
+    impact: jest.fn(),
+    notification: jest.fn(),
+    selection: jest.fn(),
+  },
+}), { virtual: true });
+
 jest.mock('react-native-reanimated', () => {
   const Reanimated = require('react-native-reanimated/mock');
 

packages/design-system-react-native/package.json

@@ -96,6 +96,8 @@
     "react": ">=18.2.0",
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=1.10.3",
+    "react-native-nitro-haptics": ">=0.3.0",
+    "react-native-nitro-modules": ">=0.25.0",
     "react-native-reanimated": ">=3.3.0",
     "react-native-safe-area-context": ">=4.0.0"
   },

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx

@@ -36,6 +36,7 @@ export const ButtonBase = ({
   accessibilityRole = 'button',
   accessibilityActions,
   onAccessibilityAction,
+  hapticFeedback,
   ...props
 }: ButtonBaseProps) => {
   const tw = useTailwind();
@@ -93,6 +94,7 @@ export const ButtonBase = ({
   return (
     <ButtonAnimated
       disabled={isDisabled || isLoading}
+      hapticFeedback={hapticFeedback}
       accessibilityRole={accessibilityRole}
       accessibilityLabel={finalAccessibilityLabel}
       accessibilityHint={finalAccessibilityHint}

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts

@@ -2,6 +2,7 @@ import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
 
 import type { ButtonBaseSize } from '../../types';
 import type { IconProps, IconName } from '../Icon';
+import type { HapticFeedbackStyle } from '../temp-components/ButtonAnimated';
 import type { SpinnerProps } from '../temp-components/Spinner';
 import type { TextProps } from '../Text';
 
@@ -120,6 +121,12 @@ export type ButtonBaseProps = {
   onAccessibilityAction?: (event: {
     nativeEvent: { actionName: string };
   }) => void;
+  /**
+   * Optional haptic feedback style triggered on press.
+   *
+   * @default 'light'
+   */
+  hapticFeedback?: HapticFeedbackStyle;
 } & Omit<
   PressableProps,
   | 'accessibilityRole'

packages/design-system-react-native/src/components/index.ts

@@ -101,7 +101,10 @@ export { Card } from './Card';
 export type { CardProps } from './Card';
 
 export { ButtonAnimated } from './temp-components/ButtonAnimated';
-export type { ButtonAnimatedProps } from './temp-components/ButtonAnimated';
+export type {
+  ButtonAnimatedProps,
+  HapticFeedbackStyle,
+} from './temp-components/ButtonAnimated';
 
 export { ButtonBase, ButtonBaseSize } from './ButtonBase';
 export type { ButtonBaseProps } from './ButtonBase';

packages/design-system-react-native/src/components/temp-components/ButtonAnimated/ButtonAnimated.test.tsx

@@ -1,9 +1,14 @@
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
+import { Haptics } from 'react-native-nitro-haptics';
 
 import { ButtonAnimated } from './ButtonAnimated';
 
 describe('ButtonAnimated', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders correctly', () => {
     const { getByTestId } = render(<ButtonAnimated testID="button" />);
     expect(getByTestId('button')).not.toBeNull();
@@ -49,4 +54,26 @@ describe('ButtonAnimated', () => {
     fireEvent(getByTestId('button'), 'pressIn');
     expect(onPressInMock).not.toHaveBeenCalled();
   });
+
+  it('triggers light haptic feedback by default on press', () => {
+    const { getByTestId } = render(<ButtonAnimated testID="button" />);
+    fireEvent(getByTestId('button'), 'pressIn');
+    expect(Haptics.impact).toHaveBeenCalledWith('light');
+  });
+
+  it('triggers custom haptic feedback style on press', () => {
+    const { getByTestId } = render(
+      <ButtonAnimated testID="button" hapticFeedback="heavy" />,
+    );
+    fireEvent(getByTestId('button'), 'pressIn');
+    expect(Haptics.impact).toHaveBeenCalledWith('heavy');
+  });
+
+  it('does not trigger haptic feedback when set to none', () => {
+    const { getByTestId } = render(
+      <ButtonAnimated testID="button" hapticFeedback="none" />,
+    );
+    fireEvent(getByTestId('button'), 'pressIn');
+    expect(Haptics.impact).not.toHaveBeenCalled();
+  });
 });

packages/design-system-react-native/src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import type { GestureResponderEvent } from 'react-native';
 import { Pressable } from 'react-native';
+import { Haptics } from 'react-native-nitro-haptics';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -18,6 +19,7 @@ export const ButtonAnimated = ({
   disabled,
   style,
   children,
+  hapticFeedback = 'light',
   ...props
 }: ButtonAnimatedProps) => {
   const [isPressed, setIsPressed] = useState(false);
@@ -31,6 +33,9 @@ export const ButtonAnimated = ({
 
   const onPressInHandler = (event: GestureResponderEvent) => {
     setIsPressed(true);
+    if (hapticFeedback !== 'none') {
+      Haptics.impact(hapticFeedback);
+    }
     animation.value = withTiming(0.97, {
       duration: 100,
       easing: Easing.bezier(0.3, 0.8, 0.3, 1),

packages/design-system-react-native/src/components/temp-components/ButtonAnimated/ButtonAnimated.types.ts

@@ -1,6 +1,26 @@
 import type { PressableProps } from 'react-native';
 
+/**
+ * Haptic feedback styles available for button press interactions.
+ * Maps to `Haptics.impact()` styles from react-native-nitro-haptics.
+ * Use `'none'` to disable haptic feedback.
+ */
+export type HapticFeedbackStyle =
+  | 'light'
+  | 'medium'
+  | 'heavy'
+  | 'soft'
+  | 'rigid'
+  | 'none';
+
 /**
  * ButtonAnimated component props.
  */
-export type ButtonAnimatedProps = PressableProps;
+export type ButtonAnimatedProps = PressableProps & {
+  /**
+   * Optional haptic feedback style triggered on press.
+   *
+   * @default 'light'
+   */
+  hapticFeedback?: HapticFeedbackStyle;
+};

packages/design-system-react-native/src/components/temp-components/ButtonAnimated/index.ts

@@ -1,2 +1,5 @@
 export { ButtonAnimated } from './ButtonAnimated';
-export type { ButtonAnimatedProps } from './ButtonAnimated.types';
+export type {
+  ButtonAnimatedProps,
+  HapticFeedbackStyle,
+} from './ButtonAnimated.types';