Getting the OnPress source element on SVGs with hundreds of shapes.

I have a lot of “ready to go” SVGs that I convert with svgr to components. Inside the SVG there are many paths, each one has a fixed Id that cannot be changed (it is used in other apps).

Q: I need to know which shape the user has touched … looks simple

In my PoC the only way I found is to modify the component by svgr by adding these attributes for each path (which are hundreds):

ref={this.circleRef} onPress={e => this.onCirclePress(e, this.circleRef.current.props.id)}

I know arrow functions are bad in render, but I need the onPress location coordinates as well.

The onPress event gives me target (runtime id) which is not available from the DOM and therefore I can’t associate it to my fixed Id.

Is there really no solution to get the source element pressed by the user? Dropping RN for this would be a pity.

Thank you in advance

[msand]

Looks good imo, explicit, clear, slightly repetitive perhaps, but quite much required for typescript, probably not a significant contribution to total app size, and easy to add further tailor-made helpers and convenience methods per component type. Pull request looks good as well, will merge once I have some spare time to prepare a release. At least no reason to suspect anything breaking in this case what I can see.

[msand]

Something like this might help with the types for the id prop:

import * as React from 'react';
import { Text, View, StyleSheet, GestureResponderEvent } from 'react-native';
import * as RNSVG from 'react-native-svg';

class Circle extends React.PureComponent<
  {
    id: string;
    onPress: (e: GestureResponderEvent, id: string) => void;
  } & RNSVG.Circle
> {
  onPress = (e: GestureResponderEvent) => {
    const { onPress, id } = this.props;
    if (onPress) {
      onPress(e, id);
    }
  };
  render() {
    const { onPress, props } = this;
    const { onPress: _onPress, ...rest } = props;
    // @ts-ignore
    return <RNSVG.Circle onPress={onPress} {...rest} />;
  }
}