SVGR has dropped some elements not supported by react-native-svg: filter

Question

how to use my svg file in react native, i tried converting svg to react native and there is a warning: "/* SVGR has dropped some elements not supported by react-native-svg: filter */" and it doesn't exactly as I wanted

Answer 1

i use react-native-svg to display svg in react native and here is how i do it

import { View } from 'react-native';
import {SvgXml} from 'react-native-svg';

export const SvgImage=`<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.5C13.8565 21.5 15.637 20.7625 16.9497 19.4497C18.2625 18.137 19 16.3565 19 14.5C19 12.5 18 10.6 16 9C14 7.4 12.5 5 12 2.5C11.5 5 10 7.4 8 9C6 10.6 5 12.5 5 14.5C5 16.3565 5.7375 18.137 7.05025 19.4497C8.36301 20.7625 10.1435 21.5 12 21.5V21.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`

export default function App() {
  return (
    <View>
      <SvgXml xml={SvgImage} />
    </View>
  );
}

you can get the xml code for svg when you open svg file in a text editor(also works for vs code), if you open svg in browser the right click and select 'view page source' and copy the xml code

hope this was helpful.