Pressable

Pressable은 코어 컴포넌트 래퍼로, 정의된 자식 요소에 대한 다양한 터치 상호작용 단계를 감지할 수 있다.

tsx

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

동작 원리

Pressable로 감싼 엘리먼트에서:

• onPressIn은 사용자가 누르기 동작을 시작할 때 호출된다.
• onPressOut은 누르기 동작이 끝날 때 호출된다.

onPressIn이 호출된 후 두 가지 상황이 발생할 수 있다:

1. 사용자가 손가락을 떼면, onPressOut이 호출된 후 onPress가 실행된다.
2. 사용자가 손가락을 500밀리초 이상 누르고 있으면, onLongPress가 실행된다. (사용자가 손가락을 떼면 여전히 onPressOut이 호출된다.)

손가락은 정밀한 도구가 아니기 때문에, 사용자가 실수로 잘못된 엘리먼트를 누르거나 활성화 영역을 놓치는 경우가 흔하다. 이를 돕기 위해 Pressable은 선택적으로 HitRect를 설정할 수 있다. HitRect는 감싸진 엘리먼트에서 얼마나 떨어진 곳까지 터치가 인식될지 정의한다. HitRect 내 어디에서든 누르기 동작이 시작될 수 있다.

PressRect은 누르기 동작이 엘리먼트와 HitRect를 벗어나도 활성화 상태를 유지하고 "누르기" 동작으로 인식되도록 한다. 예를 들어, 버튼을 누른 상태에서 손가락을 천천히 밀어내는 상황을 생각해 보자.

터치 영역은 부모 뷰의 경계를 넘어가지 않는다. 또한 두 뷰가 겹치는 경우, 형제 뷰의 Z-index가 항상 우선순위를 가진다.

hitSlop을 사용해 HitRect를 설정하고, pressRetentionOffset을 사용해 PressRect를 설정할 수 있다.

Pressable은 React Native의 Pressability API를 사용한다. Pressability의 상태 머신 흐름과 동작 원리에 대해 더 알고 싶다면, Pressability 구현을 참고하자.

예제

Props

android_disableSound

Android

true로 설정하면, 버튼을 눌렀을 때 안드로이드 시스템 사운드를 재생하지 않는다.

타입	기본값
boolean	false

android_ripple

Android

안드로이드 리플 효과를 활성화하고 그 속성을 설정한다.

타입
RippleConfig

children

children은 일반적인 자식 엘리먼트나, 컴포넌트가 현재 눌려져 있는지 여부를 반영하는 불리언 값을 받는 함수 중 하나를 사용할 수 있다.

타입
React Node

unstable_pressDelay

onPressIn을 호출하기 전에 눌림 상태가 유지되어야 하는 최소 시간(밀리초 단위)을 설정한다.

타입
number

delayLongPress

onPressIn 이벤트 발생 후 onLongPress가 호출되기까지의 대기 시간(밀리초 단위).

타입	기본값
number	500

disabled

프레스 동작이 비활성화되었는지 여부를 나타낸다.

타입	기본값
boolean	false

hitSlop

엘리먼트 외부에서도 터치를 감지할 수 있는 추가적인 거리를 설정한다.

타입
Rect 또는 숫자

onHoverIn

호버가 활성화되어 시각적 피드백을 제공할 때 호출된다.

타입
({ nativeEvent: MouseEvent }) => void

onHoverOut

호버가 비활성화될 때 시각적 피드백을 되돌리기 위해 호출된다.

타입
({ nativeEvent: MouseEvent }) => void

onLongPress

onPressIn 이벤트 발생 후 500밀리초 이상 지속될 때 호출된다. 이 시간은 delayLongPress를 통해 커스텀 설정이 가능하다.

타입
({nativeEvent: PressEvent}) => void

onPress

onPressOut 이후에 호출된다.

타입
({nativeEvent: PressEvent}) => void

onPressIn

터치가 시작되는 즉시 호출된다. onPressOut과 onPress 이전에 발생한다.

타입
({nativeEvent: PressEvent}) => void

onPressOut

터치가 해제될 때 호출된다.

타입
({nativeEvent: PressEvent}) => void

pressRetentionOffset

onPressOut 이벤트가 트리거되기 전에 터치가 눌림으로 간주되는 영역을 정의하는 추가 거리 값이다. 이 값은 뷰 외부의 영역까지 확장하여 적용된다.

타입	기본값
Rect 또는 숫자	{bottom: 30, left: 20, right: 20, top: 20}

style

컴포넌트의 스타일을 정의한다. 뷰 스타일을 직접 지정하거나, 현재 컴포넌트가 눌려 있는지 여부를 나타내는 불리언 값을 받아 뷰 스타일을 반환하는 함수를 사용할 수 있다.

타입
View Style 또는 ({ pressed: boolean }) => View Style

testOnly_pressed

문서화나 테스트(예: 스냅샷 테스트)를 위해서만 사용한다.

타입	기본값
boolean	false

타입 정의

RippleConfig

android_ripple 속성을 위한 리플 효과 설정.

타입
객체

속성:

이름	타입	필수 여부	설명
color	color	아니오	리플 효과의 색상을 정의한다.
borderless	boolean	아니오	리플 효과에 테두리를 포함하지 않을지 여부를 정의한다.
radius	number	아니오	리플 효과의 반경을 정의한다.
foreground	boolean	아니오	리플 효과를 뷰의 배경이 아닌 전경에 추가할지 여부를 설정한다. 이는 자식 뷰 중 하나가 자체 배경을 가지고 있거나 이미지를 표시하는 경우에 유용하며, 리플 효과가 가려지지 않도록 한다.