Image optimization in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native Image component.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AImage

BText

CView

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using Text or View instead of Image for pictures.

The Image component is used to display images in React Native.

2fill in blank

medium

Complete the code to set the image source from a local file.

React Native

<Image source={{ [1] }} style={{ width: 100, height: 100 }} />

Drag options to blanks, or click blank then click option'

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

Bimport('./assets/image.png')

Crequire('./assets/image.png')

D{uri: 'file:///local/image.png'}

Attempts:

3 left

💡 Hint

Common Mistakes

Using uri for local images instead of require().

Local images use require() to load the file in React Native.

3fill in blank

hard

Fix the error in the code to resize the image properly.

React Native

<Image source={require('./assets/image.png')} resizeMode="[1]" style={{ width: 200, height: 200 }} />

Drag options to blanks, or click blank then click option'

Acover

Bresize

Cfill

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'resize' which is not a valid resizeMode value.

The resizeMode property accepts values like cover to scale the image while preserving aspect ratio.

4fill in blank

hard

Fill both blanks to create an optimized image with caching and fixed size.

React Native

<Image source={{uri: 'https://example.com/image.png', [1]: "[2]" }} style={{ width: 150, height: 150 }} />

Drag options to blanks, or click blank then click option'

Acache

BresizeMode

Ccover

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'resizeMode' instead of 'cache' for caching.

Setting source={{uri: 'https://example.com/image.png', cache: 'default'}} enables caching for remote images to improve performance.

5fill in blank

hard

Fill all three blanks to create a thumbnail image with blur effect while loading.

React Native

<Image source={{uri: 'https://example.com/photo.jpg'}} [1]="[2]" [3]={10} style={{ width: 100, height: 100 }} />

Drag options to blanks, or click blank then click option'

AblurRadius

BresizeMode

Ccover

Dcache

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing blurRadius with cache or resizeMode.

Use resizeMode='cover' to scale image nicely and blurRadius={10} to blur the image while loading.