react native 햅틱

https://github.com/mkuczera/react-native-haptic-feedback

프로젝트에서

npm install react-native-haptic-feedback --save

ios에서

1. Xcode에서 프로젝트 열기
   Xcode를 실행한 뒤, 왼쪽 프로젝트 네비게이터에서 본인의 프로젝트 폴더를 선택하세요.

2. 앱 타겟 선택
   "Targets" 섹션에서 본인 앱의 타겟(예: 프로젝트명)을 선택합니다.

3. 링크할 라이브러리 설정
   상단 메뉴에서 Build Phases 탭으로 이동합니다.
   Link Binary With Libraries 섹션을 확장하세요.

4. 라이브러리 추가
   "+" 버튼을 눌러 새로운 라이브러리를 추가합니다.

5. libRNReactNativeHapticFeedback.a 선택
   라이브러리 목록에서 libRNReactNativeHapticFeedback.a를 찾아 선택하고 추가합니다.

android에서

1. MainApplication.java 구성:
   android/app/src/main/java/[프로젝트명]/MainApplication.java 을 엽니다
   파일 맨 위에 다음 가져오기를 추가합니다.
   import com.mkuczera.RNReactNativeHapticFeedbackPackage;

2. settings.gradle을 수정:
   android/settings.gradle에 다음 줄을 추가합니다

include ':react-native-haptic-feedback'
project(':react-native-haptic-feedback').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-haptic-feedback/android')

프로젝트에서

다음과 같이 사용할 수 있다.

import ReactNativeHapticFeedback from "react-native-haptic-feedback";

// Optional configuration
const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false,
};

// Trigger haptic feedback
ReactNativeHapticFeedback.trigger("impactLight", options);

나는 훅으로 작성해보았다.

import { useCallback } from 'react';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';

// 햅틱 옵션 설정
const hapticOptions = {
  enableVibrateFallback: true, // ios에서 햅틱이 지원되지 않을 때 진동으로 대체
  ignoreAndroidSystemSettings: true, // Android에서 햅틱이 지원되지 않을 때 진동으로 대체
};

// 햅틱 피드백을 사용하는 공유 훅 - 다양한 햅틱 피드백 타입을 편리하게 사용할 수 있도록 제공
export const useHaptic = () => {
  // 가벼운 햅틱 피드백 - Dot 탭, 버튼 클릭, 가벼운 상호작용
  const light = useCallback(() => {
    ReactNativeHapticFeedback.trigger('impactLight', hapticOptions);
  }, []);

  // 중간 햅틱 피드백 - 중요한 액션, 메뉴 선택, 중간 정도의 피드백이 필요한 상황
  const medium = useCallback(() => {
    ReactNativeHapticFeedback.trigger('impactMedium', hapticOptions);
  }, []);

  // 강한 햅틱 피드백 - 중요한 알림, 강한 피드백이 필요한 상황
  const heavy = useCallback(() => {
    ReactNativeHapticFeedback.trigger('impactHeavy', hapticOptions);
  }, []);

  // 딱딱한 햅틱 피드백 - 강한 충격감이 필요한 상황, 에러나 경고 상황
  const rigid = useCallback(() => {
    ReactNativeHapticFeedback.trigger('rigid', hapticOptions);
  }, []);

  // 부드러운 햅틱 피드백 - 부드러운 피드백이 필요한 상황, 성공적인 액션
  const soft = useCallback(() => {
    ReactNativeHapticFeedback.trigger('soft', hapticOptions);
  }, []);

  // 성공 햅틱 피드백 - 메모 저장, 작업 완료, 성공적인 액션
  const success = useCallback(() => {
    ReactNativeHapticFeedback.trigger('notificationSuccess', hapticOptions);
  }, []);

  // 경고 햅틱 피드백 - 경고 상황, 주의가 필요한 상황
  const warning = useCallback(() => {
    ReactNativeHapticFeedback.trigger('notificationWarning', hapticOptions);
  }, []);

  // 에러 햅틱 피드백 - 에러 상황, 실패한 액션
  const error = useCallback(() => {
    ReactNativeHapticFeedback.trigger('notificationError', hapticOptions);
  }, []);

  return {
    light,
    medium,
    heavy,
    rigid,
    soft,
    success,
    warning,
    error,
  };
};