Image optimization in React Native - Mini App: Build & Ship

Build: Optimized Image Screen

This screen displays an image optimized for performance by using proper sizing and caching.

Target UI

-------------------------
|                       |
|   [Optimized Image]    |
|                       |
|  Image loaded quickly  |
|  with caching enabled  |
|                       |
-------------------------

Display an image from a URL

Use React Native's Image component with proper width and height

Enable caching for the image

Show a placeholder or loading indicator while the image loads

Ensure the image scales properly on different screen sizes

Starter Code

React Native

import React from 'react';
import { View, Image, StyleSheet, ActivityIndicator } from 'react-native';

export default function OptimizedImageScreen() {
  // TODO: Add state to track loading

  return (
    <View style={styles.container}>
      {/* TODO: Add Image component with caching and loading indicator */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  image: {
    width: 300,
    height: 200,
    borderRadius: 10
  }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function OptimizedImageScreen() {
  const [loading, setLoading] = useState(true);

  return (
    <View style={styles.container}>
      {loading && <ActivityIndicator size="large" color="#0000ff" />}
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', cache: 'force-cache' }}
        style={styles.image}
        onLoadEnd={() => setLoading(false)}
        resizeMode="contain"
        accessibilityLabel="React Native logo"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  image: {
    width: 300,
    height: 200,
    borderRadius: 10
  }
});

This solution uses React Native's Image component with a uri source and caching enabled by setting cache: 'force-cache'. The loading state tracks if the image is still loading. While loading, an ActivityIndicator spinner is shown. When the image finishes loading, onLoadEnd updates the state to hide the spinner. The image has fixed width and height for proper sizing and uses resizeMode='contain' to scale nicely on different screen sizes. Accessibility label is added for screen readers.

Final Result

Completed Screen

-------------------------
|                       |
|   [React Native Logo]  |
|                       |
|   (spinner while load) |
|                       |
-------------------------

Spinner shows while image loads

Image appears smoothly after loading

Image scales properly on different devices

Stretch Goal

Add a button to toggle between two different optimized images with caching

💡 Hint

Use useState to track which image to show and update the Image source uri accordingly

Practice

1. What is the main benefit of optimizing images in a React Native app?

easy

A. It increases the app's file size

B. It changes the app's background color

C. It adds animations to images automatically

D. It makes the app load faster and use less data

Solution

1. Step 1: Understand image optimization purpose

   Optimizing images reduces their size and improves loading speed.

2. Step 2: Identify the benefit in app performance

   Smaller images use less data and make the app faster to load.

3. Final Answer:

   It makes the app load faster and use less data -> Option D

4. Quick Check:

   Image optimization = faster app and less data [OK]

Hint: Optimized images speed up apps and save data [OK]

Common Mistakes:

• Thinking optimization changes colors
• Believing optimization adds animations
• Assuming optimization increases file size

2. Which of the following is the correct way to set an image's resize mode in React Native?

easy

A. <Image source={uri} resizeMode='zoom' />

B. <Image source={uri} resizeMode='cover' />

C. <Image source={uri} mode='cover' />

D. <Image source={uri} resize='cover' />

Solution

1. Step 1: Recall correct prop name for resizing

   The correct prop to control image resizing is resizeMode.

2. Step 2: Check valid resizeMode values

   Valid values include 'cover', 'contain', 'stretch', but not 'zoom'.

3. Final Answer:

   <Image source={uri} resizeMode='cover' /> -> Option B

4. Quick Check:

   resizeMode='cover' is correct syntax [OK]

Hint: Use resizeMode prop with valid values like 'cover' [OK]

Common Mistakes:

• Using 'resize' instead of 'resizeMode'
• Using invalid values like 'zoom'
• Using 'mode' prop which does not exist

3. What will happen if you use a very large image without resizing in a React Native app?

medium

A. The app may become slow and use more memory

B. The app will load faster because large images are better quality

C. The image will automatically resize to fit the screen

D. The app will crash immediately

Solution

1. Step 1: Understand impact of large images

   Large images consume more memory and take longer to load.

2. Step 2: Identify app behavior with large images

   This can slow down the app but usually does not crash it immediately.

3. Final Answer:

   The app may become slow and use more memory -> Option A

4. Quick Check:

   Large images = slower app and more memory use [OK]

Hint: Large images slow app and use more memory [OK]

Common Mistakes:

• Thinking large images load faster
• Assuming images auto resize always
• Believing app crashes immediately

4. You wrote this code but the image does not resize as expected:

<Image source={{uri: 'image.png'}} resizeMode='stretch' />

What is the likely mistake?

medium

A. The source prop should be a string, not an object

B. The resizeMode value 'stretch' is invalid

C. The image style is missing width and height

D. The image URI is incorrect

Solution

1. Step 1: Check image resizing requirements

   In React Native, images need explicit width and height styles to resize properly.

2. Step 2: Verify code props and values

   The source and resizeMode are correct; missing styles cause no resize effect.

3. Final Answer:

   The image style is missing width and height -> Option C

4. Quick Check:

   Missing width/height stops resizing [OK]

Hint: Always set width and height styles for images [OK]

Common Mistakes:

• Thinking resizeMode 'stretch' is invalid
• Assuming source must be string only
• Ignoring need for width and height styles

5. You want to optimize images for different screen sizes in your React Native app. Which approach is best?

hard

A. Use multiple image versions and select with require() based on screen size

B. Use only one large image and rely on resizeMode='contain'

C. Load images from the internet without resizing

D. Use SVG images only, ignoring bitmap formats

Solution

1. Step 1: Understand responsive image needs

   Different screen sizes need different image resolutions for best quality and performance.

2. Step 2: Choose best method to handle multiple sizes

   Using multiple image versions and selecting them with require() based on screen size is efficient.

3. Final Answer:

   Use multiple image versions and select with require() based on screen size -> Option A

4. Quick Check:

   Multiple versions + require() = best optimization [OK]

Hint: Select image versions by screen size with require() [OK]

Common Mistakes:

• Using one large image wastes memory
• Ignoring resizing causes poor quality or slow app
• Assuming SVG works for all images