Disappearing after pressing in 'react-native-svg'

Question

I use SvgCss from react-native-svg for displaying and changing the color of several external svgs.

I put onPress on it and it works as expected in most cases. but I noticed that some svgs have weird behavior after pressing on them. for example the below svg disappears after pressing!

what's the problem here?

<svg xmlns="http://www.w3.org/2000/svg" width="188" height="195" viewBox="0 0 188 195">
    <defs>
        <clipPath id="sjkzt87o0a">
            <path fill="none" stroke="#707070" d="M0 0H188V195H0z" transform="translate(277 228)"/>
        </clipPath>
    </defs>
    <g clip-path="url(#sjkzt87o0a)" transform="translate(-277 -228)">
        <g>
            <path fill="currentColor" d="M424.413 141.66A183.073 183.073 0 0 0 241.34 324.733h139.35a43.723 43.723 0 0 1 87.445 0h139.35A183.073 183.073 0 0 0 424.413 141.66z" transform="rotate(14 -112.125 652.114) rotate(-14 269.633 431.384)"/>
            <path d="M-419.71-981.787a184.43 184.43 0 0 1-5.317-36.7 182.149 182.149 0 0 1 2.037-35.924 183.1 183.1 0 0 1 8.855-34.257 184.4 184.4 0 0 1 15.136-31.7 184.393 184.393 0 0 1 20.881-28.245 183.1 183.1 0 0 1 26.09-23.9 182.158 182.158 0 0 1 30.763-18.664 184.426 184.426 0 0 1 34.9-12.535 183.84 183.84 0 0 1 44.431-5.482 182.2 182.2 0 0 1 36.685 3.741 183.411 183.411 0 0 1 34.685 10.834 184.485 184.485 0 0 1 31.712 17.342 184.062 184.062 0 0 1 27.767 23.265 182.161 182.161 0 0 0-127.848-52.183 183.849 183.849 0 0 0-44.432 5.482c-96.058 23.95-156.256 121.918-134.191 218.387l-2.153.537zm220.059-54.867a43.8 43.8 0 0 0-10-18.771 43.609 43.609 0 0 1 7.076 8.251 43.559 43.559 0 0 1 4.9 10.028l-1.974.492z" transform="rotate(14 -112.125 652.114) translate(636.09 1316.532)" style="mix-blend-mode:multiply;isolation:isolate" fill="#bfbfbf"/>
        </g>
    </g>
</svg>

I also tried SvgXml , SvgUri, SvgCssUri, no changes.

here is the code:

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}%`}
        style={{
          color,
          position: 'absolute',
          top: `${objData.y}%`,
          left: `${objData.x}%`,
        }}
        xml={[...svgfile].join('')}
        onPress={()=> setcolor('green')}
      />
    );
  }
  return (<Text>{ }</Text>);
};

export default PaintObject;

Lilian Tonofa · Answer 1 · 2020-12-27T13:30:26.720

0

You have better wrap SVG into TouchableOpacity or TouchableWithoutFeedback

I use this site for converting svg to react-native-svg


import React from 'react';
import Svg, { Path, SvgProps } from 'react-native-svg';

export const Mic = (props: SvgProps) => (
  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
    <Path
      d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
      fill={props.fill ? props.fill : '#000'}
      fillOpacity={props.fill ? 1 : 0.6}
    />
  </Svg>
);

edited Dec 27 '20 at 13:30

answered Dec 27 '20 at 13:15

Lilian Tonofa

151
2
5

I can't change the svg code manually. I get it from server. – MinaFa Dec 27 '20 at 14:42
and It's already wrapped with TouchableOpacity – MinaFa Dec 27 '20 at 14:43
Can you provide a snippet to reproduce this bug? How do you change color of svg? – Lilian Tonofa Dec 27 '20 at 15:30
I added the code. It currently doesn't have TouchableOpacity but I tried with it too.@Lilian – MinaFa Dec 27 '20 at 15:55
If you have an TouchableOpacity wrapped, it must work, the problem may be that element inside of it may be empty. In your code you have an wrong import of text that may cause svg to disappear. ```import { Text } from 'react-native'``` – Lilian Tonofa Dec 27 '20 at 20:14
the problem is from the svg itself. I remove the part and upload it to server and it is working ok. but I cant find and change all manually. I'm trying to find a pattern or something – MinaFa Dec 28 '20 at 06:37
1

I found an [parser](https://github.com/target/react-native-svg-parser), you could use it in React-Native or in backend, if you write it. – Lilian Tonofa Dec 28 '20 at 13:00

Disappearing after pressing in 'react-native-svg'

1 Answers1