Banner

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/banner.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/banner.

Usage

import { useState } from "react";
import { Banner } from "@/components/goodui-native/banner/banner";

export function BillingNotice({ retryPayment }: { retryPayment: () => Promise<void> }) {
  const [visible, setVisible] = useState(true);
  return (
    <Banner
      visible={visible}
      onVisibleChange={setVisible}
      tone="danger"
      title="Payment failed"
      description="Your Visa ending 4242 was declined. Update it to keep Pro."
      action={{ label: "Retry payment", onPress: retryPayment }}
      spacing={16}
    />
  );
}

When to use

Examples

<OfflineBanner offline={!isConnected} onRetry={() => refetch()} spacing={12} />

<Banner tone="success" title="Booking moved to Friday, 10:30" duration={4000} visible={moved} onVisibleChange={setMoved} />

<Banner variant="solid" tone="warning" dismissible={false} title="Maintenance tonight from 01:00 to 02:00" />

API reference

Motion and haptics

• •Show: the outer height opens to the measured content on the smooth spring while the card slides down from under the edge above (translateY from minus its height), so the content below is pushed, never jumps. Hide runs the same in reverse.
• •Swipe: the card follows the finger 1:1 sideways and fades with distance; past 35 % of its width or a fast flick it springs off with the release velocity and the height closes behind it, otherwise it snaps back on the snappy spring.
• •A tone or variant change crossfades the surface, text and icon disc colors on the UI thread (OfflineBanner uses this for offline to back online). The success check draws itself in each time the banner appears.
• •duration: a 2 pt hairline drains across the bottom; a touch (or hover on the web) pauses it and it resumes where it stopped.
• •A rejected action shakes the card.
• •Reduced motion: the height changes at once and the card fades, no slide; the fling is a short timing; no shake; the check appears without drawing. The timer still runs.

• •Haptic: warning or error when a warning or danger banner appears after mount (not on first render)
• •Haptic: tap on dismiss and on the action; success or error when an async action settles
• •Haptic: haptic={false} turns all of them off for one banner; OfflineBanner plays none

• •Height, slide, swipe, colors and the timer run on the UI thread. The content is measured once per real size change.
• •A hidden banner stays mounted at zero height; unmount it yourself if it will never come back.

Accessibility

• •When a banner appears after mount its title and description (or `announcement`) are announced once; it is not a live region, so nothing is read twice.
• •On iOS and Android warning and danger banners carry the alert role, info and success the summary role.
• •The × is an IconButton labelled 'Dismiss'; the action is a button with busy and disabled in accessibilityState and as aria-busy and aria-disabled on the web.
• •The action label sits on a plain surface pill (on the solid variant, a pill in the tone's on color), never on a tint of its own status color, so its 13 pt label keeps 4.5:1 in light and dark for every tone and accent.
• •A failed async action announces '<label> failed. Try again.'.
• •While collapsed the banner is hidden from screen readers (accessibilityElementsHidden, no-hide-descendants, aria-hidden) and ignores touches.
• •Swipe to dismiss is a shortcut only: the × button does the same.

Notes for AI

Related