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.


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

export default class MyComponent extends React.Component {
  state = {
    open: false,

  render() {
    return (
             icon={this.state.open ? 'today' : 'add'}
               { icon: 'add', 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={({ open }) => this.setState({ open })}
             onPress={() => {
               if (this.state.open) {
                 // do something if the speed dial is open


actions (required)
Type: Array<{ icon: IconSource; label?: string; color?: string; accessibilityLabel?: string; style?: StyleProp<ViewStyle>; onPress: () => void; }>

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
  • accessibilityLabel: accessibility label for the action, uses label by default if specified
  • color: custom icon color of the action item
  • style: pass additional styles for the fab item, for example, backgroundColor
  • onPress: callback that is called when FAB is pressed (required)
icon (required)
Type: IconSource

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: () => void

Function to execute on pressing the FAB.

open (required)
Type: boolean

Whether the speed dial is open.

onStateChange (required)
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.

visible (required)
Type: boolean

Whether FAB is currently visible.

Type: StyleProp<ViewStyle>

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.

Type: StyleProp<ViewStyle>

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

Type: Theme