Banner

A banner displays a prominent message and related optional actions.

A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

💬 Feedback 🎨 Material Design

Import

import { Banner } from "@react-native-material/core";

Usage

Props

text

Type: string | React.ReactElement | null;

Optional: No

---

illustration

Type: React.ReactElement | ((props: { size: number }) => React.ReactElement | null) | null;

Optional: Yes

---

buttons

Type: React.ReactElement | React.ReactElement[] | null;

Optional: No

---

style

Type: StyleProp<ViewStyle>;

Optional: Yes

---

contentContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes

---

illustrationContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes

---

textContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes

---

textStyle

Type: StyleProp<TextStyle>;

Optional: Yes

---

actionsContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes

---