FAB | NativeBase


Playground
const Example = () => {
  return <Box position="relative" h={100} w="100%">
      <Fab position="absolute" size="sm" icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />} />
    </Box>;
};const Example = () => {
  return <Box position="relative" h={100} w="100%">
      <Fab position="absolute" size="sm" icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />} />
    </Box>;
};

Placement


Playground
const Example = () => {
  return <Box h={400} w="100%">
      <Fab placement="top-right" icon={<Icon color="white" as={<AntDesign name="plus" />} size={4} />} label={<Text color="white" fontSize="sm">
            BUTTON
          </Text>} />
    </Box>;
};const Example = () => {
  return <Box h={400} w="100%">
      <Fab placement="top-right" icon={<Icon color="white" as={<AntDesign name="plus" />} size={4} />} label={<Text color="white" fontSize="sm">
            BUTTON
          </Text>} />
    </Box>;
};

Custom Position


Playground
const Example = () => {
  return <Box position="relative" w="100%" h={200}>
      <Fab right={70} bottom={50} icon={<Icon color="white" as={<AntDesign name="plus" />} />} />
    </Box>;
};const Example = () => {
  return <Box position="relative" w="100%" h={200}>
      <Fab right={70} bottom={50} icon={<Icon color="white" as={<AntDesign name="plus" />} />} />
    </Box>;
};

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: "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

Quick Nav

FAB | NativeBase | Universal Components for React and React Native