React-Natvie에서는 React 에서 제공하는 onClick이벤트를 사용하기 위해서는 React-Natvie에서 제공하는 Presssable컴포넌트로 감싸야합니다.

Pressable · React Native

이 밖에 React-Native에서는 Touchable 등의 다양한 컴포넌트가 있습니다. 하지만 이 Touchable컴포넌트의 경우 예전 React-Native에서 쓰이던 방식으로 앞으로는 Presssable컴포넌트를 사용해야합니다.

import { StyleSheet, Text, View, Pressable } from 'react-native';

const GoalItem: React.FC<{ text: string }> = ({ text }) => {
  return (
    <Pressable onPress={}>
      <View style={styles.goalItem}>
        <Text style={styles.goalText}>{text}</Text>
      </View>
    </Pressable>
  );
};

Pressable 내부에 있는 어떤 아이템이든 터치를 하면 onPress 프로퍼티가 제공된 함수를 활성화하게 됩니다.

☘️ Android 물결 효과 추가하기 & IOS대안

<Pressable android_ripple={{ color: '#ddd' }} onPress={onDeleteItem}>
  <View style={styles.goalItem}>
    <Text style={styles.goalText}>{text}</Text>
  </View>
</Pressable>

물결효과를 아이템 내부에 주고 싶다면, Pressable를 View내부에 위치시켜주면 됩니다.

만약, ios에 해당 효과를 주고 싶다면 Pressable에 style프로퍼티에 함수를 할당을 함으로써 비슷한 효과를 줄 수 있습니다.

const GoalItem: React.FC<{ text: string; onDeleteItem: () => void }> = ({
  text,
  onDeleteItem,
}) => {
  return (
    <View style={styles.goalItem}>
      <Pressable
        android_ripple={{ color: '#ddd' }}
        onPress={onDeleteItem}
        style={({ pressed }) => pressed && styles.pressedItem}
      >
        <Text style={styles.goalText}>{text}</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  pressedItem: {
    opacity: 0.5,
  },
});

🔥 Button 컴포넌트

Button 컴포넌트의 경우 Pressable이나 Touchable컴포넌트로 이루어진 컴포넌트입니다.