---
modificationDate: August 18, 2026
title: Image
description: A Jetpack Compose Image component for displaying images.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/versions/unversioned/sdk/ui/jetpack-compose/image/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/unversioned/sdk/ui/jetpack-compose/image/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, use llms.txt to find the relevant page as Markdown (.md) instead of guessing.

You are here: Reference (unversioned) > Expo UI > Jetpack Compose (51 pages in this section)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

> This is documentation for the next SDK version.

# Image

A Jetpack Compose Image component for displaying images.
Android, Included in Expo Go

Expo UI Image wraps the official Jetpack Compose [Image](https://developer.android.com/develop/ui/compose/graphics/images) 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.

## Installation

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) in your project.

## Usage

```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

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

## Component

### `Image`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[ImageProps](#imageprops)\>

Displays an image using Jetpack Compose.

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

Example

```tsx
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`

Supported platforms: Android.

Optional • Type: `ContentAlignment` • Default: `'center'`

How the image should be aligned within its bounds.

### `alpha`

Supported platforms: Android.

Optional • Type: `number` • Default: `1`

Opacity of the image between `0` and `1`.

Example

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

### `contentDescription`

Supported platforms: 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

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

Acceptable values are: `string` | `null`

### `contentScale`

Supported platforms: Android.

Optional • Type: [ImageContentScale](#imagecontentscale) • Default: `'fit'`

How the image should be scaled to fit its bounds.

Example

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

### `onError`

Supported platforms: Android.

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

Callback that is called when the image fails to load.

### `onLoad`

Supported platforms: Android.

Optional • Type: `() => void`

Callback that is called when the image loads successfully.

### `source`

Supported platforms: Android.

Type: [ImageSource](#imagesource)

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

Example

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

### `tint`

Supported platforms: Android.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

Optional color applied to every non-transparent image pixel.

Example

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

#### Inherited props

-   `PrimitiveBaseProps`

## Types

### `ImageContentScale`

Supported platforms: Android.

Literal type: `string`

Controls how an image is scaled inside its bounds.

Acceptable values are: `'fit'` | `'crop'` | `'fillBounds'` | `'fillWidth'` | `'fillHeight'` | `'inside'` | `'none'`

### `ImageSource`

Supported platforms: 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` | - |