feat: add option to show tabs on the side

[satya164]

Motivation

This adds ability to render the tab bar on left/right as a sidebar. It useful on larger screens where we may want to take advantage of the available horizontal screen and show a sidebar instead of a bottom tab bar.

Test plan

Open the "Bottom Tabs" example and resize the screen to see the different modes of the tab bar. Tap on the "<<" button on the bottom left to switch between a smaller and larger sidebar.

Video

RPReplay_Final1694275006.mp4

[codecov-commenter]

Codecov Report

Patch coverage: 54.34% and project coverage change: -0.19% ⚠️

Comparison is base (e432c32) 75.77% compared to head (21a6782) 75.59%.

❗ Current head 21a6782 differs from pull request most recent head f16503e. Consider uploading reports for the commit f16503e to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11578      +/-   ##
==========================================
- Coverage   75.77%   75.59%   -0.19%     
==========================================
  Files         200      201       +1     
  Lines        5817     5859      +42     
  Branches     2271     2306      +35     
==========================================
+ Hits         4408     4429      +21     
- Misses       1362     1378      +16     
- Partials       47       52       +5     

Files Changed	Coverage Δ
packages/bottom-tabs/src/views/BottomTabItem.tsx	64.70% <ø> (ø)
packages/drawer/src/views/DrawerView.tsx	64.63% <ø> (ø)
packages/elements/src/index.tsx	100.00% <ø> (ø)
packages/bottom-tabs/src/views/BottomTabBar.tsx	60.95% <40.00%> (-6.00%)	⬇️
packages/bottom-tabs/src/views/BottomTabView.tsx	90.90% <57.14%> (-3.38%)	⬇️
packages/bottom-tabs/src/views/TabBarIcon.tsx	100.00% <100.00%> (ø)
packages/elements/src/getDefaultSidebarWidth.tsx	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	f16503e
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6501c0a3a7b4f600081bceec
😎 Deploy Preview	https://deploy-preview-11578--react-navigation-example.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

The Expo app for the example from this branch is ready!

https://expo.dev/@react-navigation/react-navigation-example?serviceType=eas&distribution=expo-go&scheme=exp+react-navigation-example&channel=pr-11578&sdkVersion=48.0.0

[osdnk]

The code works and looks good in general. One question is if the name "bottom-tab" is still valid?

[satya164]

@osdnk: One question is if the name "bottom-tab" is still valid

You could make the argument is that the default one is still bottom, and you could position tabs at the top in material-top-tabs so it's like this already 😅

But yeah, the only real argument I have is to avoid another big breaking change (especially to keep older blog posts, examples etc. working) and to keep our download counts on npm.