software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The onPress method in the Path component works on android but not on ios.

wayala-designli opened this issue · comments

Bug

The onPress method in the Path component works on android but not on ios.
In an svg I have multiple figures, each one in a Path, with which I want to detect when each one is clicked.

Environment info

React native info output:

"react-native": "0.73.2",
"react-native-gesture-handler": "^2.15.0",
"react-native-svg": "^14.1.0",

Steps To Reproduce

My component is:
`import { height, width } from '@utils/constants'
import * as React from 'react'
import Svg, { SvgProps, G, Rect, Path } from 'react-native-svg'
/* SVGR has dropped some elements not supported by react-native-svg: filter */

const originalWidth = 375
const originalHeight = 812

const scaleX = width / originalWidth
const scaleY = (height * 0.95) / originalHeight
const SelectActivity = (props: SvgProps) => (
<Svg
width={width}
height={height * 0.95}
fill="none"
style={{ position: 'absolute', zIndex: 1 }}
{...props}>
<G clipPath="url(#a)" transform={scale(${scaleX}, ${scaleY})}>


















<Path
onPress={() => console.log('press #1')}
stroke="#E8CF4A"
strokeLinejoin="round"
d="M265 435.5c2.8 10.8-5 15-13.5 15-19.2 0-19.667-12.167-18-19 1.5-4.5 5-6 6-10-1-13 4.667-14.167 7.5-15l4.5-23.5-2.5-1v-4.5l2.5-.5-1.5-1v-4h3.5l1-4.5 10.5 1v5.5l3 1v4l-2.5 1 1.5 3-.5 2.5H260l-2 21.5c1 5 7.5 4 7.5 13 0 5.025-3 5.857-.5 15.5Z"
/>
<Path
onPress={() => console.log('press #2')}
stroke="#1A0807"
strokeLinejoin="round"
d="m140 492 18-9v-9.5L126 456l-22.5 10.5-.5 6.5 37 19Z"
/>

<Path
onPress={() => console.log('press #3')}
stroke="#FFFAF1"
d="m167.369 758.383-34.889-15.181c-6.303-4.948-2.626-14.056 0-17.992l1.688 1.124c3.151-3.598 6.94-2.249 8.441-1.124l24.76 11.245c2.251.9 5.065 2.249 6.19 2.811 6.753 0 8.441 4.123 8.441 6.185 0 12.932-9.004 14.806-14.631 12.932Z"
shapeRendering="crispEdges"
/>

<Path
onPress={() => console.log('press #4')}
fill="#D37B7C"
d="m251.361 657-.249.434.163.093.184-.037-.098-.49Zm9.344-1.857.031-.499-.065-.004-.064.012.098.491ZM269.5 651v-.5h-.448l-.049.445.497.055Zm5-6 .492-.089-.004-.022-.006-.022-.482.133Zm-1.927-7-.224-.447-.367.184.109.396.482-.133Zm.427-7-.495.071.006.044.014.043L273 631Zm-5.601-5h-.5v.77l.704-.313-.204-.457Zm0-5-.277-.416-.223.149V621h.5Zm1.101-11 .454-.209-.003-.006-.451.215Zm-21.5-7-.498.05.053.531.527-.088L247 603Zm-9.09-4v-.5h-.044l-.043.008.087.492Zm-7.243 6.214-.265.424a.501.501 0 0 0 .747-.555l-.482.131Zm-9.312 1.036-.467-.18-.079.206.098.197.448-.223Zm.517 1.036.482.133.051-.185-.086-.172-.447.224ZM218.5 627.5v.5h.59l-.097-.582-.493.082Zm-2.319 4.643h.5v-.07l-.019-.067-.481.137Zm0 4.661h-.5v.289l.251.144.249-.433Zm35.278 20.686 9.343-1.857-.195-.981-9.343 1.858.195.98Zm9.214-1.848c1.421.089 3.584-.016 5.465-.633 1.866-.612 3.619-1.793 3.859-3.954l-.994-.11c-.174 1.568-1.439 2.544-3.177 3.114-1.724.566-3.751.669-5.09.585l-.063.998Zm8.827-4.142c.964 0 2.536-.393 3.773-1.404 1.273-1.04 2.167-2.72 1.719-5.185l-.984.178c.38 2.092-.364 3.412-1.368 4.233-1.038.849-2.38 1.178-3.14 1.178v1Zm5.482-6.633-1.927-7-.964.266 1.927 7 .964-.266Zm-2.185-6.42c.395-.198.693-.575.905-1.02.216-.452.364-1.019.435-1.669.142-1.302-.023-2.996-.663-4.916l-.949.316c.603 1.808.741 3.356.618 4.492-.062.569-.188 1.021-.344 1.347-.159.333-.327.495-.45.556l.448.894Zm.698-7.518c-.178-1.247-.665-3.009-1.632-4.262-.489-.634-1.121-1.163-1.922-1.404-.808-.242-1.726-.173-2.745.28l.407.914c.843-.375 1.513-.398 2.05-.236.545.164 1.016.535 1.418 1.057.816 1.057 1.267 2.623 1.434 3.793l.99-.142ZM267.899 626v-5h-1v5h1Zm-.222-4.584c.929-.62 1.871-2.17 2.276-4.186.412-2.048.288-4.647-.999-7.439l-.908.418c1.195 2.594 1.298 4.976.927 6.824-.378 1.878-1.228 3.135-1.851 3.551l.555.832Zm1.274-11.631c-.888-1.867-2.555-4.303-4.778-6.154-2.225-1.851-5.062-3.156-8.255-2.624l.164.986c2.806-.468 5.357.665 7.451 2.407 2.096 1.744 3.679 4.057 4.515 5.815l.903-.43Zm-13.033-8.778-9 1.5.164.986 9-1.5-.164-.986Zm-8.421 1.943c-.112-1.119-1.127-2.231-2.705-3.042-1.612-.828-3.923-1.408-6.882-1.408v1c2.835 0 4.983.557 6.425 1.297 1.475.758 2.107 1.645 2.167 2.253l.995-.1Zm-9.674-4.442c-1.457.257-3.663.682-5.349 1.651-.849.488-1.605 1.135-2.055 2.004-.458.882-.573 1.939-.235 3.183l.965-.263c-.282-1.035-.169-1.83.157-2.459.333-.642.917-1.167 1.666-1.598 1.514-.87 3.55-1.273 5.025-1.534l-.174-.984Zm-6.891 6.282c-1.422-.889-3.425-1.738-5.323-1.799-.956-.03-1.91.139-2.746.63-.843.495-1.527 1.293-1.975 2.449l.933.36c.375-.969.922-1.579 1.548-1.946.632-.372 1.387-.519 2.208-.493 1.657.053 3.487.81 4.825 1.647l.53-.848Zm-10.025 1.683.518 1.036.894-.447-.517-1.035-.895.446Zm.483.68c-.689 2.501-1.744 6.328-2.522 10.153-.773 3.802-1.292 7.688-.861 10.276l.986-.164c-.397-2.384.08-6.102.855-9.913.77-3.787 1.816-7.582 2.506-10.086l-.964-.266ZM218.5 627c-1.602 0-3.7 2.124-2.8 5.28l.962-.274c-.755-2.644 1.026-4.006 1.838-4.006v-1Zm-2.819 5.143v4.661h1v-4.661h-1Zm.251 5.094 35.18 20.197.498-.868-35.18-20.196-.498.867Z"
/>
<Path
onPress={() => console.log('press #5')}
stroke="#66A647"
strokeLinejoin="round"
d="m166 634.5 3-2 1.5-1.5c.4-1.2.167-3.833-.5-5-1.2-1.6-3.5-3.167-4.5-3l-3 2-2.5 1.347-.5-.347-4 3-1.5-1 5.5-4c.5-3-.667-4.667-1.5-6-.8-1.2-3-2-4-1.5l-2.5 1-2.5 1.5h-1l-13 8c-1.2 1.6-.833 4.5-.5 6 2.8 4 5.5 4 6.5 3.5l6-4 1 .5c-1.2.4-2 1.5-2.5 4 1.5 7 5 7 5.5 7l14-8 1-1.5Z"
/>
<Path
onPress={() => console.log('press #6')}
stroke="#DF3E28"
strokeLinejoin="round"
d="M36 372v-57.482L99 279v55.613L36 372Z"
/>


)
export default SelectActivity
`

Describe what you expected to happen:

  1. OnPress method in Path works on iOS and android