Version: 3.0.7


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


import { Fab } from 'native-base';




Custom Position#


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 */}
Read more about extending component theme here.


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 true

Fab implements Button, Pressable