[Tracking] Bottom navigation & tabs components #6967
Description
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.
Tasks
NativeScript 6.0 (components released as BETA / EXPERIMENTAL)
BottomNavigation
- native implementation [Android]
- nesting navigations
- load one view at a time
- TabStrip declaration
- Angular support
Tabs
- native implementation [iOS]
- nesting navigations
- pre-load one view to the sides by default
- TabStrip declaration
- offscreenTabLimit
- tabsPosition
- swipeEnabled
- Angular support
TabStrip
- CSS background-color
TabStripItem
- CSS pseudo class :active
- CSS background-color
- CSS color
- CSS font
- CSS font-size
- CSS highlight-color
- CSS text-transform
- iconSource font-icon support
- Image instead of iconSource declaration
- Label instead of title declaration
Issues:
- [iOS Tabs] Tap on tabs does not change item - [Tabs] tabstripitem tap does not change tabs #7435
- [iOS Tabs] Tabs icons does not work - [Tabs] tabstripitem icons do not work #7436
- [iOS Tabs] A crash on swiping a content item - [Tabs] A crash on swiping a content item #7459
- [BottomNavigation]: crash when navigating without transition animation - [BottomNavigation]: crash when navigating without transition animation #7481
- [BottomNavigation] - crash when used with nativescript-advanced-webview tns-core-modules + nativescript-advanced-webview + navigation is crashing the app #7901
- [iOS][BottomNavigation] Images are not vertically centered - [iOS][BottomNavigation] Images are not vertically centered #7991
- [BottomNavigation] Calling js method onSelectedPositionChange failed - [BottomNavigation] Calling js method onSelectedPositionChange failed #8057
NativeScript 6.1 (components released as OFFICIAL)
BottomNavigation
- Vue.js support
- No TabStrip support (tabBarVisibility/no declaration)
- limit bar to 5 tabs
Tabs
- Vue.js support
- safe area improvements
- No TabStrip support (tabBarVisibility/no declaration)
TabStrip
- itemTap event: feat(TabStrip): add itemTap event #7711
TabStripItem
- tap event: feat(ios-tabs): emit tabStripItem tap event #7693
- Label title CSS support
- Image icon CSS support
Issues:
- [Tabs][Android] unable to select over one or more TabStripItem [Tabs][Android]: unable to select over one or more TabStripItem #7519
- [BottomNavigation][Android]: crash when selecting tab with no correspondent item [BottomNavigation][Android]: crash when selecting tab with no correspondent item #7526
- [Tabs][iOS] Incorrect tab bar when Tabs are wrapped in any layout - [Tabs][iOS] Incorrect tab bar when Tabs are wrapped in any layout #7531
- [iOS][Tabs] Unable to return to tab after tab with nested frame visited [Tabs][iOS]: unable to return to tab after tab with nested frame visited #7564
- [BottomNavigation][iOS] created dynamically does not shows the TabStrip - [BottomNavigation][iOS] created dynamically does not show tabstrip #7433
- [Tabs][Android] TabStripItem selection highlight not visible with TabStripItem background color set - [Tabs] TabStripItem selection highlight not visible with TabStripItem background color set #7494
- [Tabs] TabStripItem color not applied - [Tabs] TabStripItem color not applied #7495
- [Tabs] Cannot change active text color for selected tabstripitem - [Tabs] Cannot change active text color for selected tabstripitem #7507
- [BottomNav][Android] Changing tabs messes up text color of tabs - [BottomNav][Android] Changing tabs messes up text color of tabs #7623
- [Tabs][BottomNavigation] TabContentItem background color not applied - [Tabs][BottomNavigation] TabContentItem background color not applied #7496
- [Tabs][BottomNavigation] Font icon does not update to active state for selected tabstripitem - [Tabs][BottomNavigation] Font icon does not update to active state for selected tabstripitem #7506
- [BottomNavigation] Renders bottom empty space if tabstrip is not defined - [BottomNavigation] Renders bottom empty space if tabstrip is not defined #7471
- [BottomNavigation][Tabs][iOS] TabStripItem font icon doesn't apply own classes - [BottomNavigation][Tabs][iOS] TabStripItem font icon doesn't apply own classes #7547
- [iOS][Tabs][BottomNavigation] TabStrip.iosIconRenderingMode property value not respected [Tabs][BottomNavigation] TabStrip.iosIconRenderingMode property value not respected #7733
- [iOS][Tabs][BottomNavigation] Crash with TabStrip configured in code-behind [Tabs][BottomNavigation] Crash with TabStrip configured in code-behind #7692
- [BottomNav] Clipped tabstripitem title content when iconSource specified [BottomNav] Clipped tabstripitem title content when iconSource specified #7713
Angular
- [Tabs] TabStripItem does not render - [Tabs] TabStripItem does not render nativescript-angular#1884
- [BottomNavigation] TabStripItem does not render - [BottomNavigation] TabStripItem does not render nativescript-angular#1893
- Angular binding inside selectedIndexChanged event would work only if wrapped in NgZone - [BottomNavigation] Binding inside BottomNavigation/Tabs will work only if wrapped in NgZone nativescript-angular#1896
NativeScript 6.2
Issues:
- [BottomNav][iOS] Styling is completely messed up on device rotation - [BottomNav][iOS] Styling is completely messed up on device rotation #7864
- [BottomNavigation] icons in tab-strips items cannot be changed dynamically - [BottomNavigation] Icons in tab-strips items cannot be changed dynamically #7470
NativeScript vNext
BottomNavigation
- Profiling
- Tracing
- [Android] Setting the selectedIndex on BottomNavigation property makes the app crash Setting the selectedIndex on BottomNavigation property makes the app crash #7884
Tabs
- Profiling
- Tracing
- Replace MDCTabBar implementation with home-grown solution and drop material dependencies - [Request] Please separate material bottom bar into plugin #8079
- Pre-load UI offscreen [iOS] /unify lifecycle
TabBars
- BottomNavigationBar
- TabsBar
Issues:
- [BottomNav][iOS] Incorrect color applied to text in iOS 13 - [BottomNav][iOS]Incorrect color applied to icon/text #7862
- [iOS][BottomNavigation][Tabs] Nested Tabs in BottomNavigation wrong layout - [iOS][BottomNavigation][Tabs] Nested Tabs in BottomNavigation wrong layout #7562
- [iOS][Tabs][BottomNav] Crash when ProxyViewContainer first child of TabContentItem - [Tabs][BottomNav][iOS] Crash when ProxyViewContainer first child of TabContentItem #7834
- [iOS][Tabs] Quickly changing selectedIndex property causes glitches - [Tabs] Quickly changing selectedIndex property causes glitches #7694
- [iOS][Tabs] Tabs get stuck when selecting one by one from tabstrip - [Tabs][iOS] Tabs get stuck when selecting one by one from tabstrip #7827
- [iOS][Tabs] safe area issue when action bar is below tab bar on iPhone 6 - [Tabs][iOS] safe area issue when action bar is below tab bar on iPhone 6 #7828
- [iOS][Tabs] selected index does not apply - [iOS][Tabs] selected index does not apply #7831
- [iOS Tabs/BottomNavigation] Binding issues - BottomNavigation and Tabs binding issues #7455
- [Android Tabs/BottomNavigation] Binding issues - BottomNavigation and Tabs binding issues #7456
- [BottomNav] Changing tabs crashes app - [BottomNav] Changing tabs crashes app #7608
- [BottomNav] Changing tabs does not render the new tab items - [BottomNav] Changing tabs does not render the new tab items #7609
- [BottomNav] Dynamically generating tabs with font icons crashes app - [BottomNav] Dynamically generating tabs with font icons crashes app #7610
- [BottomNav] Dynamically generating tabs when the BottomNav has a class applied crashes - [BottomNav] Dynamically generating tabs when the BottomNav has a class applied crashes #7611
- [BottomNav][Android] Text field on second tab doesn't get enabled when autocapitalization is sentences - [BottomNav][Android] Text field on second tab doesn't get enabled when autocapitalization is sentences #7620
- [BottomNav][iOS] Changing tabs programatically messes up styles - [BottomNav][iOS] Changing tabs programatically messes up styles #7667
- [Tabs][iOS]: Highlighter change its position when app is minimised (in background) [Tabs][iOS]: Highlighter change its position when app is minimised (in background) #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!
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.