React Native

Load image from URL in React Native

This articles shows how you can load an image from the URL in react native project

Admin

— 1 min read

Once you have installed React Native on your system, React Native project can be created in one single line. Open the terminal or command prompt and run the following command to create React Native Project.

npx react-native init <PROJECT NAME>

This will take a while to complete. Once it’s done. Open that directory and run the following command to start metro server.

npx react-native start

Metro Server acts as a bridge between your Development Machine and Connected Device or Emulator.

Then in the New Command Prompt or Terminal run the following command to start building the app.

Make sure you have connected your Device before running the below command.

Android:

npx react-native run-android

iOS:

npx react-native run-ios

Let’s work on the App

Open the Project folder in your favorite IDE, I used VS Code. So I just have to type

code .

to Open the Folder in VSCode.

Now Open App.js and clear everything.

At the top of the File insert the below lines. This will import the required files/libs.

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

Below that, Paste these lines

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  cheems: {
    width: 250,
    height: 250,
  },
});

Here we are defining the styles for our application.

After that paste the below lines.

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.cheems}
        source={{
          uri: 'https://i.redd.it/jz33b0xo7a951.jpg',
        }}
      />
    </View>
  );
}

export default App;

As you can see in the above code, We are keeping everything inside the View Block which is linked to the style we created above.

Then with Image element, We are loading the image from the web.

Here is the complete source code.

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

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  cheems: {
    width: 250,
    height: 250,
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.cheems}
        source={{
          uri: 'https://i.redd.it/jz33b0xo7a951.jpg',
        }}
      />
    </View>
  );
}

export default App;

Now if you run the App, You'll see a beautiful picture of cheems dog.

Get Source Code on GitHub

Read more