Snackbar

显示在屏幕底部的简短通知，用于提供反馈而不会打断用户

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

Expo UI 提供了两个组件，对应 Jetpack Compose 的 Snackbar API：

SnackbarHost 包装了 Compose 的 SnackbarHost 和 SnackbarHostState。在布局中放置一次，然后调用 ref 上的 showSnackbar。Snackbar 会根据 duration 自动关闭，也可以通过操作按钮或可选的关闭图标将其关闭。
Snackbar 是 SnackbarHost 的纯样式子组件。传入该组件可覆盖颜色，或将操作按钮放到新的一行。

Material 3 snackbar，显示消息“Item archived”和“Undo”操作

安装

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.

用法

显示 snackbar

在布局中放置一次 SnackbarHost，并调用其 ref 上的 showSnackbar 来显示消息。Snackbar 消失后，返回的 promise 会解析为 'actionPerformed' 或 'dismissed'。

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>
  );
}

自定义样式

向 SnackbarHost 传入一个 Snackbar 子组件，即可覆盖颜色或将操作按钮放到新的一行。Snackbar 本身不接受内容，消息和操作按钮由每次 showSnackbar 调用提供。

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`