This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Snackbar

A brief notification that appears at the bottom of the screen to provide feedback without interrupting the user.

Android

Included in Expo Go

GitHub

npm

Changelog

Expo UI exposes two components that mirror Jetpack Compose's Snackbar APIs:

SnackbarHost wraps Compose's SnackbarHost and 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 is a styling-only child of SnackbarHost. Pass one to override colors or place the action on a new line.

Material 3 snackbar showing the message 'Item archived' with an Undo action

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Showing a snackbar

Place a 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.

SnackbarExample.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 child to SnackbarHost to override colors or place the action on a new line. The Snackbar itself takes no content, the message and action come from each showSnackbar call.

StyledSnackbar.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',
      withDismissAction: true,
    });
  };

  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

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

Components

`Snackbar`

Android

Type: React.Element<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`

Android

Optional • Type: ColorValue

The content color used for the action button.

`actionOnNewLine`

Android

Optional • Type: boolean • Default: false

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

`containerColor`

Android

Optional • Type: ColorValue

The background color of the snackbar container.

`contentColor`

Android

Optional • Type: ColorValue

The preferred content color used for the message text.

`dismissActionContentColor`

Android

Optional • Type: ColorValue

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

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`SnackbarHost`

Android

Type: React.Element<SnackbarHostProps>

A Material 3 SnackbarHost that displays snackbars triggered via its ref's showSnackbar method.

SnackbarHostProps

`children`

Android

Optional • Type: ReactNode

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

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`ref`

Android

Optional • Type: Ref<SnackbarHostRef>

Ref exposing the imperative showSnackbar method.

Types

`SnackbarDuration`

Android

Literal type: string

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

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

`SnackbarHostRef`

Android

Property	Type	Description
showSnackbar	`(options: SnackbarShowOptions) => Promise<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`

Android

Literal type: string

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

Acceptable values are: 'actionPerformed' | 'dismissed'

`SnackbarShowOptions`

Android

Property	Type	Description
actionLabel(optional)	`string`	Label for the optional action button. When omitted, no action button is shown.
duration(optional)	`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`