FAB

A floating action button represents the primary action in an application.

Usage

import * as React from 'react';
import { StyleSheet } from 'react-native';
import { FAB } from 'react-native-paper';

const MyComponent = () => (
  <FAB
    icon="plus"
    style={styles.fab}
    onPress={() => console.log('Pressed')}
  />
);

const styles = StyleSheet.create({
  fab: {
    position: 'absolute',
    margin: 16,
    right: 0,
    bottom: 0,
  },
})

export default MyComponent;

Props

icon (required)

Type: IconSource

Icon to display for the FAB.

Type: string

Optional label for extended FAB.

Type: boolean

Default value: !theme.isV3

Make the label text uppercased.

accessibilityLabel

Type: string

Default value: label

Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. Uses label by default if specified.

accessibilityState

Type: AccessibilityState

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

Type: boolean

Default value: true

Whether an icon change is animated.

Deprecated in v.3x - use prop size="small".

Type: boolean

Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if label is specified.

Type: string

Custom color for the icon and label of the FAB.

Type: boolean

Whether FAB is disabled. A disabled button is greyed out and onPress is not called on touch.

Type: boolean

Default value: true

Whether FAB is currently visible.

Type: boolean

Whether to show a loading indicator.

Type: () => void

Function to execute on press.

Type: () => void

Function to execute on long press.

Available in v5.x with theme version 3

Type: 'small' | 'medium' | 'large'

Default value: 'medium'

Size of the FAB.

small - FAB with small height (40).
medium - FAB with default medium height (56).
large - FAB with large height (96).

Available in v5.x

Type: number

Custom size for the FAB. This prop takes precedence over size prop

Available in v5.x with theme version 3

Type: 'flat' | 'elevated'

Default value: 'elevated'

Mode of the FAB. You can change the mode to adjust the the shadow:

flat - button without a shadow.
elevated - button with a shadow.

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: StyleProp<ViewStyle>

Type: Theme

Type: string

Default value: 'fab'