react-native-svg: [BUG] onPress on G only work for first child (Android Only)
the problem is in android onPress on G element working only for first child but in IOS working very well
that means in bellow image only for big square top left working

Each square is like this
import * as React from 'react'
import { G, Rect, ClipPath } from 'react-native-svg'
import { View, Platform } from 'react-native'
import { Typography } from 'src/theme'
import { NodeProps } from './NodeProps'
import { NodeState } from './NodeState'
class Node extends React.Component<NodeProps, NodeState> {
render() {
const {
x0,
x1,
y0,
y1,
xScaleFactor,
yScaleFactor,
xScaleFunction,
yScaleFunction,
zoomEnabled,
url,
treemapId,
bgColor,
onClick,
id,
label,
depth,
} = this.props
const xTranslated = zoomEnabled === true ? xScaleFunction(x0) : x0
const yTranslated = zoomEnabled === true ? yScaleFunction(y0) : y0
const width = xScaleFactor * (x1 - x0)
const height = yScaleFactor * (y1 - y0)
const fSize = width < 60 ? 6.5 : width < 80 ? 8 : width < 120 ? 10 : 12
if (depth === 0) {
return null
}
const pointerEvents = Platform.OS === 'android' ? { pointerEvents: 'box-none' } : null
return (
<G
// transform={`translate(${xTranslated},${yTranslated})`}
id={id.toString()}
x={xTranslated}
y={yTranslated}
onPress={(e) => {
onClick(e, this.props)
}}
>
<Rect id={'rect-' + id} width={width} height={height} rx={2} fill={bgColor} {...pointerEvents} />
<ClipPath id={'clip-'.concat(treemapId, '-', id.toString())} {...pointerEvents}>
<Rect width={Math.max(0, width - 5)} height={height} {...pointerEvents} />
</ClipPath>
<View
style={{ width, height, alignContent: 'center', justifyContent: 'center', zIndex: 2, overflow: 'hidden' }}
{...pointerEvents}
>
{width <= 20 ? null : (
<Typography
style={{ width, fontSize: fSize }}
color="initial"
align={'center'}
text={label}
{...pointerEvents}
/>
)}
</View>
</G>
)
}
}
export default Node
“react-native-svg”: “^11.0.1”, “react-native”: “0.61.5”,
About this issue
- Original URL
- State: open
- Created 4 years ago
- Comments: 21
Solution: use
onPressIninstead ofonPress.I can reproduce the same issue on iOS. When
Gelements are nested onPress is only working on the top level one.For me worked by wrapping pie chart into Svg tag
Can you provide a full repro / https://snack.expo.io/ ?