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

Type: boolean

Whether banner is currently visible.

Type: string

Content that will be displayed inside banner.

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

Type: Array< { label: string; } & Omit<React.ComponentProps<typeof Button>, 'children'> >

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.

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

elevation
Available in v5.x with theme version 3
Type: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value
Default value: 1

Changes Banner shadow and background on iOS and Android.

Type: React.RefObject<View>
Type: Animated.EndCallback
Default value: () => {}

Optional callback that will be called after the opening animation finished running normally

Type: Animated.EndCallback
Default value: () => {}

Optional callback that will be called after the closing animation finished running normally

Edit this page