React Native & Expo - SVG won't render on iOS device

Question

I have started a project using 'create-react-native-app' and I can't figure out how to render .svg files. I tried all libraries for svg like react-native-svg-uri, react-native-svg-image, msvgc (converting .svg to react components with react-native-svg) and none of these helps. Sometimes when I run app preview (with expo) on my phone it crashes instantly and sometimes it only shows loading animation - instead of showing actual .svg image. There is no errors - it simply won't render svgs.

For example, this code shows loading animation

import SVGImage from 'react-native-svg-image';

<View style={styles.slide1}>

       <SVGImage
        style={{ width: 80, height: 80 }}
        source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}
        />

       <Text style={styles.text}>Hello</Text>
 </View>

Thank you in advance!

Answer 1

This appears to be a problem with the react-native-svg-image library not being tested on iOS. When you use the html prop on a WebView on iOS, you can't set startInLoadingState={true}, otherwise the loading indicator never goes away. This is a behavior that has existed for a long time in react-native, see issue 542 for more information -- it's certainly not ideal though, and hopefully someone reads this and fixes it!

You can get around this by setting showWebviewLoader prop to false on the component.

    <SVGImage
      showWebviewLoader={false}
      style={{ width: 80, height: 80 }}
      source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}
    />