[React Native] Pressable

✅ Pressable

Pressable은 기본적으로 touchableopacity와 같이 버튼의 역할을 하지만, 더 다양한 press 단계를 추적할 수 있다.

⏩ 작동원리

• onPressIn: press가 활성화되었을 때

• onPressOut: press 제스처가 비활성화되었을 때

• onPressIn 된 이후에는 다음과 같은 스텝이 진행된다:
  1) 유저가 손가락을 때면, onPressOut가 바로 따라옴
  2) 유저가 손가락을 500 milliseconds 이상 누르고 있다가 때면, onLongPress가 바로 작동된다 (onPressOut will still fire when they remove their finger.)

  ⏩ 구현예시

const App = () => {
  const [timesPressed, setTimesPressed] = useState(0);

  let textLog = '';
  if (timesPressed > 1) {
    textLog = timesPressed + 'x onPress';
  } else if (timesPressed > 0) {
    textLog = 'onPress';
  }

  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => {
          setTimesPressed((current) => current + 1);
        }}
        style={({ pressed }) => [
          {
            backgroundColor: pressed
              ? 'rgb(210, 230, 255)'
              : 'white'
          },
          styles.wrapperCustom
        ]}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Press Me'}
          </Text>
        )}
      </Pressable>
      <View style={styles.logBox}>
        <Text testID="pressable_press_console">{textLog}</Text>
      </View>
    </View>
  );
};