Image component (local and remote) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the React Native Image component used for?

The Image component displays pictures in your app. It can show images stored locally or loaded from the internet.

beginner

How do you load a local image in React Native?

Use require('./path/to/image.png') inside the source prop of Image. This tells React Native to bundle the image with the app.

beginner

How do you load a remote image from the internet in React Native?

Set the source prop to an object with a uri key, like { uri: 'https://example.com/image.png' }.

beginner

Why should you always set width and height on an Image component?

Without width and height, the image might not show or layout correctly. These tell React Native how much space to reserve for the image.

beginner

What is a simple way to make an image accessible in React Native?

Add the accessibilityLabel prop with a short description of the image. This helps screen readers describe the image to users.

How do you specify a local image in React Native's Image component?

A source={require('./image.png')}

B source={'./image.png'}

C source={{uri: './image.png'}}

D source='./image.png'

Local images must be imported using require() inside the source prop.

Which prop is used to load an image from a URL?

A source={{uri: 'https://example.com/image.png'}}

B url='https://example.com/image.png'

C src='https://example.com/image.png'

D path='https://example.com/image.png'

The source prop accepts an object with a uri key for remote images.

What happens if you don't set width and height on an Image?

A The app will crash

B The image will automatically fill the screen

C The image will be invisible but take space

D The image might not display or layout properly

Width and height define the space for the image; without them, display issues occur.

How can you make an image accessible for screen readers?

A Add alt prop like in HTML

B Add accessibilityLabel prop with a description

C Wrap image in a <Text> component

D No need, images are accessible by default

React Native uses accessibilityLabel to describe images for screen readers.

Which of these is a valid way to import a local image?

A const img = './assets/pic.png';

B import img from './assets/pic.png';

C const img = require('./assets/pic.png');

D const img = new Image('./assets/pic.png');

React Native uses require() to bundle local images.

Explain how to display both a local and a remote image using React Native's Image component.

Think about how you tell React Native where to find the image.

Describe why accessibility is important for images and how to add it in React Native.

Imagine a friend who cannot see the screen well.