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
onPressIn
instead ofonPress
.I can reproduce the same issue on iOS. When
G
elements 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/ ?