Image component (local and remote) in React Native - Mini App: Build & Ship

Build: Image Display Screen

This screen shows how to display images from local files and from the internet using React Native's Image component.

Target UI

-------------------------
| Image Display Screen   |
|-----------------------|
| Local Image:           |
| [Local Image Here]     |
|                       |
| Remote Image:          |
| [Remote Image Here]    |
|                       |
-------------------------

Display a local image stored in the app assets.

Display a remote image loaded from a URL.

Both images should have a fixed width and height.

Images should be centered horizontally.

Add descriptive accessibility labels for both images.

Starter Code

React Native

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

export default function ImageDisplayScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Add local image here */}
      {/* TODO: Add remote image here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function ImageDisplayScreen() {
  return (
    <View style={styles.container}>
      <Image
        source={require('./assets/local-image.png')}
        style={styles.image}
        accessibilityLabel="Local image of a flower"
      />
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
        accessibilityLabel="Remote React Native logo"
      />
    </View>
  );
}

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

We use two Image components inside a centered View. The first Image loads a local file using require from the assets folder. The second Image loads a remote image from a URL using the uri property. Both images have fixed width and height for consistent display. Accessibility labels describe each image for screen readers, improving accessibility.

Final Result

Completed Screen

-------------------------
| Image Display Screen   |
|-----------------------|
| Local Image:           |
| [flower image here]    |
|                       |
| Remote Image:          |
| [React Native logo]    |
|                       |
-------------------------

User sees two images stacked vertically and centered.

Local image shows immediately from app assets.

Remote image loads from internet and appears below local image.

Stretch Goal

Add a loading indicator while the remote image is loading.

💡 Hint

Use React Native's ActivityIndicator component and state to show it until the remote image finishes loading.

Practice

1. Which of the following is the correct way to display a local image in React Native using the Image component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Understand local image usage

   Local images require the require() function to load the file correctly in React Native.

2. Step 2: Check the syntax for local images

   The correct syntax uses source={require('path')}, not uri or src attributes.

3. Final Answer:

   <Image source={require('./assets/photo.png')} /> -> Option C

4. Quick Check:

   Local images use require() = C [OK]

Hint: Local images always use require() inside source prop [OK]

Common Mistakes:

• Using uri for local images
• Using src attribute instead of source
• Passing string directly without require()

2. Which of the following is the correct syntax to display a remote image from a URL in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify remote image syntax

   Remote images require an object with a uri key inside the source prop.

2. Step 2: Verify correct object structure

   The correct syntax is source={{ uri: 'URL' }}, not using require or src attributes.

3. Final Answer:

   <Image source={{ uri: 'https://example.com/image.png' }} /> -> Option D

4. Quick Check:

   Remote images use source={{ uri: URL }} = D [OK]

Hint: Remote images need source={{ uri: 'URL' }} syntax [OK]

Common Mistakes:

• Using require() for remote URLs
• Using src attribute instead of source
• Passing URL as a string directly to source

3. What will be the result of this React Native code snippet?

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

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

medium

A. A 100x100 image loaded from the internet with accessibility label

B. A blank space because remote images are not supported

C. An error because accessibilityLabel is not valid on Image

D. A local image displayed with size 100x100

Solution

1. Step 1: Analyze the image source

   The source uses a remote URL with uri, so it loads an internet image.

2. Step 2: Check style and accessibility

   The style sets width and height to 100, and accessibilityLabel is valid for screen readers.

3. Final Answer:

   A 100x100 image loaded from the internet with accessibility label -> Option A

4. Quick Check:

   Remote image with size and label = B [OK]

Hint: Remote images need uri and style size to display properly [OK]

Common Mistakes:

• Forgetting to set width and height style
• Thinking accessibilityLabel causes error
• Assuming remote images won't load

4. Identify the error in this React Native code snippet that tries to display a local image:

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

export default function App() {
  return (
    <Image source="./assets/photo.png" style={{ width: 50, height: 50 }} />
  );
}

medium

A. The style prop must be outside the Image component

B. The source prop should use require() for local images

C. The Image component cannot display local images

D. The width and height must be strings, not numbers

Solution

1. Step 1: Check source prop for local image

   Local images must use require() inside the source prop, not a string path.

2. Step 2: Verify style and component usage

   The style prop is correctly placed and numbers for width/height are valid in React Native.

3. Final Answer:

   The source prop should use require() for local images -> Option B

4. Quick Check:

   Local images need require() = A [OK]

Hint: Local images must use require() inside source prop [OK]

Common Mistakes:

• Passing string path directly to source
• Misplacing style prop
• Using strings for width/height instead of numbers

5. You want to display a local image and a remote image side by side in React Native. Which code snippet correctly implements this with accessibility labels and proper sizing?

hard

A.

B.

C.

D.

Solution

1. Step 1: Verify local and remote image sources

   Local images must use require(), remote images use source={{ uri: URL }}.

2. Step 2: Check layout and accessibility

   Using flexDirection: 'row' places images side by side, and accessibilityLabel is correctly added.

3. Final Answer:

   Code snippet with require() for local, uri for remote, row layout, and labels -> Option A

4. Quick Check:

   Local require + remote uri + row layout = A [OK]

Hint: Use require() for local, uri for remote, flexDirection row for side by side [OK]

Common Mistakes:

• Using string path instead of require() for local images
• Using uri with local file paths
• Missing accessibility labels
• Incorrect flexDirection for horizontal layout