rn-fab-button

A React Native Fab Button Component built using react-native animations providing the user ability to add buttons and customize them accordingly.

Prerequisites

Kindly install @react-native-vector-icons before you start using this component.

Table of content

• Installation

  • yarn add rn-fab-button
  • npm i rn-fab-button

• Usage

• Props

• Credits

Usage

import { FloatingButton } from "rn-fab-button";

<FloatingButton
  noOfButtons={2}
  icons={["example", "example"]}
  size={20}
  toggleBtnSize={20}
  width={40}
  height={40}
  onPress={() => console.log("running")}
  buttonBgColor={"green"}
  toggleButtonStyle={{ backgroundColor: "#8B008B" }}
  iconColor="white"
/>;

Props

Required

| Prop | Description | Type | Default | | ----------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- | | noOfButtons | No of buttons to be displayed | Number | Required | | icons | Takes an array of name of icons to renders into the buttons. Receives an object with array {['example','example']} | Arryay | Required | | width | Width in pixels for the fab buttons, same for all of them | Number | Required for background of the icons | | height | height in pixels for the fab buttons | Number | Required for background of the icons | | toggleBtnSize | Size of the toggle button | Number | **Required ** | | buttonBgColor | background color of the buttons | String | Optional | | toggleButtonStyle | styling for the toggle buttons | String | Optional | | iconColor | color of the fab button icons | String | Required | | size | size of the fab buttons | Number | Requried | | onPress | callback when the fab button is pressed | function | Optional |

Credits

Written by Rachit Sharma (masquerade-x)