# rn-fab-button

> A customizable fab-button component.

Latest version **1.0.5** (published 2021-03-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install rn-fab-button
pnpm add rn-fab-button
yarn add rn-fab-button
bun add rn-fab-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-03-26 |
| First published | 2021-03-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rachit Sharma |
| Maintainers | masquerade-x |
| Keywords | npm, react-native, fab-buttons, floating-buttons |

## Links

- npm: https://www.npmjs.com/package/rn-fab-button
- Repository: https://github.com/Masquerade-x/react-native-floating-buttons
- Homepage: https://github.com/Masquerade-x/react-native-floating-buttons#readme
- Issues: https://github.com/Masquerade-x/react-native-floating-buttons/issues
- npm.io page: https://npm.io/package/rn-fab-button

## Recent versions

- 1.0.5 (latest) — 2021-03-26
- 1.0.4 — 2021-03-24
- 1.0.3 — 2021-03-24
- 1.0.2 — 2021-03-24

## README

# rn-fab-button

![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square&colorB=191A17)
[![npm](https://img.shields.io/npm/v/rn-fab-button.svg?style=flat-square)](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))

---
_Source: https://npm.io/package/rn-fab-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._