docs: article about BottomNavigation init

Author: NickIliev

app/App_Resources/Android/drawable-xxhdpi/baseline_account_balance_black_18pt.png

@@ -50,7 +50,8 @@ const navigationLinks = [
     new link("ImageSource", "ns-framework-modules-category/image-source/image-source-page"),
     new link("File System", "ns-framework-modules-category/file-system/file-system-page"),
     new link("Modal view", "ns-ui-category/modal-view/modal-view-examples-page"),
-    new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page")
+    new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page"),
+    new link("BottomNavigation", "ns-ui-widgets-category/bottom-navigation/bottom-navigation-page")
 ];
 
 function onNavigatingTo(args) {

app/App_Resources/Android/drawable-xxhdpi/baseline_account_balance_black_24pt.png

@@ -0,0 +1,5 @@
+The `BottomNavigation` component contains two sub-components:
+- The `TabStrip` which defines and rendres the bottom bar and its `TabStripItem` components.
+- `TabContentItem` components which total number should be equal to the number of the tabs (`TabStripItem` components). Each `TabContentItem` acts as a container for your tab content.
+
+<snippet id='bottom-navigation-basics-xml'/>

app/App_Resources/Android/drawable-xxhdpi/baseline_account_balance_black_36pt.png

@@ -0,0 +1,4 @@
+function onNavigatingTo(args) {
+    const page = args.object;
+}
+exports.onNavigatingTo = onNavigatingTo;

app/App_Resources/Android/drawable-xxhdpi/baseline_account_balance_black_48pt.png

@@ -0,0 +1,31 @@
+<Page>
+<!-- >> bottom-navigation-basics-xml -->
+<BottomNavigation selectedIndex="1">
+
+    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+    <TabStrip>
+        <TabStripItem title="Home" iconSource="res://baseline_home_black_18pt"></TabStripItem>
+        <TabStripItem title="Account" iconSource="res://baseline_account_balance_black_18pt"></TabStripItem>
+        <TabStripItem title="Search" iconSource="res://baseline_search_black_18pt"></TabStripItem>
+    </TabStrip>
+
+    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+    <TabContentItem>
+        <GridLayout>
+            <Label text="Home Page" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout>
+            <Label text="Account Page" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout>
+            <Label text="Search Page" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+
+</BottomNavigation>
+<!-- << bottom-navigation-basics-xml -->
+</Page>

app/App_Resources/Android/drawable-xxhdpi/baseline_home_black_18pt.png

@@ -0,0 +1,3 @@
+export function onNavigatingTo(args) {
+    const page = args.object;
+}

app/App_Resources/Android/drawable-xxhdpi/baseline_home_black_24pt.png

@@ -0,0 +1,29 @@
+<Page>
+<BottomNavigation selectedIndex="1">
+
+    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+    <TabStrip>
+        <TabStripItem title="Home" iconSource="res://baseline_home_black_18pt"></TabStripItem>
+        <TabStripItem title="Account" iconSource="res://baseline_account_balance_black_18pt"></TabStripItem>
+        <TabStripItem title="Search" iconSource="res://baseline_search_black_18pt"></TabStripItem>
+    </TabStrip>
+
+    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+    <TabContentItem>
+        <GridLayout>
+            <Label text="Home Page" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout>
+            <Label text="Account Page" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout>
+            <Label text="Search Page" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+
+</BottomNavigation>
+</Page>

app/App_Resources/Android/drawable-xxhdpi/baseline_home_black_36pt.png

@@ -8,7 +8,7 @@ const navigationLinks = [
     // new link("Navigation", "ns-ui-widgets-category/tab-view/navigation/navigation")
 ];
 const navigationLinksTsc = [
-    // new link("Code Behind", "ns-ui-widgets-category/tab-view/code-behind/code-behind-ts-page"),
+    new link("Basics", "ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page")
     // new link("Navigation", "ns-ui-widgets-category/tab-view/navigation/navigation-ts-page")
 ];
 function onNavigatingTo(args) {
@@ -17,7 +17,7 @@ function onNavigatingTo(args) {
     page.bindingContext = new ListViewLinksModel({
         links: navigationLinks,
         actionBarTitle: args.context.title,
-        showTypeScriptExamples:false,
+        showTypeScriptExamples: false,
         tsclinks: navigationLinksTsc
     });
 }

app/App_Resources/Android/drawable-xxhdpi/baseline_home_black_48pt.png

@@ -1,6 +1,6 @@
 ---
 title: BottomNavigation
 description: The NativeScript's BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms.  The recommended scenario suitable for BottomNavigation is a high level navigaiton with 3 to 5 tabs each with separate function.
-position: 190
+position: 416
 slug: bottom-navigation
 ---

app/App_Resources/Android/drawable-xxhdpi/baseline_search_black_18pt.png

@@ -1,14 +1,17 @@
 
+
 The `BottomNavigation` component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms.  The recommended scenario suitable for `BottomNavigation` is a high level navigaiton with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to [the Material Design guidelines](https://material.io/design/components/bottom-navigation.html#usage).
 
+> **Note:** NativeScript 6 introduced two new UI components called `BottomNavigation` and `Tabs`. The idea behind them is to provide more control when building tab based UI, while powering the CSS styling, the icon font support and other specific functionalities. Prior to NativeScript 6, we had the `TabView` component which had top and bottom implementations with different behavoirs for the different platofrms and some styling limitations. With `BottomNavigaiton` and `Tabs` coomponents available, the `TabView` can be considered obsolete.
+
 Component Primary Objectives:
 - Used for High Level navigation.
-- Greater UX a structure with 3 to 5 different options.
+- Good for UX structure with 3 to 5 different options.
 
 Limitations 
-- No support for navigation transitions.
+- No navigation transitions.
 - No navigation gestures (e.g., swipe to navigate).
-- No support for content preloading.
+- No content preloading.