Stylish Bottom Tabs in React Native: A Modern Approach to Navigation

Developing mobile applications in React Native comes with many challenges, and one of them is implementing intuitive and visually appealing navigation. Bottom tabs are among the most commonly used navigation patterns, but not all implementations are equally effective. In this article, we take a closer look at why you should choose native bottom tabs over JavaScript-based alternatives, how to set them up correctly, and how to maximize their performance and user experience.

Why Use Native Bottom Tabs?

When choosing a navigation solution, you have two main options for implementing a navigation bar:

• JavaScript-based tabs that simulate native behavior using React components.
• Native tabs that use built-in operating system components (UIKit on iOS, Material Design on Android).

Better performance: No need to render components in JavaScript, which saves battery and improves smoothness.

Automatic platform-specific design: iOS and Android have different conventions (e.g., icons vs. text labels). Native solutions adapt to them easily.

Haptic feedback: A subtle vibration response can be easily added to the navigation bar on both Android and iOS using a single property.

Future compatibility: New OS versions introduce effects and animations that native tabs inherit automatically.

Differences Between Bottom Tab Libraries

JavaScript-based bottom tabs aim to visually mimic the native interface, while true native solutions use components directly from the platform. This results not only in smoother animations and interactions, but also in automatic adaptation of the UI to different devices - for example, on tvOS and visionOS, they transform into a side panel, while on iPad they remain at the top of the screen.

Native implementations also offer advanced features such as built-in haptic feedback and dynamic layout changes (starting with iOS 18). Last but not least, they fully respect the design languages of each platform—from Material 3 on Android to Apple’s system styles.

How to Create an App with React Native Bottom Tabs and Expo Router

If you're starting a new project, create an app in Expo using the standard template:

npx create-expo-app nativetabs

This template already uses JavaScript-based tabs, which we can easily adapt to a native solution. When switching to native tabs, most of the code remains unchanged.

Library Installation

To get started, you need to install the library following the official instructions. Once that's done, go to the app/(tabs)/_layout.tsx file, where you'll configure the native bottom tabs.

-import { Tabs } from 'expo-router';
 import React from 'react';
 
 import { TabBarIcon } from '@/components/navigation/TabBarIcon';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
+import { withLayoutContext } from "expo-router";
+import { createNativeBottomTabNavigator } from "@bottom-tabs/react-navigation";
+
+export const Tabs = withLayoutContext(
+  createNativeBottomTabNavigator().Navigator
+);

How to Set Up Icons?

For simplicity, we'll use icon images from the internet, but for most apps and better performance, we recommend storing icons in the assets directory.

The main difference compared to JavaScript-based navigation lies in how icons are handled:

• The JavaScript-based solution directly accepts React Native components.
• With the native approach, you need to use direct files (e.g., .png, .jpg, .svg) or remote image URLs.

You can now run the app – the native bottom tabs are ready!

Ukázka výsledku v praxi:

Example of the Result in Practice:

If you want to try out an app using Native Tabs right away, you can use a ready-made template:

npx create-expo-app@latest NativeTabs --template @bottom-tabs/expo-template

This way, you'll get a fully functional app with bottom navigation, ready for further customization.

What’s Coming in the Future?

This library has a promising future, with several improvements already in the pipeline:

As API parity with JavaScript-based tabs continues to expand, native headers are planned to be added. This will eliminate the need for stack navigation in some tabs, as built-in headers from bottom-tabs will be usable directly.

You can also expect improved optimization for newer versions of iOS and Android.

This article is based on official Expo sources. For more detailed information, refer to the original article.

If you're planning to develop a mobile app and are looking for an efficient solution, we’d be happy to help! Let’s discuss your ideas together and find the best way to bring them to life. Contact Us!