I have an svg and i need to make some paths/circles pressable using react-native-svg.
Path seems accepting onPress props but on second render it goes undefined, maybe some typescript bug, i didn’t understand. When i wrap Path element with TocuhableOpacity and Pressable it goes from screen, i taught there was a styling problem by default. I tried to neutralize styling of Pressable but it didn’t work.
Here is some code:
<Svg
//style={{ transform: [{ rotate: '90deg' }] }}
version="1.0"
xmlns="http://www.w3.org/2000/svg"
width={size ?? '895.000000pt'}
height={size ?? '1200.000000pt'}
viewBox="0 0 895.000000 1200.000000"
preserveAspectRatio="xMidYMid meet">
<G
transform="translate(0.000000,1200.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none">
<Pressable
onPress={() => console.log('test')}
style={[
StyleSheet.absoluteFillObject,
{ backgroundColor: 'transparent' },
]}
pointerEvents="box-none">
<Path
d="M2729 11840 c-19 -10 -41 -25 -48 -34 -16 -19 -43 -93 -91 -245 -37
-119 -38 -129 -40 -277 -1 -178 6 -202 70 -230 40 -18 40 -18 40 -75 0 -97
-26 -89 301 -89 186 0 289 4 289 10 0 6 7 10 16 10 9 0 33 13 53 29 84 66 -4
61 1124 61 l1023 0 45 -28 c24 -16 50 -36 58 -45 12 -15 47 -17 332 -17 l319
0 0 64 c0 62 1 64 30 74 16 6 41 23 55 38 24 26 25 30 25 182 0 134 -3 167
-25 247 -30 111 -81 251 -101 283 -33 51 -131 74 -219 51 -22 -5 -45 -11 -52
-12 -7 -2 -16 -6 -19 -10 -4 -4 -663 -7 -1464 -7 -1431 0 -1458 0 -1515 20
-74 25 -158 25 -206 0z m191 -35 c37 -13 232 -15 1520 -15 1288 0 1483 2 1520
15 65 23 140 20 181 -8 27 -18 40 -40 67 -112 72 -196 82 -243 82 -410 0 -169
-2 -175 -70 -192 l-35 -9 -3 -72 -3 -72 -275 0 -275 0 -47 39 c-90 76 -5 71
-1144 71 -1154 0 -1058 6 -1151 -79 l-44 -41 -271 0 -271 0 -3 77 -3 77 -37 9
c-64 15 -68 26 -69 189 0 162 6 195 71 378 42 117 59 146 95 161 33 13 119 10
165 -6z"
/>
</Pressable>
</G>
</Svg>
I will have a lot of paths in this svg, how can i make them pressable?