Image component (local and remote) in React Native

Introduction

Images make apps look nice and help users understand content better. The Image component shows pictures from your phone or the internet.

Show a logo stored inside your app files.

Display a user's profile picture from a web address.

Add decorative pictures to make your app more colorful.

Show product images loaded from an online store.

Syntax

React Native

import { Image } from 'react-native';

<Image source={require('./path/to/image.png')} />

<Image source={{ uri: 'https://example.com/image.jpg' }} />

Use require() for local images inside your project.

Use an object with uri for images from the internet.

Examples

This shows a local image called logo.png with size 100x100 pixels.

React Native

import { Image } from 'react-native';

<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

This loads a small image from the internet and shows it at 50x50 pixels.

React Native

import { Image } from 'react-native';

<Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} style={{ width: 50, height: 50 }} />

Sample App

This app shows two images stacked vertically in the center: one local image and one remote image. Both images are 100x100 pixels with some space around them.

React Native

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

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

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

Important Notes

Always set width and height styles for images to display them correctly.

Use accessibilityLabel to describe images for screen readers.

Remote images need internet connection to load.

Summary

The Image component shows pictures from local files or the internet.

Use require() for local images and { uri: 'URL' } for remote images.

Always give images size and accessibility labels.