expo-image

What is expo-image?

The expo-image package is a powerful tool for handling images in Expo and React Native applications. It provides a range of functionalities including image loading, caching, and displaying images with various transformations and effects.

What are expo-image's main functionalities?

Basic Image Display

This feature allows you to display an image from a URL. The Image component from expo-image is used to load and display the image with specified dimensions.

import { Image } from 'expo-image';

const App = () => (
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    style={{ width: 200, height: 200 }}
  />
);

Image Caching

This feature enables image caching to improve performance and reduce network usage. The cachePolicy prop can be set to 'disk' to cache the image on the device's disk.

import { Image } from 'expo-image';

const App = () => (
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    cachePolicy='disk'
    style={{ width: 200, height: 200 }}
  />
);

Image Transformations

This feature allows you to apply transformations to images, such as rounding the corners. In this example, the borderRadius style is used to create a circular image.

import { Image } from 'expo-image';

const App = () => (
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    style={{ width: 200, height: 200, borderRadius: 100 }}
  />
);

Image Placeholders

This feature allows you to display a placeholder image while the main image is loading. The placeholder prop is used to specify the URI of the placeholder image.

import { Image } from 'expo-image';

const App = () => (
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    placeholder={{ uri: 'https://example.com/placeholder.jpg' }}
    style={{ width: 200, height: 200 }}
  />
);

Other packages similar to expo-image

react-native-fast-image

react-native-fast-image is a performant React Native image component that supports caching, progressive loading, and image transformations. It is similar to expo-image but is known for its high performance and extensive caching capabilities.

react-native-image-progress

react-native-image-progress is a React Native component that integrates with react-native-image and provides progress indicators for image loading. It is useful for displaying loading states and progress bars, which is a feature not directly provided by expo-image.

react-native-cached-image

react-native-cached-image is a React Native component that provides image caching and progressive loading. It is similar to expo-image in terms of caching capabilities but also offers additional features like custom cache management.

README

A cross-platform, performant image component for React Native and Expo.

Main features

• Designed for speed
• Support for many image formats (including animated ones)
• Disk and memory caching
• Supports BlurHash and ThumbHash - compact representations of a placeholder for an image
• Transitioning between images when the source changes (no more flickering!)
• Implements the CSS object-fit and object-position properties (see contentFit and contentPosition props)
• Uses performant SDWebImage and Glide under the hood

Supported image formats

Format	Android	iOS	Web
WebP	✅	✅	✅
PNG / APNG	✅	✅	✅
AVIF	✅	✅	✅
HEIC	✅	✅	❌ not adopted yet
JPEG	✅	✅	✅
GIF	✅	✅	✅
SVG	✅	✅	✅
ICO	✅	✅	✅
ICNS	❌	✅	❌

API documentation

• Documentation for the latest stable release

Installation in managed Expo projects

For managed Expo projects, follow the installation instructions in the API documentation for the latest stable release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npx expo install expo-image

Configure for iOS

Run npx pod-install after installing the npm package.

Configure for Android

No additional setup necessary.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.