Image optimization in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Image loading performance in React Native

Which option correctly optimizes image loading to improve app performance in React Native?

React Native

import { Image } from 'react-native';

export default function App() {
  return (
    <Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 100, height: 100 }} />
  );
}

A <Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 100, height: 100 }} resizeMode="contain" />

B <Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 100, height: 100 }} progressiveRenderingEnabled={true} />

C <Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 100, height: 100 }} cache="force-cache" />

D <Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 100, height: 100 }} />

💡 Hint

Consider props that control image scaling for better rendering performance.

Using progressiveRenderingEnabled={true} enables progressive image loading, which can improve perceived performance by showing a low-res version first.

🧠 Conceptual

intermediate

Best image format for mobile apps

Which image format is generally best for mobile apps to balance quality and file size?

A JPEG

B SVG

C TIFF

D BMP (Bitmap)

💡 Hint

Consider formats that compress well and are widely supported.

JPEG compresses images efficiently with good quality, making it ideal for photos in mobile apps.

❓ lifecycle

advanced

Handling image loading errors

What is the correct way to handle an image loading error in React Native to show a fallback image?

React Native

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

export default function App() {
  const [error, setError] = useState(false);
  return (
    <Image
      source={error ? require('./fallback.png') : { uri: 'https://example.com/photo.jpg' }}
      style={{ width: 100, height: 100 }}
      onError={() => setError(true)}
    />
  );
}

A Use onError prop to set error state and switch source to fallback image.

B Use onLoad prop to detect errors and switch source.

C Wrap Image in try-catch block to catch loading errors.

D Use a timeout to check if image loaded and then switch source.

💡 Hint

React Native Image component has a prop for error handling.

The onError prop triggers when image loading fails, allowing you to update state and show a fallback image.

🔧 Debug

advanced

Why does this image not display?

Given this React Native code, why does the image not show on the screen?

React Native

import { Image } from 'react-native';

export default function App() {
  return (
    <Image source={{ uri: 'https://example.com/photo.jpg' }} />
  );
}

A React Native Image does not support remote images.

B The URI is invalid and causes a network error.

C Image component requires a resizeMode prop to display.

D Missing width and height styles causes image not to render.

💡 Hint

Think about what React Native needs to know to show an image size.

Without width and height styles, React Native cannot allocate space for the image, so it does not appear.

❓ navigation

expert

Optimizing image-heavy screen navigation

You have a screen with many large images. Which approach best improves navigation speed and memory use in React Native?

A Load all images at once when the screen mounts.

B Preload all images in a global state before navigation.

C Use FlatList with windowSize and removeClippedSubviews props to load images lazily.

D Use ScrollView with nested Image components for smooth scrolling.

💡 Hint

Think about how to load only visible images to save memory.

FlatList with windowSize and removeClippedSubviews loads only visible items, improving performance and memory.