[Tracking] Bottom navigation & tabs components

## Overview
The TabView component is a navigation component that is usually at the base of a mobile app. As such it's very important to get it right. Following lots of reported issues and discussions, we decided to do a re-design of how the developer uses and customizes the component. This should be done by introducing several new components including `BottomNavigation` and `Tabs` and there should be no breaking changes for existing apps. See the design doc below for the detailed information.

## Design
Implementation details and motivation of the feature can be found in its [design document](https://docs.google.com/document/d/1WNecHobGkjvYqRdFD2n2aJxwv0t2Ud8HicUDOfsgz_M/edit?usp=sharing).

## Tasks

<details><summary>NativeScript 6.0  (components released as BETA / EXPERIMENTAL)</summary>
<p>

**BottomNavigation**

- [x]  native implementation [Android]
- [x]  nesting navigations
- [x]  load one view at a time
- [x]  TabStrip declaration
- [x]  Angular support

**Tabs**

- [x]  native implementation [iOS]
- [x]  nesting navigations
- [x]  pre-load one view to the sides by default
- [x]  TabStrip declaration
- [x]  offscreenTabLimit
- [x]  tabsPosition
- [x]  swipeEnabled
- [x]  Angular support

**TabStrip**
- [x] CSS background-color

**TabStripItem**

- [x]  CSS pseudo class :active
- [x]  CSS background-color
- [x]  CSS color
- [x]  CSS font
- [x]  CSS font-size
- [x]  CSS highlight-color
- [x]  CSS text-transform
- [x]  iconSource font-icon support
- [x]  Image instead of iconSource declaration
- [x]  Label instead of title declaration

Issues:
- [x] [iOS Tabs] Tap on tabs does not change item - NativeScript/NativeScript#7435
- [x]  [iOS Tabs] Tabs icons does not work - NativeScript/NativeScript#7436
- [x]  [iOS Tabs] A crash on swiping a content item - NativeScript/NativeScript#7459
- [x]  [BottomNavigation]: crash when navigating without transition animation - NativeScript/NativeScript#7481
- [ ] [BottomNavigation] - crash when used with nativescript-advanced-webview https://github.com/NativeScript/NativeScript/issues/7901
- [ ] [iOS][BottomNavigation] Images are not vertically centered - https://github.com/NativeScript/NativeScript/issues/7991
- [ ] [BottomNavigation] Calling js method onSelectedPositionChange failed - https://github.com/NativeScript/NativeScript/issues/8057


</p>
</details>

<details><summary>NativeScript 6.1  (components released as OFFICIAL)</summary>
<p>

**BottomNavigation**

- [x]  Vue.js support
- [x]  No TabStrip support (tabBarVisibility/no declaration)
- [x]  limit bar to 5 tabs

**Tabs**

- [x]  Vue.js support
- [x]  safe area improvements
- [x]  No TabStrip support (tabBarVisibility/no declaration)

**TabStrip**

- [x]  itemTap event: https://github.com/NativeScript/NativeScript/pull/7711

**TabStripItem**

- [x] tap event: https://github.com/NativeScript/NativeScript/pull/7693
- [x]  Label title CSS support
- [x]  Image icon CSS support

Issues:
- [x]  [Tabs][Android] unable to select over one or more TabStripItem NativeScript/NativeScript#7519
- [x] [BottomNavigation][Android]: crash when selecting tab with no correspondent item https://github.com/NativeScript/NativeScript/issues/7526
- [x] [Tabs][iOS] Incorrect tab bar when Tabs are wrapped in any layout - https://github.com/NativeScript/NativeScript/issues/7531
- [x] [iOS][Tabs] Unable to return to tab after tab with nested frame visited https://github.com/NativeScript/NativeScript/issues/7564
- [x]  [BottomNavigation][iOS] created dynamically does not shows the TabStrip - NativeScript/NativeScript#7433
- [x]  [Tabs][Android] TabStripItem selection highlight not visible with TabStripItem background color set - NativeScript/NativeScript#7494
- [x]  [Tabs] TabStripItem color not applied - NativeScript/NativeScript#7495
- [x]  [Tabs] Cannot change active text color for selected tabstripitem - NativeScript/NativeScript#7507
- [x]  [BottomNav][Android] Changing tabs messes up text color of tabs - NativeScript/NativeScript#7623
- [x]  [Tabs][BottomNavigation] TabContentItem background color not applied - NativeScript/NativeScript#7496
- [x]  [Tabs][BottomNavigation] Font icon does not update to active state for selected tabstripitem - NativeScript/NativeScript#7506
- [x]  [BottomNavigation] Renders bottom empty space if tabstrip is not defined - NativeScript/NativeScript#7471
- [x] [BottomNavigation][Tabs][iOS] TabStripItem font icon doesn't apply own classes - https://github.com/NativeScript/NativeScript/issues/7547
- [x] [iOS][Tabs][BottomNavigation] TabStrip.iosIconRenderingMode property value not respected https://github.com/NativeScript/NativeScript/issues/7733
- [x] [iOS][Tabs][BottomNavigation] Crash with TabStrip configured in code-behind https://github.com/NativeScript/NativeScript/issues/7692
- [x] [BottomNav] Clipped tabstripitem title content when iconSource specified https://github.com/NativeScript/NativeScript/issues/7713

Angular

- [x]  [Tabs] TabStripItem does not render - NativeScript/nativescript-angular#1884
- [x]  [BottomNavigation] TabStripItem does not render - NativeScript/nativescript-angular#1893
- [x]  Angular binding inside selectedIndexChanged event would work only if wrapped in NgZone - NativeScript/nativescript-angular#1896

</p>
</details>

### NativeScript 6.2

Issues:
- [x] [BottomNav][iOS] Styling is completely messed up on device rotation - https://github.com/NativeScript/NativeScript/issues/7864
- [x] [BottomNavigation] icons in tab-strips items cannot be changed dynamically - NativeScript/NativeScript#7470

### NativeScript vNext

**BottomNavigation**

- [ ]  Profiling
- [ ]  Tracing
- [ ] [Android] Setting the selectedIndex on BottomNavigation property makes the app crash https://github.com/NativeScript/NativeScript/issues/7884

**Tabs**

- [ ]  Profiling
- [ ]  Tracing
- [ ]  Replace MDCTabBar implementation with home-grown solution and drop material dependencies - https://github.com/NativeScript/NativeScript/issues/8079
- [ ]  Pre-load UI offscreen [iOS] /unify lifecycle

**TabBars**

- [ ]  BottomNavigationBar
- [ ]  TabsBar


Issues:
- [ ] [BottomNav][iOS] Incorrect color applied to text in iOS 13 - https://github.com/NativeScript/NativeScript/issues/7862
- [ ] [iOS][BottomNavigation][Tabs] Nested Tabs in BottomNavigation wrong layout - https://github.com/NativeScript/NativeScript/issues/7562
- [ ] [iOS][Tabs][BottomNav] Crash when ProxyViewContainer first child of TabContentItem - https://github.com/NativeScript/NativeScript/issues/7834
- [ ] [iOS][Tabs] Quickly changing selectedIndex property causes glitches - https://github.com/NativeScript/NativeScript/issues/7694
- [ ] [iOS][Tabs] Tabs get stuck when selecting one by one from tabstrip - https://github.com/NativeScript/NativeScript/issues/7827
- [ ] [iOS][Tabs] safe area issue when action bar is below tab bar on iPhone 6 - https://github.com/NativeScript/NativeScript/issues/7828
- [ ] [iOS][Tabs] selected index does not apply -  https://github.com/NativeScript/NativeScript/issues/7831
- [ ] [iOS Tabs/BottomNavigation] Binding issues - NativeScript/NativeScript#7455
- [ ] [Android Tabs/BottomNavigation] Binding issues - NativeScript/NativeScript#7456
- [ ] [BottomNav] Changing tabs crashes app - NativeScript/NativeScript#7608
- [ ] [BottomNav] Changing tabs does not render the new tab items - NativeScript/NativeScript#7609
- [ ] [BottomNav] Dynamically generating tabs with font icons crashes app - NativeScript/NativeScript#7610
- [ ] [BottomNav] Dynamically generating tabs when the BottomNav has a class applied crashes - NativeScript/NativeScript#7611
- [ ] [BottomNav][Android] Text field on second tab doesn't get enabled when autocapitalization is sentences - NativeScript/NativeScript#7620
- [ ] [BottomNav][iOS] Changing tabs programatically messes up styles - https://github.com/NativeScript/NativeScript/issues/7667
- [ ] [Tabs][iOS]: Highlighter change its position when app is minimised (in background) https://github.com/NativeScript/NativeScript/issues/8027

## Contributing
If you want to work on a task from the list, tell us and we will do our best to help you!
If you have another great idea on how to make the tab view even cooler, share it in the comments!

## Discussion
Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!

<bountysource-plugin>

---
Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/70669789-tracking-bottom-navigation-tabs-components?utm_campaign=plugin&utm_content=tracker%2F12908224&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F12908224&utm_medium=issues&utm_source=github).
</bountysource-plugin>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Tracking] Bottom navigation & tabs components #6967

Overview

Design

Tasks

NativeScript 6.2

NativeScript vNext

Contributing

Discussion

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Uh oh!

[Tracking] Bottom navigation & tabs components #6967

Description

Overview

Design

Tasks

NativeScript 6.2

NativeScript vNext

Contributing

Discussion

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions