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
    style={styles.fab}
    small
    icon="plus"
    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.

label
Type: string

Optional label for extended FAB.

accessibilityLabel
Type: string

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

small
Type: boolean

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

color
Type: string

Custom color for the FAB.

disabled
Type: boolean

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

visible
Type: boolean
Default value: true

Whether FAB is currently visible.

loading
Type: boolean

Whether to show a loading indicator.

onPress
Type: () => void

Function to execute on press.

style
Type: StyleProp<ViewStyle>
theme
Type: Theme

Static properties

These properties can be accessed on FAB by using the dot notation, e.g. FAB.Group.

Group