import * as React from 'react'; import {Alert, Button, Platform, Text, View} from 'react-native'; import Svg, {Path} from 'react-native-svg'; /* On iOS each SVG has as it's touchable area it's drawings, ignoring the box where the element is rendered. | | | ***** | | ***** | | | SVG depicted above is a box of 7x4 (without a background) with a colored rectangle inside occupying 5x2 On iOS only the area with the actual drawing reactangle with 5x2 can be tapped. However on Android things are different. For React Native on Android the whole SVG element will be touchable regardless of having or not a visible drawing in it. This is not a major issue for plain SVG like icons, however if you are trying to position one SVG on top of another things won't work as expected. In order to make Android behave like iOS we need to set a pointerEvents property to the SVG element and to the drawing itself you are trying to make it actionable. This will a allow to have a behavior equal to the one iOS has by default. In the Demo bellow try to touch the blue region under the red one. Use the toggle button to turn to box-none on and off. TLDR; Use pointerEvents={'box-none'} to make only the drawable area clickable Keep in mind that the box-none value does not exist on iOS therefore you have to check the platform before using it. Like in the demo below. */ export default function PointerEventsBoxNone() { const [boxNone, setBoxNone] = React.useState(false); const pointerEvents = Platform.OS === 'ios' || !boxNone ? 'auto' : 'box-none'; return ( Try to touch the blue shape {/* BLUE SECTION */} {/* RED SECTION */}