[ React Native ] Swipe 할때, Pressable / TouchableOpacity 안되는 컴포넌트

Any way to disable onPress on child views while swiping?

 

스와이프를 할때도, pressable / touchableopacity 가 event가 먹기에 Pressable을 커스텀했다.

 

import React, {useRef} from 'react';

import {NativeTouchEvent, Pressable, PressableProps} from 'react-native';

export const CustomPressable = ({

onPress,

onPressIn,

onPressOut,

...props

}: PressableProps) => {

const _touchActivatePositionRef = useRef<NativeTouchEvent | null>(null);

const _onPressIn: PressableProps['onPressIn'] = e => {

_touchActivatePositionRef.current = e.nativeEvent;

onPressIn?.(e);

};

const _onPress: PressableProps['onPress'] = e => {

const {pageX, pageY} = e.nativeEvent;

const absX = Math.abs(

(_touchActivatePositionRef.current?.pageX || 0) - pageX,

);

const absY = Math.abs(

(_touchActivatePositionRef.current?.pageY || 0) - pageY,

);

const dragged = absX > 2 || absY > 2;

if (!dragged) {

onPress?.(e);

}

};

return (

<Pressable

onPressIn={_onPressIn}

onPress={_onPress}

onPressOut={onPressOut}

{...props}>

{props.children}

</Pressable>

);

};

Pressable 말고 TouchableOpacity로도 사용이 가능한데, RN공홈에서 Pressable 을 권장하니 참고