FAB | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
FAB
A floating action button (FAB) is a circular icon button that hovers over content to execute a primary action in the application.
Show Code
Playground
Import
Copy
import { Fab } from 'native-base';
Example
Basic
Playground
Placement
Playground
Custom Position
Playground
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the fab.
Info: We can easily extend the fab component theme using extendTheme function as described in the documentation .
Props
placement
Placement of the Fab.
Type: "bottom-right" | "top-right" | "top-left" | "bottom-left"
Default: bottom-right
label
Text to be displayed in Fab.
Type: string | Element
icon
Icon to be displayed in Fab.
Type: Element
renderInPortal
Determines whether the Fab should be rendered in a Portal. Refer to this solution before using this prop- https://github.com/GeekyAnts/NativeBase/issues/3817
Type: boolean
Default: true
Nativebase logo
MadeWithNativeBase