Image component (local and remote) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this React Native Image component display?

Consider this code snippet in a React Native app:

import React from 'react';
import { Image } from 'react-native';

export default function App() {
  return (
    
  );
}

What will the user see when this runs?

React Native

import React from 'react';
import { Image } from 'react-native';

export default function App() {
  return (
    <Image
      source={{ uri: 'https://example.com/image.png' }}
      style={{ width: 100, height: 100 }}
      accessibilityLabel="Example remote image"
    />
  );
}

A An error because the source prop must be a local file path string.

B A blank space because local images require a different source format.

C A 100x100 pixel image loaded from the internet at the given URL.

D A 100x100 pixel placeholder image bundled with the app.

💡 Hint

Think about how React Native loads images from URLs using the uri property.

The Image component with source={{ uri: '...' }} loads an image from the internet. The style sets its size. Accessibility label helps screen readers.

📝 Syntax

intermediate

Which option correctly loads a local image in React Native?

You want to display a local image named 'logo.png' stored in your project's 'assets' folder. Which code snippet correctly loads this image?

A <Image source={require('./assets/logo.png')} style={{width: 50, height: 50}} />

B <Image source={{ uri: './assets/logo.png' }} style={{width: 50, height: 50}} />

C <Image source='./assets/logo.png' style={{width: 50, height: 50}} />

D <Image src={require('./assets/logo.png')} style={{width: 50, height: 50}} />

💡 Hint

Local images require the require() function in React Native.

Local images must be imported using require(). The source prop expects an object returned by require(). Using uri for local files or src prop is incorrect.

❓ lifecycle

advanced

What happens if the remote image URL is invalid or unreachable?

In React Native, if you use an Image component with a remote URL that does not exist or the device is offline, what will happen?

A The Image component will show nothing (empty space) where the image should be.

B The app will crash with a network error.

C The Image component will automatically show a default placeholder image.

D The Image component will display the last cached image even if the URL is unreachable.

💡 Hint

Think about what React Native does when it cannot load an image from the internet.

If the remote image cannot load, React Native shows an empty space. It does not crash or show a default image automatically. Caching behavior depends on platform and is not guaranteed.

🧠 Conceptual

advanced

Why is it important to set width and height on Image components in React Native?

In React Native, what is the main reason you must specify width and height styles on Image components?

A Because without width and height, the image will not display at all.

B Because width and height control the image file size and quality.

C Because accessibility tools require width and height to describe images.

D Because React Native needs explicit size to allocate layout space and avoid layout jumps.

💡 Hint

Think about how layout works in mobile apps and how images affect it.

React Native requires width and height to allocate space for images during layout. Without them, the image may not appear or cause layout issues. Width and height do not affect file size or accessibility directly.

🔧 Debug

expert

Why does this local image fail to display in React Native?

You wrote this code to display a local image:

import React from 'react';
import { Image } from 'react-native';

export default function App() {
  return (
    
  );
}

But the image does not show. What is the cause?

React Native

import React from 'react';
import { Image } from 'react-native';

export default function App() {
  return (
    <Image source={{ uri: './assets/icon.png' }} style={{ width: 40, height: 40 }} />
  );
}

A The style width and height are too small to display the image.

B Using uri with a relative local path does not work; local images must use require().

C The Image component requires an absolute file path for local images.

D The Image component cannot load PNG files locally.

💡 Hint

Check how local images are loaded differently from remote images in React Native.

Local images must be loaded with require(), not with uri and relative paths. Using uri with a relative path causes the image not to load.