0

As part of a SVG sketch, I use a quite small dot as a slider control. To grow the touchable area I have added a thick, transparent border. This works on iOS, but not on Android. What can I do on Android to fix this? I've tried adding hitSlop and padding, but none of those seem to work on SVG elements.

PEZ
  • 16,821
  • 7
  • 45
  • 66
  • 2
    Add a larger container around it and then center the SVG inside. – Joshua Obritsch Mar 26 '19 at 19:19
  • Thanks! That works, if I place the (transparent) larger container above the visible dot, rather than nesting them. Please add your solution as an answer and I'll mark it as the selected answer. – PEZ Mar 26 '19 at 20:30

1 Answers1

1

Add a transparent container around the Svg and handle your touches on that instead of on the Svg.

For example:

<TouchableWithoutFeedback>
  <MySVGComponent />
</TouchableWithoutFeedback>
Joshua Obritsch
  • 1,253
  • 8
  • 14
  • Hmmm, in my case the dot is part of a larger SVG drawing. But your suggestion did work for me if I just adapted it. I placed a larger, transparent, dot on top of the visible dot and made the transparent one draggable instead of the smaller one. I clarified my question a bit now. – PEZ Mar 28 '19 at 20:29