Image not showing in react-native in a physical device - react-native

Question

I am a beginner in React Native. I started learning it today. I was trying to display an image on the screen but I am having some problems here.
my Code
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={{ uri: 'https://i.imgur.com/G1iFNKI.jpg' }} />
</View>
);
}
when I go to this URL in the browser it shows the image, but no success in the device.
The same image when I download and use it locally, then it works
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={require('./assets/myViewScene.jpg')} />
</View>
);
}
Any help is appreciated.

Answer 1

You will have to provide Dimensions to the remote images in order to show them. As mentioned in the docs here, Unlike with static resources, you will need to manually specify the dimensions of your image for remote images.
For Example -
<Image source={{ uri: Some_Remote_Image_URI }} />
// This will not load and the image would not be shown.
<Image source={{ uri: Some_Remote_Image_URI }} style={{ width: 100, height: 100 }} />
// This will load perfectly and the image will be shown.
<Image source={require("./path_to_local_image")} />
// This will load perfectly and the image will be shown even if you don't provide the Dimensions.
Working Example Here

Answer 2

For people coming from Google: if your image is an SVG, check SvgUri component from react-native-svg:
<SvgUri
width="50"
height="50"
uri="https://images.com/your.svg"
/>