Learn

Almost every app displays images. This content can be rendered in React Native using the Image component. It’s similar to the <img> HTML element, but the Image component has more features.

One of the additional features of <Image> is the ability to load images from different sources. This could be a publicly accessible https:// link, local file:// reference, Base64-encoded string, or image imported as module with require. Each of the image sources has its own benefits.

In this exercise, we will use the two most frequently used methods - using images from HTTP URLs and locally imported images.

Instructions

1.

Let’s start by rendering an Image component with a fixed width and height of 100.

2.

Good, but the image isn’t rendering any graphical content yet. That’s because we have to define what we want to display.

React Native uses the source property to instruct an Image component what to display. There are multiple ways of loading images. That’s why the source property isn’t just the URL of an image. We have to define the source as a JavaScript object containing the uri property.

<Image source={{ uri: 'https://example.com/cool-image.jpg' }} />

Add a source property that loads an image from https://picsum.photos/100/100.

3.

Great, there is our image!

The public HTTP URL image source is the most flexible of all sources. By providing the URL, React Native will download and render the image. But on slower internet connections, this might take some time.

We can improve this loading time by embedding images without our built app. This will greatly decrease the loading time because it doesn’t need to download the image first. To do this, import an image like a standard JavaScript file with require(...) or import.

In our workspace, we have an image called ./react-native.jpg. Let’s import that image using require and set that as source in our Image component.

4.

Great! Did you notice how fast that was rendered? By importing images as modules, the file is added within the built app. That avoids an additional request when rendering this image, making it fast.

Image is highly customizable, see the Image component documentation for all options.

Press run to continue to the next exercise.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?