rn-fab-button
Version:
A customizable fab-button component.
62 lines (45 loc) • 3.62 kB
Markdown
# rn-fab-button
[](https://www.npmjs.com/package/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](#installation)
- ` yarn add rn-fab-button`
- ` npm i rn-fab-button`
- [Usage](#typo3-setup)
- [Props](#page-setup)
- [Credits](#credits)
## Usage
```javascript
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](https://www.linkedin.com/in/rachit-sharma-8ba31b175/) ([masquerade-x](https://github.com/Masquerade-x))