|
| 1 | +--- |
| 2 | +title: Bottom Tabs meet Native |
| 3 | +authors: oskar |
| 4 | +tags: [tutorial] |
| 5 | +--- |
| 6 | + |
| 7 | +This is a guest post by Oskar Kwaśniewski, creator of `react-native-bottom-tabs`, a library exposing native tab primitives that integrates with React Navigation. If you like this guide, check out the `react-native-bottom-tabs` [documentation](https://callstackincubator.github.io/react-native-bottom-tabs/) for more! |
| 8 | + |
| 9 | +This blog post will explain the differences between the JavaScript Bottom Tabs navigator and provide a step-by-step guide for integrating React Navigation with the Native Bottom Tabs Navigator. |
| 10 | + |
| 11 | +<!--truncate--> |
| 12 | + |
| 13 | +## Introduction |
| 14 | + |
| 15 | +React Navigation comes with many navigators out of the box. We've got Stack, Native Stack, Drawer, and Bottom Tabs, but there were no Native Bottom Tabs until today! |
| 16 | + |
| 17 | +Both Android and iOS have predefined native components for handling bottom navigation. For iOS it's SwiftUI's `TabView` component and for Android it's `BottomNavigationView`. The native approach gives us an appropriate appearance no matter the platform we are running on. Native Bottom Tabs is a navigator that wraps the native `TabView` and `BottomNavigationView` - so you can use them with React Navigation. |
| 18 | + |
| 19 | +Let's dive into the details of this navigator. |
| 20 | + |
| 21 | +Note: Native Bottom Tabs navigator is a standalone package, not released as part of React Navigation. |
| 22 | + |
| 23 | +## Overview |
| 24 | + |
| 25 | +You still might be wondering the difference between `@react-navigation/bottom-tabs` and `react-native-bottom-tabs`. |
| 26 | + |
| 27 | +Let's go over the main differences: |
| 28 | + |
| 29 | +- JS Bottom Tabs recreate the UI as closely as possible while **Native Bottom Tabs use native platform primitives** to create the tabs. This makes your tab navigation indistinguishable from Native Apps as they use the same components under the hood. |
| 30 | +- Native Bottom Tabs **adapt to interfaces of a given platform** for example: tvOS and visionOS show tabs as a sidebar on iPadOS they appear at the top, while JS Bottom Tabs are always at the bottom. |
| 31 | + |
| 32 | +### Distinctive features of Native Bottom Tabs |
| 33 | + |
| 34 | +#### Multi-platform support |
| 35 | + |
| 36 | +Native Bottom tabs adapt to the appearance of multiple platforms. You always get natively-looking tabs! |
| 37 | + |
| 38 | +<img src="/assets/blog/native-bottom-tabs/ios.png" alt="Native Tabs on iOS" /> |
| 39 | + |
| 40 | +Bottom Navigation on iOS, with native blur. |
| 41 | + |
| 42 | +<img src="/assets/blog/native-bottom-tabs/android.png" alt="Native Tabs on Android" /> |
| 43 | + |
| 44 | +Bottom Navigation on Android, following Material Design 3 styling. |
| 45 | + |
| 46 | +<img src="/assets/blog/native-bottom-tabs/ipados.png" alt="Native Tabs on iPadOS" /> |
| 47 | + |
| 48 | +On iPadOS tabs appear at the top with a button allowing you to go into the sidebar mode. |
| 49 | + |
| 50 | +<img src="/assets/blog/native-bottom-tabs/visionos.png" alt="Native Tabs on visionOS" /> |
| 51 | + |
| 52 | +On visionOS, the tabs appear on the left side, attached outside of the window. |
| 53 | + |
| 54 | +<img src="/assets/blog/native-bottom-tabs/tvos.png" alt="Native Tabs on tvOS" /> |
| 55 | + |
| 56 | +On tvOS tabs appear on the top, making navigation with the TV remote a breeze. |
| 57 | + |
| 58 | +<img src="/assets/blog/native-bottom-tabs/macos.png" alt="Native Tabs on macOS" /> |
| 59 | + |
| 60 | +On macOS, tabs appear on the left side, following the design of the Finder app. |
| 61 | + |
| 62 | +#### Automatic scroll to the top |
| 63 | + |
| 64 | +iOS TabView automatically scrolls to the top when ScrollView is embedded inside of it. |
| 65 | + |
| 66 | +#### Automatic PiP avoidance |
| 67 | + |
| 68 | +The operating system recognizes navigation in your app making the Picture in Picture window automatically avoid bottom navigation. |
| 69 | + |
| 70 | +#### Platform-specific styling |
| 71 | + |
| 72 | +For iOS bottom navigation has a built-in blur making your app stand out. For Android, you can choose between Material 2 and Material 3 and leverage Material You system styling. |
| 73 | + |
| 74 | +#### Sidebar |
| 75 | + |
| 76 | +TabView can turn in to a side bar on tvOS, iPadOS and macOS. The `sidebarAdaptable` prop controls this. |
| 77 | + |
| 78 | +## Getting started |
| 79 | + |
| 80 | +To get started follow the installation instructions in the `react-native-bottom-tabs` [documentation](https://callstackincubator.github.io/react-native-bottom-tabs/docs/getting-started/quick-start.html). |
| 81 | + |
| 82 | +Native Bottom Tabs Navigation resembles JavaScript Tabs API as closely as possible. Making your migration straightforward. |
| 83 | + |
| 84 | +As mentioned before, Native Bottom Tabs use native primitives to create the tabs. This approach also has some downsides: Native components enforce certain constraints that we need to follow. |
| 85 | + |
| 86 | +There are a few differences between the APIs worth noting. One of the biggest is how native tabs handle images. In JavaScript tabs, you can render React components as icons, in native tabs unfortunately it’s not possible. Instead, you have to provide one of the following options: |
| 87 | + |
| 88 | +```tsx |
| 89 | +<Tab.Screen |
| 90 | + name="Albums" |
| 91 | + component={Albums} |
| 92 | + options={{ |
| 93 | + tabBarIcon: () => require('person.png'), |
| 94 | + // SVG is also supported |
| 95 | + tabBarIcon: () => require('person.svg'), |
| 96 | + // or |
| 97 | + tabBarIcon: () => ({ sfSymbol: 'person' }), |
| 98 | + // You can also pass a URL |
| 99 | + tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }), |
| 100 | + }} |
| 101 | +/> |
| 102 | +``` |
| 103 | + |
| 104 | +So if you need full customizability like providing custom tab bar icons, and advanced styling that goes beyond what’s possible with native components you should use JavaScript bottom tabs. |
| 105 | + |
| 106 | +On top of that, the scope of this library doesn’t include the web so for that platform, you should use JavaScript Tabs. |
| 107 | + |
| 108 | +To get started you can import `createNativeBottomTabNavigator` from `@bottom-tabs/react-navigation` and use it the same way as JavaScript Bottom Tabs. |
| 109 | + |
| 110 | +### Example usage |
| 111 | + |
| 112 | +```tsx |
| 113 | +import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'; |
| 114 | + |
| 115 | +const Tabs = createNativeBottomTabNavigator(); |
| 116 | + |
| 117 | +function NativeBottomTabs() { |
| 118 | + return ( |
| 119 | + <Tabs.Navigator> |
| 120 | + <Tabs.Screen |
| 121 | + name="index" |
| 122 | + options={{ |
| 123 | + title: 'Home', |
| 124 | + tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }), |
| 125 | + }} |
| 126 | + /> |
| 127 | + <Tabs.Screen |
| 128 | + name="explore" |
| 129 | + options={{ |
| 130 | + title: 'Explore', |
| 131 | + tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }), |
| 132 | + }} |
| 133 | + /> |
| 134 | + </Tabs.Navigator> |
| 135 | + ); |
| 136 | +} |
| 137 | +``` |
| 138 | + |
| 139 | +<img src="/assets/blog/native-bottom-tabs/result.png" alt="Native Tabs" /> |
| 140 | + |
| 141 | +You can check out the project [here](https://github.com/callstackincubator/react-native-bottom-tabs). |
| 142 | + |
| 143 | +Thanks for reading! |
0 commit comments