---
modificationDate: June 29, 2026
title: Snackbar
description: A brief notification that appears at the bottom of the screen to provide feedback without interrupting the user.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-57/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

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

Only submit when you have something specific and actionable to report. Replace <model> with the model you are running as and <harness> with the tool you are running in (for example, Claude Code, Cursor, Codex CLI).

## 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 (v57.0.0) > Expo UI > Jetpack Compose (50 pages in this section)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

# Snackbar

A brief notification that appears at the bottom of the screen to provide feedback without interrupting the user.
Android, Included in Expo Go

Expo UI exposes two components that mirror Jetpack Compose's [Snackbar](https://developer.android.com/develop/ui/compose/components/snackbar) APIs:

-   [`SnackbarHost`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbarhost) wraps Compose's [SnackbarHost](https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable) and [SnackbarHostState](https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState). Place it once in your layout, then call `showSnackbar` on the `ref`. Snackbars auto-dismiss based on `duration` and can also be dismissed via the action button or the optional close icon.
-   [`Snackbar`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbar) is a styling-only child of [`SnackbarHost`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbarhost). Pass one to override colors or place the action on a new line.

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

### Showing a snackbar

Place a [`SnackbarHost`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbarhost) once in your layout and call `showSnackbar` on its ref to display a message. The returned promise resolves with `'actionPerformed'` or `'dismissed'` once the snackbar goes away.

```tsx
import { useRef } from 'react';
import {
  Box,
  Button,
  Column,
  Host,
  SnackbarHost,
  Text,
  type SnackbarHostRef,
} from '@expo/ui/jetpack-compose';
import { align, fillMaxSize, fillMaxWidth, padding } from '@expo/ui/jetpack-compose/modifiers';

export default function SnackbarExample() {
  const hostRef = useRef<SnackbarHostRef>(null);

  const onArchive = async () => {
    const result = await hostRef.current?.showSnackbar({
      message: 'Item archived',
      actionLabel: 'Undo',
      duration: 'short',
    });
    if (result === 'actionPerformed') {
      // The user tapped Undo, restore the item.
    }
  };

  return (
    <Host style={{ flex: 1 }}>
      <Box modifiers={[fillMaxSize()]}>
        <Column modifiers={[padding(16, 16, 16, 16)]}>
          <Button onClick={onArchive}>
            <Text>Archive</Text>
          </Button>
        </Column>

        <Box modifiers={[align('bottomCenter'), fillMaxWidth()]}>
          <SnackbarHost ref={hostRef} />
        </Box>
      </Box>
    </Host>
  );
}
```

### Custom styling

Pass a [`Snackbar`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbar) child to [`SnackbarHost`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbarhost) to override colors or place the action on a new line. The [`Snackbar`](/versions/v57.0.0/sdk/ui/jetpack-compose/snackbar.md#snackbar) itself takes no content, the message and action come from each `showSnackbar` call.

```tsx
import { useRef } from 'react';
import {
  Box,
  Button,
  Column,
  Host,
  Snackbar,
  SnackbarHost,
  Text,
  type SnackbarHostRef,
} from '@expo/ui/jetpack-compose';
import { align, fillMaxSize, fillMaxWidth, padding } from '@expo/ui/jetpack-compose/modifiers';

export default function StyledSnackbar() {
  const hostRef = useRef<SnackbarHostRef>(null);

  const onSave = () => {
    hostRef.current?.showSnackbar({
      message: 'Saved',
      actionLabel: 'Undo',
    });
  };

  return (
    <Host style={{ flex: 1 }}>
      <Box modifiers={[fillMaxSize()]}>
        <Column modifiers={[padding(16, 16, 16, 16)]}>
          <Button onClick={onSave}>
            <Text>Save</Text>
          </Button>
        </Column>

        <Box modifiers={[align('bottomCenter'), fillMaxWidth()]}>
          <SnackbarHost ref={hostRef}>
            <Snackbar
              containerColor="#1E1E2E"
              contentColor="#CDD6F4"
              actionContentColor="#F38BA8"
              dismissActionContentColor="#CDD6F4"
            />
          </SnackbarHost>
        </Box>
      </Box>
    </Host>
  );
}
```

## API

```tsx
import { Snackbar, SnackbarHost } from '@expo/ui/jetpack-compose';
```

## Components

### `Snackbar`

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

Styling configuration for the snackbar shown by `SnackbarHost`. Pass as a child to override colors or place the action on a new line.

SnackbarProps

### `actionContentColor`

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

The content color used for the action button.

### `actionOnNewLine`

Optional • Type: `boolean` • Default: `false`

Whether the action should be placed on a new line below the message. Useful for long action labels.

### `containerColor`

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

The background color of the snackbar container.

### `contentColor`

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

The preferred content color used for the message text.

### `dismissActionContentColor`

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

The content color used for the dismiss-action icon button.

### `modifiers`

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `SnackbarHost`

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

A Material 3 [SnackbarHost](https://developer.android.com/develop/ui/compose/components/snackbar) that displays snackbars triggered via its ref's `showSnackbar` method.

SnackbarHostProps

### `children`

Optional • Type: [ReactNode](https://reactnative.dev/docs/react-node)

Optional `Snackbar` child supplying styling for shown snackbars. Mirrors Compose's `SnackbarHost(hostState) { data -> Snackbar(data, ...) }` lambda.

### `modifiers`

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `ref`

Optional • Type: Ref<[SnackbarHostRef](#snackbarhostref)\>

Ref exposing the imperative `showSnackbar` method.

## Types

### `SnackbarDuration`

Literal Type: `string`

How long the snackbar is shown. Mirrors Compose's `SnackbarDuration` enum.

Acceptable values are: `'short'` | `'long'` | `'indefinite'`

### `SnackbarHostRef`

| Property | Type | Description |
| --- | --- | --- |
| showSnackbar | (options: [SnackbarShowOptions](#snackbarshowoptions)) => [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)<[SnackbarResult](#snackbarresult)\> | Shows a snackbar and resolves with `'actionPerformed'` when the user taps the action, or `'dismissed'` when it times out or the dismiss-action button is tapped. Subsequent calls queue and show after the current snackbar is dismissed. |

### `SnackbarResult`

Literal Type: `string`

Reason a snackbar invocation resolved. Mirrors Compose's `SnackbarResult` enum.

Acceptable values are: `'actionPerformed'` | `'dismissed'`

### `SnackbarShowOptions`

| Property | Type | Description |
| --- | --- | --- |
| actionLabel(optional) | `string` | Label for the optional action button. When omitted, no action button is shown. |
| duration(optional) | [SnackbarDuration](#snackbarduration) | How long to show the snackbar. Defaults to `'short'` when an `actionLabel` is not provided, and `'indefinite'` when it is, matching Compose. |
| message | `string` | The message body of the snackbar. |
| withDismissAction(optional) | `boolean` | Whether to show a trailing close (X) icon button to dismiss the snackbar. Default: `false` |