https://github.com/rhanb/nativescript-bottombar

Fancy bottom bar for NativeScript :smile: :beers:
https://github.com/rhanb/nativescript-bottombar

android angular bottom bottombar material menu nativescript navigation tabview

Last synced: about 1 month ago
JSON representation

Fancy bottom bar for NativeScript :smile: :beers:

• Host: GitHub
• URL: https://github.com/rhanb/nativescript-bottombar
• Owner: rhanb
• License: apache-2.0
• Created: 2017-02-15T18:53:05.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T18:59:21.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T07:27:16.909Z (7 months ago)
• Topics: android, angular, bottom, bottombar, material, menu, nativescript, navigation, tabview
• Language: TypeScript
• Homepage:
• Size: 6.61 MB
• Stars: 64
• Watchers: 4
• Forks: 24
• Open Issues: 55
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/nativescript-bottombar.svg)](https://www.npmjs.com/package/nativescript-bottombar)

[![npm](https://img.shields.io/npm/dt/nativescript-bottombar.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-bottombar)

[![twitter: @_rhanb](https://img.shields.io/badge/twitter-%40rhanb-2F98C1.svg)](https://twitter.com/_rhanb)

[![Build Status](https://travis-ci.org/rhanb/nativescript-bottombar.svg?branch=4.0-rc)](https://travis-ci.org/rhanb/nativescript-bottombar)

![Package size](https://img.shields.io/badge/package%20size-15.1%20kB-lightgrey.svg)

![Unpacked size](https://img.shields.io/badge/unpacked%20size-58.9%20kB-brightgreen.svg)

[![NPM](https://nodei.co/npm/nativescript-bottombar.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/nativescript-bottombar/)

# NativeScript BottomBar :beers::fire::fr:

NativeScript plugin for [BottomNavigationView](https://github.com/aurelhubert/ahbottomnavigation) and [UITabBar](https://developer.apple.com/documentation/uikit/uitabbar).

PS: To have a material design on iOS too, free to use the plugin [nativescript-bottom-navigation](https://github.com/henrychavez/nativescript-bottom-navigation/)

No third libraries are used in this plugin, wich means this plugin is lightweight because only javascript files will be added to your app.

 iOS    |  Android

-------- | ---------

![iOS](/src/screenshots/showcase.ios.gif) | ![Android](/src/screenshots/showcase.android.gif)

## Installation

`tns plugin add nativescript-bottombar@next`

## Usage

[API documentation](/API_DOCUMENTATION.md)

- [Angular](/demo-ng/README.md)

- [Vue](/demo-vue/README.md)

- [{N} core](/demo/README.md)

## Common Usage

### Icons

The properties `icon` and `checkedIcon` supports the following path formats:

- `~/`: relative path to the app folder

- `res://`: icons must be in the App_Resources folder as follow

|                     iOS                     | Android                                             |

|:-------------------------------------------:|-----------------------------------------------------|

| ![iOS](/src/screenshots/ressources.ios.png) | ![Android](/src/screenshots/ressources.android.png) |

### Ripple effect color on Android

To change the color of the ripple effect when an item is tapped, please add the following item to your `AppTheme` inside your `App_Resources` > `Android` > `src` > `main` > `res` > `values` > `styles.xml` file with the desired `color` resource.

```XML

    <item name="colorControlHighlight">@color/ns_accent</item>

```

### Android support

You will need Support Library APIs v28 installed on your developer machine to be able to successfully use this plugin. If you already use the latest {N} version `5.0`, you should be good to go.

## More details

[API documentation](/API_DOCUMENTATION.md)

### TODO

- [ ] Allow to hide/show the `BottomBar`

- [ ] Expose more `BottomBarItem` customisation (font, position, etc..)

- [ ] Expose selection indicator on `iOS`

- [ ] Implement more `unit` tests and `e2e` tests