Display an image from a URL in React Native

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

However, most of the examples available on the web for inserting an image into your React-Native application are presented with files available locally and imported using the "import" directive.

So here's the solution for inserting an image from an external URL into 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 put it simply, all you need to do is pass an object to the "source" property of your Image component, in which you'll add a "uri" attribute containing the URL of your file.

For more information on the different attributes this object can take, I recommend taking a look at the official documentation: https://reactnative.dev/docs/image#imagesource