liquid-glass-native-tab-kit

A cross-platform React Native bottom tab bar built on the real native UITabBar.

Because it uses the actual platform tab bar on iOS, you get Apple's native Liquid Glass effect for free on iOS 26+ — the translucent, light-bending, blurred tab bar — with zero extra configuration. Not a fake blur view, not an approximation. The real thing, rendered by the OS.

It also bakes in the practical workarounds you need when a native tab bar won't let you style things the JS way:

• 🎯 Custom-sized icons — resize/pad them in the asset, not in code
• 🔁 Active / inactive icons — swap images or just recolor with a tint
• 🎨 Reliable tint colors on iOS — via experimental_bakedTintColors
• 🍎 Native Liquid Glass on iOS 26+ — inherited from the OS tab bar
• 🤖 Graceful Android fallback — JS tab bar with focus-based icon swapping

Why this exists

Native tab bars look and feel great — and on iOS 26 they render in Liquid Glass automatically. The catch: because they're real native components, you can't just set fontSize, resize an icon, or expect a tintColor to apply the way you would with a JS-drawn tab bar. Those props simply don't reach the native view.

This package packages the three fixes that actually work:

1. Can't change the icon size or text? Change the asset.

The native bar renders your icon at its own scale. Instead of fighting it in code, export the icon at the exact size and padding you want from Figma and ship that image (@2x / @3x). What you upload is what you get.

2. Active vs. inactive icons

Two ways, both supported:

• One template image + tint color — let activeTintColor / inactiveTintColor do the work (recommended for iOS).
• Separate activeIcon / inactiveIcon images — used on Android, where the JS tab bar re-renders on focus and can swap them.

3. The tint color won't apply on iOS → experimental_bakedTintColors

On iOS the native UITabBar renders your icons as-is and ignores the active/inactive tint unless you tell the library to bake the tint into the icons. That one flag is the difference between "my colors do nothing" and "it just works":

<NativeTab.Navigator experimental_bakedTintColors>

native-tabs-kit sets this for you (on by default).

Install

npm install liquid-glass-native-tab-kit @bottom-tabs/react-navigation @react-navigation/bottom-tabs

@bottom-tabs/react-navigation, @react-navigation/bottom-tabs, react, and react-native are peer dependencies.

Usage

import { NativeTabsKit } from "liquid-glass-native-tab-kit";
import Home from "./Home";
import Wallet from "./Wallet";
import Settings from "./Settings";

const screens = [
  { name: "Home",     component: Home,     icon: require("./icons/home.png") },
  { name: "Wallet",   component: Wallet,   icon: require("./icons/wallet.png") },
  {
    name: "Settings",
    component: Settings,
    // optional: separate art per state (used on Android)
    activeIcon:   require("./icons/settings-active.png"),
    inactiveIcon: require("./icons/settings.png"),
  },
];

export default function Tabs() {
  return (
    <NativeTabsKit
      screens={screens}
      activeTintColor="#0A84FF"
      inactiveTintColor="#8E8E93"
      initialRouteName="Home"
    />
  );
}

Wrap it in a NavigationContainer as usual.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | screens | Array | [] | { name, component, icon, activeIcon?, inactiveIcon? } per tab | | activeTintColor | string | — | Tint for the focused tab | | inactiveTintColor | string | "#8E8E93" | Tint for unfocused tabs | | initialRouteName | string | — | Starting tab | | backgroundColor | string | "#fff" | Android tab bar background (iOS uses native Liquid Glass) | | screenProps | object | {} | Extra props spread into every screen | | bakedTintColors | boolean | true | iOS: bake tint into icons so active/inactive colors apply |

Notes

• Ships as source (JSX). Metro transpiles it from node_modules automatically — no build step required.
• Liquid Glass is provided by the OS on iOS 26+. On older iOS it renders the standard native tab bar.

License

MIT © Talha Rasool