Skip to main content

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

Usage#

import { Avatar, Banner, Button } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Banner  illustration={props => (    <Avatar color="primary" icon={props => <Icon name="wifi-off" {...props} />} {...props} />  )}  text="There was a problem processing a transaction on your credit card."  buttons={[    <Button title="Fix it" variant="text" compact />,    <Button title="Learn More" variant="text" compact />,  ]}/>