Version: 3.0.7

FAB

A floating action button is a circular icon button that hovers over content to promote a primary action in the application.

Import#

import { Fab } from 'native-base';

Example#

Basic#

Placement#

Custom Position#

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of fab
We can easily extend the fab component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
FAB: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Props#

Name Type Description Default
placement "top-right" | "top-left" | "bottom-right" | "bottom-left" Placement of the Fab bottom-right
label Element Text to be displayed in Fab -
icon Element Icon to be displayed in Fab -
renderInPortal boolean Determines whether the Fab should be rendered in a Portal. Refer this solution before using this prop https://github.com/GeekyAnts/NativeBase/issues/3817 true

Fab implements Button, Pressable