Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wayala-designli opened this issue Feb 29, 2024 · 0 comments

Comments

@wayala-designli
Copy link

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant