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
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.
Type:
AccessibilityState
Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.
small
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:
boolean
Whether FAB
is disabled. A disabled button is greyed out and onPress
is not called on touch.
Type:
number
The number of milliseconds a user must touch the element before executing onLongPress
.
size
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).
mode
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.
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:
ThemeProp
Type:
React.RefObject<View>