1

I need to implement a Bottom Navigation Bar with a cradled Floating Action Button (FAB) centered horizontally, in Native-script (Angular/Typescript) like this:

BottomAppBar with a cradled FAB

Any thoughts on how to implement this feature?

There are 2 Nativescript plugins that might by combined to achieve the final result: Floating Action Button and Bottom Navigation but when trying to apply a css clip-path property to the bottom navigation bar to create the cradle effect for the center FAB it doesn't work.

Here are Some hints on how to implement it using Android:

In addition, there is a solution that is quite near, but is just missing the "cradle"/"gap" efect I'm looking for to achieve: How to create a custom navigation bar in NativeScript?

Pedro V. Coelho
  • 19
  • 5
  • "I've tried to use a css clip-path property on the bottom navigation bar to create the cradle effect for the center floating button but it doesn't work." Can you share the code you've tried? – Ian Jun 26 '19 at 16:39
  • 1
    Possible duplicate of [How to create a custom navigation bar in NativeScript?](https://stackoverflow.com/questions/56693077/how-to-create-a-custom-navigation-bar-in-nativescript) – Manoj Jun 26 '19 at 16:55

1 Answers1

0

actually, this implementation, need to be done with the bottomappbar component from material components.

this is the repo where you can find an initial implementation of that component, feel free to contribute

Henry Chávez
  • 21
  • 1