React Native - Images

React Native - Images

This chapter explains how to display images in your React Native application using the Image component. We’ll cover both local static images and images loaded from a network URL.

Displaying Local Static Images

To display a static image, you first need to place the image file somewhere in your project’s source code directory, often in an assets or images subfolder. Then, you use require() to reference it.

1. Create an assets/images folder in your project’s root (or a relevant component folder).
2. Place an image file (e.g., my_logo.png) into this folder.

ImageExample.js (Local Image)

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

// Assuming 'my_logo.png' is in './assets/images/my_logo.png'
// The path for require() is relative to the current JS file.
// If ImageExample.js is in src/components/ and image is in src/assets/images/
// the path would be require('../../assets/images/my_logo.png')

const LocalImageExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Local Static Image:</Text>
      <Image
        source={require('./assets/images/my_logo.png')}
        style={styles.localImage}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  label: {
    fontSize: 18,
    marginBottom: 10,
  },
  localImage: {
    width: 150,
    height: 150,
    resizeMode: 'contain', // 'cover', 'stretch', 'center' are other options
  },
});

export default LocalImageExample;
// Note: For this example to work, ensure you have an image at the specified path.
// You might need to adjust the path to 'require()' based on your project structure.

React Native’s bundler (Metro) will include this image in your app bundle. The source prop takes the result of require(). It’s good practice to specify width and height for your images.

Screen Density and Image Suffixes (@2x, @3x)

React Native can automatically select the best image for the device’s screen density. If you have images like my-icon.png, my-icon@2x.png (for 2x density screens), and my-icon@3x.png (for 3x density screens) in the same folder, you can simply require('./assets/images/my-icon.png'). React Native will pick the appropriate file.

Displaying Network Images

To display an image from a network URL, you provide an object with a uri key to the source prop. For network images, you must explicitly define width and height styles, otherwise the image might not appear.

ImageExample.js (Network Image)

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

const NetworkImageExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Network Image:</Text>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.networkImage}
        // Optional: add accessibilityLabel for screen readers
        accessibilityLabel="React Native Logo"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  label: {
    fontSize: 18,
    marginBottom: 10,
  },
  networkImage: {
    width: 200, // Required for network images
    height: 200, // Required for network images
    resizeMode: 'contain',
    borderWidth: 1,
    borderColor: 'grey',
  },
});

export default NetworkImageExample;

When running the app, the local image example will show the my_logo.png you added, and the network image example will fetch and display the React Native logo from the internet. Ensure your device/emulator has network connectivity for the network image to load.

Image resizeMode

The resizeMode style property controls how your image should be resized or scaled when its actual dimensions differ from the Image component’s dimensions. Common values include:

• cover: Scales the image to maintain its aspect ratio while filling the given dimensions. Parts of the image might be cropped.
• contain: Scales the image to maintain its aspect ratio while fitting within the given dimensions. The entire image is visible, possibly with empty space.
• stretch: Scales width and height independently, potentially changing the aspect ratio.
• repeat: Repeats the image to fill the frame (iOS only).
• center: Centers the image within the frame.

For more advanced image features, such as caching control or progressive loading, you might consider third-party libraries like react-native-fast-image. Explore the official Image component documentation: https://reactnative.dev/docs/image