NativeScript BottomBar 🍻🔥🇫🇷

NativeScript plugin for BottomNavigationView and UITabBar.

PS: To have a material design on iOS too, free to use the plugin 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

Installation

tns plugin add nativescript-bottombar@next

Usage

API documentation

• Angular
• Vue
• {N} core

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

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.

<!-- Application theme -->
<style name="AppTheme" parent="AppThemeBase">
    <item name="colorControlHighlight">@color/ns_accent</item>
</style>

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

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