FAB | NativeBase | Universal Components for React and React Native

Search
K
Hire us
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 is a circular icon button that hovers over content to promote a primary action in the application.
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: "top-right" | "top-left" | "bottom-right" | "bottom-left"
Default: bottom-right
label
Text to be displayed in Fab
Type: Element
icon
Icon to be displayed in Fab
Type: Element
renderInPortal
Determines whether the Fab should be rendered in a Portal. Refer this solution before using this prop https://github.com/GeekyAnts/NativeBase/issues/3817
Type: boolean
Default: true
Nativebase logo
MadeWithNativeBase