Skip to content

Commit f4a4337

Browse files
committed
fix: android touch events
This adjusts the markup of the native `VictoryContainer` so that it's always rendering its children within an `Svg` element. My hunch is that this seems to fix touch issues on Android because `react-native-svg`'s `Svg` is central to its own implementation of touch events. See [here](https://github.com/react-native-svg/react-native-svg/blob/develop/android/src/main/java/com/horcrux/svg/SvgView.java) to see methods like `hitTest` and `interceptsTouchEvent`. This is why previously proposed solutions like [this](#2031 (comment)) and [this](#2031 (comment)) seem to fix the issue. Currently, the `View` below the main `Svg` is positioned absolutely on top of it, and then renders an empty `Svg` (portal), which I think is why touch events aren't captured on Android. Tested by running the demo app included in this repo, and by adding various touch events (not included in PR) to various charts and see if they still work. On iOS this causes no changes (as far as I can tell). Concerns: 1. On web this would be essentially invalid markup, having an SVG contain html/jsx without declaring it as a `foreignobject` first. However, I don't seem to encounter any errors, warnings, or complaints in doing this here, but just want to flag that. 2. Portals! I'm actually not sure how they work fully on native yet and want to continue investigating there next.
1 parent 00c362f commit f4a4337

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

packages/victory-native/src/components/victory-container.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,10 @@ export default class extends VictoryContainer {
158158
{title ? <title id="title">{title}</title> : null}
159159
{desc ? <desc id="desc">{desc}</desc> : null}
160160
{children}
161+
<View style={portalDivStyle} pointerEvents="box-none">
162+
<Portal {...portalProps} ref={this.savePortalRef} />
163+
</View>
161164
</Svg>
162-
<View style={portalDivStyle} pointerEvents="box-none">
163-
<Portal {...portalProps} ref={this.savePortalRef} />
164-
</View>
165165
</View>
166166
);
167167
}

0 commit comments

Comments
 (0)