This is documentation for the next SDK version.

Image

A Jetpack Compose Image component for displaying images.

Android

Included in Expo Go

GitHub

npm

Changelog

Expo UI Image wraps the official Jetpack Compose Image API and displays a bundled or remote image. Set the size with modifiers such as size, width, or fillMaxWidth, then contentScale to control how the image fills those bounds.

Images rendered with different contentScale props

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

ImageExample.tsx

import { Host, Image } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

export default function ImageExample() {
  return (
    <Host matchContents>
      <Image
        source={require('./assets/photo.jpg')}
        contentScale="crop"
        contentDescription="A mountain at sunset"
        modifiers={[size(240, 160)]}
      />
    </Host>
  );
}

API

import { Image } from '@expo/ui/jetpack-compose';

Component

`Image`

Android

Type: React.Element<ImageProps>

Displays an image using Jetpack Compose.

Size the image with modifiers such as size, width, height, or fillMaxSize.

Example

import { Image } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

<Image
  source={require('./photo.png')}
  contentScale="crop"
  contentDescription="A mountain at sunset"
  modifiers={[size(160, 100)]}
/>

ImageProps

`alignment`

Android

Optional • Type: ContentAlignment • Default: 'center'

How the image should be aligned within its bounds.

`alpha`

Android

Optional • Type: number • Default: 1

Opacity of the image between 0 and 1.

Example

<Image source={require('./icon.png')} alpha={0.5} />

`contentDescription`

Android

Optional • Literal type: union

Accessibility label for the image. Used by screen readers to describe the image to users. Use null for decorative images.

Example

<Image
  source={require('./photo.png')}
  contentDescription="A mountain at sunset"
/>

Acceptable values are: string | null

`contentScale`

Android

Optional • Type: ImageContentScale • Default: 'fit'

How the image should be scaled to fit its bounds.

Example

<Image source={require('./photo.png')} contentScale="crop" />

`onError`

Android

Optional • Type: (error: string) => void

Callback that is called when the image fails to load.

`onLoad`

Android

Optional • Type: () => void

Callback that is called when the image loads successfully.

`source`

Android

Type: ImageSource

A bundled image or an object containing a single local or remote URI.

Example

<Image source={require('./photo.png')} />
<Image source={{ uri: 'file:///path/to/photo.png' }} />

`tint`

Android

Optional • Type: ColorValue

Optional color applied to every non-transparent image pixel.

Example

<Image source={require('./icon.png')} tint="#007AFF" />
<Image source={require('./icon.png')} tint="blue" />

Inherited props

PrimitiveBaseProps

Types

`ImageContentScale`

Android

Literal type: string

Controls how an image is scaled inside its bounds.

`ImageSource`

Android

A bundled image or a single URI-based image source.

Type: number or object shaped as below:

Property	Type	Description
height(optional)	`number`	-
scale(optional)	`number`	-
uri	`string`	-
width(optional)	`number`	-