Afficher une image à partir d'une URL en React-Native

Que ce soit une image provenant du web, ou une image stockée sur vos serveurs (comme l'avatar d'un utilisateur par exemple), la seule information que vous aurez à votre disposition pour accéder à cette dernière sera une simple URL.

Hors la plupart des exemples disponibles sur le web pour insérer une image dans votre application React-Native sont présentés avec des fichiers disponibles en local et importés avec la directive "import".

Voici donc la solution pour insérer une image à partir d'une URL externe dans votre 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}} />
    );
  }
};

Pour faire simple, il vous suffira de passer un objet à la propriété "source" de votre composant Image, dans lequel vous ajouterez un attribut "uri" contenant l'URL de votre fichier.

Pour plus d'informations sur les différents attributs que peut prendre cet objet, je vous conseille d'aller jeter un oeil à la documentation officielle : https://reactnative.dev/docs/image#imagesource