React Native Expo 환경에서 햅틱 구현하기

햅틱을 구현하기 위해서는 가장 먼저 expo-haptics를 설치해야한다.

pnpm expo install expo-haptics

이후 버튼을 눌렀을 때 햅틱이 반응하게 하고싶다면 다음과 같이 작성한다.

// src/app/index.tsx

import * as Haptics from "expo-haptics";
import { Pressable, StyleSheet, Text, View } from "react-native";

export default function HomeScreen() {
  const handlePress = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  };

  return (
    <View style={styles.container}>
      <Pressable onPress={handlePress} style={styles.button}>
        <Text>누르기</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: "#eee",
  },
});