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 내 어디에서나 시작할 수 있다.

PressRect는 엘리먼트와 HitRect를 벗어나더라도 "누르기" 동작을 유지할 수 있게 해준다. 예를 들어, 버튼을 누른 상태에서 손가락을 천천히 밀어내는 상황을 생각해 볼 수 있다.

터치 영역은 부모 뷰의 경계를 넘어가지 않으며, 두 개의 겹치는 뷰에 터치가 닿으면 항상 형제 뷰의 Z-index가 우선 적용된다.

HitRect는 hitSlop으로 설정하고, PressRect는 pressRetentionOffset으로 설정할 수 있다.

Pressable은 React Native의 Pressability API를 사용한다. Pressability의 상태 머신 흐름과 동작 방식에 대한 자세한 내용은 Pressability 구현을 참고한다.

예제

Props

android_disableSound

Android

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

타입	기본값
boolean	false

android_ripple

Android

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 속성에 대한 리플 효과 설정을 정의한다.

타입
object

속성:

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