React native project remote image not showing on both iOS and Android simulators

Question

I try to display a remote image which is a HTTPS url.

I tried:

import React, {useContext} from 'react';
import {View, Image, StyleSheet} from 'react-native';

const MyScreen = ({navigation}) => {
  const {data} = ... // This is backend responsed data

  // I verified the imageSource is https://www.example.com/bar/myimg.svg
  const imageSource = data.image.url;
  const source = {uri: imageSource};

  return (
    <View style={styles.main}>
        <Image style={{width: 500, height: 500}} source={source} />
    </View>
  );
}; 

const styles = StyleSheet.create({
  main: {
    flex: 1,
  },

export default MyScreen;

(I enter the image url to my Chrome browser, the browser shows the image.)

I run my react-native project on both iOS and Android simulators, however both shows blank screen. I thought at least on iOS I should make sure the HTTPS content should be allowed, so I also checked the info.plist, it has:

But both iOS and Android don't show the image makes me confused where am I wrong?

Svg is not a natively supported format on Android or ios. You need something like https://github.com/react-native-svg/react-native-svg — zero298, Nov 17 '20 at 11:26

score 0 · Answer 1 · answered Nov 17 '20 at 11:32

SVG image is not supported in react native. You can use react-native-svg-uri to show svg images like

import SvgUri from 'react-native-svg-uri';

const TestSvgUri = () => (
  <View style={styles.container}>
    <SvgUri
      width="200"
      height="200"
      source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
    />
  </View>
);

React native project remote image not showing on both iOS and Android simulators

1 Answers1