FAB | NativeBase


Show Code
Playground
const Example = () => {
  return <Box height="200" w="400" shadow="2" rounded="lg" bg="white:alpha.20">
      <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />} />
    </Box>;
};const Example = () => {
  return <Box height="200" w="400" shadow="2" rounded="lg" bg="white:alpha.20">
      <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />} />
    </Box>;
};

Import

Copy
import { Fab } from 'native-base';

Example

Basic


Playground
const Example = () => {
  return <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} />
      </Box>
    </Center>;
};const Example = () => {
  return <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} />
      </Box>
    </Center>;
};

Placement


Playground
const Example = () => {
  return <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} placement="top-right" size="sm" icon={<Icon color="white" as={MaterialIcons} name="lightbulb" size="4" />} label="Quick Start" />
      </Box>
    </Center>;
};const Example = () => {
  return <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} placement="top-right" size="sm" icon={<Icon color="white" as={MaterialIcons} name="lightbulb" size="4" />} label="Quick Start" />
      </Box>
    </Center>;
};

Custom Position


Playground
const Example = () => {
  return <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} right={70} bottom={50} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="4" />} />
      </Box>
    </Center>;
};const Example = () => {
  return <Center>
      <Box height="200" w={[200, 300, 400]} shadow="2" rounded="lg" _dark={{
      bg: "coolGray.200:alpha.20"
    }} _light={{
      bg: "coolGray.200:alpha.20"
    }}>
        <Fab renderInPortal={false} shadow={2} right={70} bottom={50} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="4" />} />
      </Box>
    </Center>;
};

Styling

NativeBase ships with a default theme for each component. Check out the default theme of the fab

here

Info: We can easily extend the fab component theme using extendTheme function as described in the documentation

here

Props

Fab implements

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

Stagger

Hidden

Quick Nav