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

I hope this post was useful to you, see you soon on the blog !

Support the blog

This blog is completely ad-free and if you want to support my work, feel free to donate a dollar !

Offer me an energy drink 🍾

About the author

Hi, I am Nicolas Brondin-Bernard, freelance web engineer since 2015 with a passion for sharing knownledge and experiences.

I'm also a coach for junior web developers, you can message me on nicolas@brondin.com, on my website or follow me on social networks like Twitter to avoid missing the bests posts or my future projects!

Photo par freestocks sur Unsplash