[React Native] SVG 파일 사용 시, 터치이벤트 이슈

react-native-svg를 이용하여 svg파일을 컴포넌트로 적용으로 성공하였으나

이벤트를 주려고 하니 문제가 발생하였다. iOS만;;

 

command + d를 눌러 Show Inspector로 확인해보니

영역을 이상하게 잡고 있는 부분이 확인되었다

뭐냐 -_ㅠ

 

구글신에게 물어보니 2가지 해결책을 제시해 준다

1. pointerEvents="none"

function SvgComponent() {
	return (
    	<View pointerEvents="none">
        	// Svg 컴포넌트
        </View>
    )
}

 

2. overflow: hidden

function SvgComponent() {
	return (
    	<View style={{ overflow: 'hidden' }}>
        	// Svg 컴포넌트
        </View>
    )
}

 

속성에 대한 정보는 직접 찾아보기로 하고 일단 여기까지

 

 

끝.