React Native에서 스와이프나 드래그 등의 특정 제스처를 구현할 경우 PanResponder API를 사용하여 구현할 수 있습니다. 이때 해당 API가 사용된 <Animated /> 내부에 클릭이벤트가 존재하는 경우 원하는 클릭이 동작하지 않는 문제가 나타나게 됩니다.




# PanResponder 내부에 클릭 이벤트 문제 해결방법먼저 원인은 PanResponder가 선언된 이벤트에서 하위 엘리먼트의 이벤트를 제어하기 때문입니다. 이를 해결하기 위한 방법으로 onPanResponderRelease() 함수를 수정하는 방법이 있습니다.

onPanResponderRelease()는 이벤트와 제스처를 인자로 받아 처리할 수 있는데 내부에 원하는 엘리먼트 요소가 클릭되었는지 확인 후 이벤트를 처리하는 방법입니다. 이 경우 원하는 엘리먼트는 엘리먼트 ID와 일치하는지 확인이 필요하면 아래처럼 if문을 사용할 수 있습니다. onPanResponderRelease(event, gestureState) 내부에 사용된 코드입니다.
var eleId = '' + event.target;
if (eleId == 'ID값') {
  ...
}

위와 같이  코드를 적용하려면 원하는 엘리먼트의 ID를 알아야하며 이 경우 클릭이벤트를 만들어 아래처럼 alert()으로 확인할 수 있습니다.
Alert.alert('' + event.target);

event.target은 String 문자가 아니므로 앞에 ''를 더하여 문자로 변환하였습니다. alert()으로 출력하기 위함입니다.