How to load image from url in React Native

Introduction :

Loading an image from a URL is pretty easy in react-native. You don’t have to write any extra code to download and load the image. Even you don’t need any internet permission for this. In this post, I will show you how to load one image from a URL with an example.

Create one project :

1. I am creating one new react-native project for this tutorial. You can create your own or use the below code in your existing project.

2. In that project, import the Image component from ‘react-native’. This component is used to show one image. For a new project, I am editing the App.js file.

3. Create one constant variable and assign ../images/robot.png  to it. We are loading the image defined by this URL.

4. Pass the URL as the source to the image :

<Image source={{uri: imageUrl}} />

That’s it. It will load the image from that URL in the image component. You will have to give height and width to the Image to see the image.

Full code :

Below is the full App.js file :

import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet, Image} from 'react-native';

const App = () => {
  const imageUrl = '../images/robot.png';

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <Image source={{uri: imageUrl}} style={styles.image} />
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  image: {
    height: 400,
    width: 400,
  },
});

export default App;

Here, I have added height and width as 400 to the image.

It will print the below output :