How To Create A Custom Navigation Bar In Nativescript?

I am new to NativeScript and experimenting with it a little via the playground. There are some UIs that i'd like to implement and don't see samples of and I was wondering what woul

Solution 1:

Here is a pseudocode gives you the layout you are looking for.

<GridLayout><GridLayoutrows="*,auto"><StackLayoutrow="0"backgroundColor="#ccc"><Labeltext="Your Content"fontSize="30"textAlignment="center"></Label></StackLayout><GridLayoutrow="1"columns="*,*"height="48"><StackLayoutcol="0"><Image></Image><Labeltext="Groups"textAlignment="center"></Label></StackLayout><StackLayoutcol="1"><Image></Image><Labeltext="Communities"textAlignment="center"></Label></StackLayout></GridLayout></GridLayout><GridLayoutborderRadius="50%"width="68"height="68"backgroundColor="#ec5281"verticalAlignment="bottom"horizontalAlignment="center"marginBottom="20"><Labeltext="Post"color="white"verticalAlignment="center"horizontalAlignment="center"></Label></GridLayout></GridLayout>

Lear more about NativeScript layouts at https://www.nslayouts.com/ You can also find sample projects at Marketplace

Solution 2:

You can easily find diverse UI samples in NativeScript Marketplace

I could find these bottom-bar navigation UI:

1. Rich UI - Social Fitness Tracker (Core Vanilla JavaScript)

   

2. Tinder-like Swipeable Cards (Angular)

   

There are many more samples with unique bottom-bar navigation UI design, I suggest you to explore the sample marketplace by yourself to find the one you like most.

Also, there is nativescript-bottom-navigation, a verified plugin for implementing bottom-bar navigation.