0
import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import { Text } from 'native-base';
import { SvgCss } from 'react-native-svg';

const PaintObject = ({ svg, objData }) => {
  const [color, setcolor] = useState(objData.initial_color);
  const [svgfile, setsvgfile] = useState('');

  useEffect(() => {
    Axios.get(svg).then(({ data }) => {
      setsvgfile(data);
    });
  }, []);

  if (svgfile !== '') {
    return (
      <SvgCss
        width={`${objData.width}%`}
        height={`${objData.width}%`}
        fill="grey"
        style={{
          color,
          position: 'absolute',
          top: `${objData.y}%`,
          left: `${objData.x}%`,
        }}
        xml={[...svgfile].join('').replace('currentcolor"', 'currentColor" onPress={() => setcolor("#000")}')}
      />
    );
  }
  return (<Text>{ }</Text>);
};

export default PaintObject;

I'm getting this error from the above code after adding the onPress part. Does anyone know how to solve this or an alternative way for adding onPress.

Error: Expected > (8:58). If this is valid SVG, it's probably a bug. Please raise an issue

        <path fill="currentColor" onPress={() => setcolor("#000")} d="M450.647 74.66c-152.612 0-276.307 123.709-276.307 276.307h232.585a43.723 43.723 0 0 1 87.445 0h232.585c0-152.598-123.71-276.307-276.308-276.307z" transform="rotate(14 -112.125 652.114) rotate(-14 175.917 551.333)"/>
MinaFa
  • 259
  • 2
  • 13

1 Answers1

0

You should use Pressable (React Native 0.63+) or TouchableOpacity. As such:

<Pressable onPress={setBlue}>
  <Svg />
</Pressable>
luciancic
  • 16
  • 2