# bottom-app-bar

> A component based on material design app bars.

Latest version **1.0.2** (published 2020-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install bottom-app-bar
pnpm add bottom-app-bar
yarn add bottom-app-bar
bun add bottom-app-bar
```

## 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.2 |
| Published | 2020-01-07 |
| First published | 2020-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Matheus Henrique |
| Maintainers | sealove20 |
| Keywords | react-native, react-component, react-native-component, react, react native, mobile, ios, android, ui |

## Links

- npm: https://www.npmjs.com/package/bottom-app-bar
- Repository: https://github.com/sealove20/bottom-app-bar
- Homepage: https://github.com/sealove20/bottom-app-bar#readme
- Issues: https://github.com/sealove20/bottom-app-bar/issues
- npm.io page: https://npm.io/package/bottom-app-bar

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-01-07
- 1.0.1 — 2020-01-04
- 1.0.0 — 2020-01-04

## README

![](https://img.shields.io/npm/v/react-native-progress-steps.svg?style=flat)
![](https://img.shields.io/npm/dt/bottom-app-bar.svg)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

# bottom-app-bar

A customizable React Native component based on material design bottom app bar.

Example One             |  Example Two
:-------------------------:|:-------------------------:
![](assets/bottom-app-bar_1.gif) [examples/ExampleOne.js](examples/ExampleOne.js)| ![](assets/bottom-app-bar_2.gif) [examples/ExampleTwo.js](examples/ExampleTwo.js)

## Installation

If using yarn:

```
yarn add bottom-app-bar
```

If using npm:

```
npm i bottom-app-bar
```

## Usage

```
import { BottomAppContainer, BottomAppButton } from 'bottom-app-bar';
```

Simply place a `<BottomAppButton />` tag for each desired button within the `<BottomAppContainer />` wrapper. You can place a total of 4 buttons.

```
<View style={{flex: 1}}>
    <BottomAppContainer>
        <BottomAppButton 
            label={"Rooms"} 
            buttonColor={"#4287f5"} 
            iconName={"location-on"} 
            iconColor={"#000"} 
            click={() => console.log("Rooms click")}
        />
        <BottomAppButton 
            label={"Spaces"} 
            buttonColor={"rgba(66, 135, 245, 0.5)"}
            iconName={"local-bar"} 
            iconColor={"#f00"} 
            click={() => console.log("Spaces click")}
        />
    </BottomAppContainer>
</View>
```

## Documentation

### Bottom App Container Component
| Name                      | Description                              | Default     | Type   |
|---------------------------|------------------------------------------|-------------|--------|
| barColor | Bottom bar color | #4c8bf5 | String |
| buttonColor | Main button color | #f00 | String |

### Bottom App Button Component
| Name                      | Description                              | Default     | Type   |
|---------------------------|------------------------------------------|-------------|--------|
| label | Button label | "" | String |
| labelColor | Color of the button label | #fff | String
| buttonColor | Button color | #4c8bf5 | String |
| iconColor | Button icon color | #000 | String |
| iconName | Material Community Icons Vector Icons name | add | String |
| fontSize | Size of the font | Android/IOS default | Number |
| click | Function Called when the button is pressed | null | Func |

## Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)

## Author
Matheus Henrique | [linkedin](https://www.linkedin.com/in/matheus-henrique-176683151/)

## License
[MIT](./LICENSE)

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