Fab

Renders floating action button


See it on Snack

import { Fab } from "react-native-magnus";

<Fab bg="blue600" h={50} w={50}>
  <Button p="none" bg="transparent" justifyContent="flex-end">
    <Div rounded="sm" bg="white" p="sm">
      <Text fontSize="md">Cheer</Text>
    </Div>
    <Icon
      name="user"
      color="blue600"
      h={50}
      w={50}
      rounded="circle"
      ml="md"
      bg="white"
    />
  </Button>
  <Button p="none" bg="transparent" justifyContent="flex-end">
    <Div rounded="sm" bg="white" p="sm">
      <Text fontSize="md">Boost</Text>
    </Div>
    <Icon
      name="user"
      color="blue600"
      h={50}
      w={50}
      rounded="circle"
      ml="md"
      bg="white"
    />
  </Button>
</Fab>;

Props

PropertyDescriptionTypeDefault
hheight of fab buttonnumber40
wwidth of fab buttonnumber40
bgbackground colorstringred500
colorcolor of iconstringwhite
fontSizefontSize of iconstringtext500
overlayColorbackgorund color of overlaystringgray700
overlayOpacityopacity of overlaystring0.5
positionused to position the childrens`absolute”“relative”`
rightnumber of logical pixels to offset the right edge of this component.number30
bottomnumber of logical pixels to offset the bottom edge of this component.number30
openOnMountopens the fab if truebooleanfalse
showOverlayshows the overlay if truebooleantrue
animatedif animation is enabledbooleantrue
iconicon component of fab ( default is plus of AntDesign)`stringReact.ReactNode`
activeIconactive icon component of fab when fab is in active state ( default is close of AntDesign)`stringReact.ReactNode`
roundedborder radius`stringnumber`
roundedTopborder radius top`stringnumber`
roundedBottomborder radius bottom`stringnumber`
roundedLeftborder radius left`stringnumber`
roundedRightborder radius right`stringnumber`
shadowshadow level of fab buttonnumber3
shadowColorshadow color of fab buttonstringgray900
rippleIf the ripple is enabled in case of androidbooleantrue
rippleColorripple colorstringgray900
borderlessIf the ripple can render outside it’s boundsbooleanfalse
disableddisabled state for button. Decreases the opacity and onPress handler won’t work when truebooleanfalse
loadingloading state for button. Renders the ActivityIndicator inside button when truebooleanfalse
loaderColorcolor for ActivityIndicator for loading statestringgray400
loaderSizesize for ActivityIndicator for loading statestringmd
borderColorcolor for borderstring-
borderTopColorcolor for border topstring-
borderRightColorcolor for border rightstring-
borderLeftColorcolor for border leftstring-
borderBottomColorcolor for border bottomstring-
borderWidthwidth for bordernumber-
borderTopWidthwidth for border topnumber-
borderRightWidthwidth for border rightnumber-
borderLeftWidthwidth for border leftnumber-
borderBottomWidthwidth for border bottomnumber-
opacityopacitynumber-
onPressevent triggered on pressing the fab. Childrens won’t appear this prop is used.`((event: RNGestureResponderEvent) => void)undefined;`