Logo

FAB.Group

A component to display a stack of FABs with related actions in a speed dial. To render the group above other components, you'll need to wrap it with the Portal component.

Usage

import * as React from 'react';
import { FAB, Portal, Provider } from 'react-native-paper';

const MyComponent = () => {
  const [state, setState] = React.useState({ open: false });

  const onStateChange = ({ open }) => setState({ open });

  const { open } = state;

  return (
    <Provider>
      <Portal>
        <FAB.Group
          open={open}
          icon={open ? 'calendar-today' : 'plus'}
          actions={[
            { icon: 'plus', onPress: () => console.log('Pressed add') },
            {
              icon: 'star',
              label: 'Star',
              onPress: () => console.log('Pressed star'),
            },
            {
              icon: 'email',
              label: 'Email',
              onPress: () => console.log('Pressed email'),
            },
            {
              icon: 'bell',
              label: 'Remind',
              onPress: () => console.log('Pressed notifications'),
            },
          ]}
          onStateChange={onStateChange}
          onPress={() => {
            if (open) {
              // do something if the speed dial is open
            }
          }}
        />
      </Portal>
    </Provider>
  );
};

export default MyComponent;

Props

Type: Array<{ icon: IconSource; label?: string; color?: string; labelTextColor?: string; accessibilityLabel?: string; accessibilityHint?: string; style?: StyleProp<ViewStyle>; containerStyle?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; onPress: () => void; size?: 'small' | 'medium'; testID?: string; }>

Action items to display in the form of a speed dial. An action item should contain the following properties:

  • icon: icon to display (required)
  • label: optional label text
  • color: custom icon color of the action item
  • labelTextColor: custom label text color of the action item
  • accessibilityLabel: accessibility label for the action, uses label by default if specified
  • accessibilityHint: accessibility hint for the action
  • style: pass additional styles for the fab item, for example, backgroundColor
  • containerStyle: pass additional styles for the fab item label container, for example, backgroundColor Available in 5.x
  • labelStyle: pass additional styles for the fab item label, for example, fontSize
  • onPress: callback that is called when FAB is pressed (required)
  • size: size of action item. Defaults to small. Available in v5.x
  • testID: testID to be used on tests

Icon to display for the FAB. You can toggle it based on whether the speed dial is open to display a different icon.

Type: string

Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.

Type: string

Custom color for the FAB.

Type: string

Custom backdrop color for opened speed dial background.

Type: () => void

Function to execute on pressing the FAB.

Type: boolean

Whether the speed dial is open.

Type: (state: { open: boolean }) => void

Callback which is called on opening and closing the speed dial. The open state needs to be updated when it's called, otherwise the change is dropped.

Type: boolean

Whether FAB is currently visible.

Style for the group. You can use it to pass additional styles if you need. For example, you can set an additional padding if you have a tab bar at the bottom.

Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.

variant
Available in v5.x with theme version 3
Type: 'primary' | 'secondary' | 'tertiary' | 'surface'
Default value: 'primary'

Color mappings variant for combinations of container and icon colors.

Type: string

Pass down testID from Group props to FAB.

Edit this page