Image Component

Showing Images

The Image component is used to display images in your React Native app. It works differently from the web's <img> tag because React Native needs to handle images from different sources — local files, network URLs, and the device's camera or gallery.

Images are essential for almost every mobile app, from profile pictures to product photos to background images. Let's learn how to use them effectively.

Loading Images from URLs

The most common way to display images is from a network URL. You pass the URL as the source prop:

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

function ProfilePicture() {
  return (
    <View>
      <Image
        source={{ uri: 'https://example.com/photo.jpg' }}
        style={{ width: 200, height: 200, borderRadius: 100 }}
      />
    </View>
  );
}

export default ProfilePicture;

Notice that you must specify both width and height for network images. Unlike the web, React Native images don't automatically size themselves. You need to tell the component exactly how big the image should be, or it won't display properly.

Loading Local Images

To use images that come with your app (bundled in the project), you use require instead of a URI. This is useful for icons, logos, and placeholder images.

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

function Logo() {
  return (
    <View>
      <Image
        source={require('./assets/logo.png')}
        style={{ width: 150, height: 50 }}
        resizeMode="contain"
      />
    </View>
  );
}

export default Logo;

The require syntax tells React Native to bundle the image with your app. The path is relative to the file where you write the code. Local images are loaded immediately since they're already on the device, while network images need to download first.

Resize Modes

The resizeMode prop controls how your image fits within its container. This is important because images come in different aspect ratios and you need them to display correctly.

<Image
  source={require('./assets/photo.jpg')}
  style={{ width: 300, height: 200 }}
  resizeMode="cover"
/>

The most common resize modes are: cover (fills the container, may crop), contain (fits entirely inside, may leave space), stretch (fills exactly, may distort), and center (centers without resizing). Choose the one that fits your design needs.