Image component (local and remote) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Image component from React Native.

React Native

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

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

AText

BButton

CView

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Text instead of Image.

Forgetting to import Image at all.

The Image component is imported from react-native to display images.

2fill in blank

medium

Complete the code to display a local image named 'logo.png' stored in the assets folder.

React Native

<Image source={require('./assets/[1]')} style={{width: 100, height: 100}} />

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

Alogo.png

Blogo.jpg

Cicon.png

Dimage.png

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file extension like .jpg instead of .png.

Forgetting to use require for local images.

The require function needs the exact filename of the local image, here 'logo.png'.

3fill in blank

hard

Fix the error in the code to display a remote image from a URL.

React Native

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

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

Ahttp:/example.com/image.png

Bexample.com/image.png

Chttps://example.com/image.png

Dhtp://example.com/image.png

Attempts:

3 left

💡 Hint

Common Mistakes

Missing 'https://' at the start of the URL.

Typos in the URL protocol like 'htp' or 'http:/'

The URL must start with 'https://' to load the remote image correctly.

4fill in blank

hard

Fill both blanks to set the width and height of the Image component to 200.

React Native

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

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

A200

B'200'

C100

D'100'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings like '200' instead of numbers.

Setting width and height to different values.

The width and height should be numbers, not strings, so use 200 without quotes.

5fill in blank

hard

Fill all three blanks to display a local image with a border radius of 10.

React Native

<Image source={require('./assets/[1]')} style={{width: [2], height: [3], borderRadius: 10}} />

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

Aavatar.png

B150

Davatar.jpg

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong file extension like .jpg instead of .png.

Using strings instead of numbers for width and height.

The local image file is 'avatar.png' and width and height should be 150 to show a square image with rounded corners.