Logo

Banner

Banner displays a prominent message and related actions.

Usage

import * as React from 'react';
import { Image } from 'react-native';
import { Banner } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(true);

  return (
    <Banner
      visible={visible}
      actions={[
        {
          label: 'Fix it',
          onPress: () => setVisible(false),
        },
        {
          label: 'Learn more',
          onPress: () => setVisible(false),
        },
      ]}
      icon={({size}) => (
        <Image
          source={{
            uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',
          }}
          style={{
            width: size,
            height: size,
          }}
        />
      )}>
      There was a problem processing a transaction on your credit card.
    </Banner>
  );
};

export default MyComponent;

Props

visible (required)
Type: boolean

Whether banner is currently visible.

children (required)
Type: string

Content that will be displayed inside banner.

icon
Type: IconSource

Icon to display for the Banner. Can be an image.

actions (required)
Type: Array<{ label: string; onPress: () => void; }>

Action items to shown in the banner. An action item should contain the following properties:

  • label: label of the action button (required)
  • onPress: callback that is called when button is pressed (required)

To customize button you can pass other props that button component takes.

contentStyle
Type: StyleProp<ViewStyle>

Style of banner's inner content. Use this prop to apply custom width for wide layouts.

style
Type: StyleProp<ViewStyle>
ref
Type: React.RefObject<View>
theme
Type: Theme
Edit this page