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.