Display an image from an URL using React-Native

Being either an image from the web, or an image stored on one of your servers (like the user's avatar for example), the only information you'll have to access it will be a simple URL.

But most examples available on the web to insert an image in your React-Native application use local image files included using the "import" directive.

So here is the solution to insert an image from an external URL in your application:

//MyComponent.js
import React from 'react';
import { Image } from 'react-native';

const imageUrl = "https://images.unsplash.com/photo-1526045612212-70caf35c14df";

export class MyComponent extends React.Component {
  render(){
    return (
      <Image source={{uri: imageUrl}} />
    );
  }
};

To make it simple, you'll simply need to pass an object in the "source" property of the Image component, in which you'll add an "uri" attribute containing the URL of your file.

For more informations about the attributes that this object can take, I advise you to have a look to the official documentation : https://reactnative.dev/docs/image#imagesource