Image

Learn to display images with the Image component.

The Image component

The Image component displays a picture on the screen. It is used for photos, icons or drawings. The <Image /> tag alone is not enough; you must tell it which picture to show through the source prop.

The simplest form is <Image source={'{ uri: 'https://.../logo.png' }'} />. Here uri is the address of a remote image. For local images you use require; that is the next lesson.

Image does not have a default size. Without width and height the picture stays invisible. Always add width and height through style.

Basic Image usage

For a remote image you give source a {`{ uri: '...' }`} object. The key uri is case sensitive and written lowercase.

A complete example: <Image source={'{ uri: 'https://example.com/cat.png' }'} style={'{ width: 200, height: 120 }'} />. This tag shows the cat picture in a 200x120 pixel box.

For security, prefer HTTPS for remote images. iOS requires an info.plist entry for HTTP requests; in production you usually stick to HTTPS.

Exercise Show a cat image

Write an <Image> with size 200x140. Give it source={'{ uri: 'https://example.com/cat.png' }'}. Export the App function.

Show example solution

function App() {
  return (
    <Image
      source={{ uri: 'https://example.com/cat.png' }}
      style={{ width: 200, height: 140 }}
    />
  );
}
export default App;

Test yourself

What does Image always need?
- Only a background color
- Only a border
- Only text
- source and a size
Show answer

source and a size — source picks the picture, width and height set the size.

Import Image

import { View, ____ } from 'react-native';

Show answer

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

Match the Image parts

source

Holds the image address
uri

Remote image address
width

Image width
height

Image height

Next lesson: source

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies