React Native get Element attributes from onPress event

Question

I'm trying to create a digital coloring page in React Native. My goal is when a user presses on individual SVG paths it changes their fill color.

The problem is that onPress event handlers cannot be applied to Paths specifically, so I had to add it to a TouchOpacity. I need to know from that onPress event which Path was selected. I added both a name and id to each Path, I cannot figure out how to extract those attributes from the click event.

const selectedColor = '#FF0000';
const [ color1, setColor1 ] = useState(WHITE);
const [ color2, setColor2 ] = useState(WHITE);
const [ color3, setColor3 ] = useState(WHITE);

const onPressSvg = (event) => {
    const num = // <--- IDK?

    switch (num) {
        case 1: setColor1(selectedColor); break;
        case 2: setColor2(selectedColor); break;
        case 3: setColor3(selectedColor); break;
    }
};

return (
    <TouchableOpacity onPress={onPressSvg}>
        <Svg viewBox="0 0 144 144">
            <Path
                id="1"
                name="1"
                fill={color1}
                d="..."
            />
            <Path
                id="2"
                name="2"
                fill={color2}
                d="..."
            />
            <Path
                id="3"
                name="3"
                fill={color3}
                d="..."
            />
        </Svg>
    </TouchableOpacity>
);

Answer 1

Ok, this is working good enough for now. I'm seeing different event objects being returned from Web and IOS. This isn't the prettiest solution but I'm unstuck for now. Yay!

let path1 = null;
let path2 = null;
let path3 = null;

const ColoringPage = () => {
    const [ color1, setColor1 ] = useState(WHITE);
    const [ color2, setColor2 ] = useState(WHITE);
    const [ color3, setColor3 ] = useState(WHITE);

    const onPressSvg = (event) => {
        if (typeof event.nativeEvent.target === 'object') {
            // Web
            switch (event.nativeEvent.target.id) {
                case '1': setColor1(color); break;
                case '2': setColor2(color); break;
                case '3': setColor3(color); break;
            }
        } else {
            // IOS
            switch (event.nativeEvent.target) {
                case path1.root._nativeTag: setColor1(color); break;
                case path2.root._nativeTag: setColor2(color); break;
                case path3.root._nativeTag: setColor3(color); break;
            }
        }
    };

    return (
        <TouchNavigation onPress={onPressSvg}>
            <Svg viewBox="0 0 144 144">
                <Path
                    ref={(component) => { path1 = component}}
                    id={1}
                    fill={color1}
                    d="..."
                />
                <Path
                    ref={(component) => { path2 = component}}
                    id={2}
                    fill={color2}
                    d="..."
                />
                <Path
                    ref={(component) => { path3 = component}}
                    id={3}
                    fill={color3}
                    d="..."
                />
            </Svg>
        </TouchNavigation>
    );
};