Notice Banner

An inline alert in one of four tones: info, success, warning and error. It slides in and collapses its height on the way out, so the content below follows smoothly. With onDismiss it shows a close button and can also be swiped sideways. Errors and warnings are announced at once, and the other tones wait politely. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add notice-banner

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/notice-banner.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { NoticeBanner } from "@/components/ui/notice-banner";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <NoticeBanner
      tone="warning"
      title="Storage almost full"
      message="You have used 9.2 of 10 GB."
      visible={open}
      onDismiss={() => setOpen(false)}
      action={{ label: "Manage", onPress: () => console.log("manage") }}
    />
  );
}

Props