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