liquid-glass-native-tab-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Talha Rasool
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# 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":
+
+```jsx
+<NativeTab.Navigator experimental_bakedTintColors>
+```
+
+`native-tabs-kit` sets this for you (on by default).
+
+---
+
+## Install
+
+```sh
+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
+
+```jsx
+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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "liquid-glass-native-tab-kit",
+  "version": "0.1.0",
+  "description": "A cross-platform React Native bottom tab bar built on the real native UITabBar — get Apple's native Liquid Glass effect for free on iOS 26+, plus custom-sized icons, active/inactive icon swapping, and reliable tint colors via experimental_bakedTintColors.",
+  "keywords": [
+    "react-native",
+    "bottom-tabs",
+    "native-tabs",
+    "tab-bar",
+    "navigation",
+    "liquid-glass",
+    "ios26",
+    "expo",
+    "ios",
+    "android",
+    "tint-color",
+    "experimental_bakedTintColors"
+  ],
+  "license": "MIT",
+  "author": "Talha Rasool <talharasool700@gmail.com>",
+  "main": "src/index.js",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "prepublishOnly": "echo \"Ship the source directly — Metro transpiles JSX from node_modules.\""
+  },
+  "peerDependencies": {
+    "@bottom-tabs/react-navigation": ">=0.9.0",
+    "@react-navigation/bottom-tabs": ">=6.0.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "@bottom-tabs/react-navigation": {
+      "optional": false
+    },
+    "@react-navigation/bottom-tabs": {
+      "optional": false
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}

package/src/NativeTabsKit.js

@@ -0,0 +1,101 @@
+import { createNativeBottomTabNavigator } from "@bottom-tabs/react-navigation";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "react";
+import { Image, Platform } from "react-native";
+
+const NativeTab = createNativeBottomTabNavigator();
+const JsTab = createBottomTabNavigator();
+
+/**
+ * NativeTabsKit
+ *
+ * A cross-platform bottom tab bar.
+ *
+ * On iOS it renders the REAL native UITabBar (via @bottom-tabs/react-navigation),
+ * which means you get Apple's native Liquid Glass effect for free on iOS 26+ —
+ * the translucent, light-bending tab bar — with no extra config.
+ *
+ * Because it's a native tab bar, you can't resize icons or text from JS the way
+ * you can with the JS tab bar. The intended workaround is baked in:
+ *   1. Ship the icon at the exact size/padding you want (export from Figma).
+ *   2. Provide ONE template image per tab and let the tint color handle the
+ *      active/inactive states — enabled reliably via experimental_bakedTintColors.
+ *   3. Or provide separate active/inactive images (used on Android, where the
+ *      JS tab bar can swap on focus).
+ *
+ * @param {Object} props
+ * @param {Array}  props.screens            [{ name, component, icon, activeIcon?, inactiveIcon? }]
+ * @param {string} props.activeTintColor    tint for the focused tab
+ * @param {string} props.inactiveTintColor  tint for unfocused tabs
+ * @param {string} [props.initialRouteName]
+ * @param {string} [props.backgroundColor]  Android tab bar background (iOS uses native Liquid Glass)
+ * @param {Object} [props.screenProps]      extra props spread into every screen
+ * @param {boolean}[props.bakedTintColors]  iOS: bake tint into icons so active/inactive colors apply (default true)
+ */
+export default function NativeTabsKit({
+  screens = [],
+  activeTintColor,
+  inactiveTintColor = "#8E8E93",
+  initialRouteName,
+  backgroundColor = "#fff",
+  screenProps = {},
+  bakedTintColors = true,
+}) {
+  if (Platform.OS === "ios") {
+    return (
+      <NativeTab.Navigator
+        tabBarActiveTintColor={activeTintColor}
+        tabBarInactiveTintColor={inactiveTintColor}
+        screenOptions={{ headerShown: false }}
+        initialRouteName={initialRouteName}
+        // The key line: without this the native UITabBar renders your icons
+        // as-is and ignores active/inactive tint. Baking the tint in makes the
+        // colors actually apply.
+        experimental_bakedTintColors={bakedTintColors}
+      >
+        {screens.map(({ name, component: Screen, icon, activeIcon }) => (
+          <NativeTab.Screen
+            key={name}
+            name={name}
+            options={{ tabBarIcon: () => activeIcon || icon }}
+          >
+            {(props) => <Screen {...props} {...screenProps} />}
+          </NativeTab.Screen>
+        ))}
+      </NativeTab.Navigator>
+    );
+  }
+
+  // Android: JS tab bar. It re-renders per focus, so we can swap active/inactive
+  // images AND apply tintColor.
+  return (
+    <JsTab.Navigator
+      initialRouteName={initialRouteName}
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarActiveTintColor: activeTintColor,
+        tabBarInactiveTintColor: inactiveTintColor,
+        tabBarStyle: { backgroundColor },
+        tabBarIcon: ({ focused, color, size }) => {
+          const screen = screens.find((s) => s.name === route.name);
+          const source = focused
+            ? screen?.activeIcon || screen?.icon
+            : screen?.inactiveIcon || screen?.icon;
+          return (
+            <Image
+              source={source}
+              style={{ width: size, height: size, tintColor: color }}
+              resizeMode="contain"
+            />
+          );
+        },
+      })}
+    >
+      {screens.map(({ name, component: Screen }) => (
+        <JsTab.Screen key={name} name={name}>
+          {(props) => <Screen {...props} {...screenProps} />}
+        </JsTab.Screen>
+      ))}
+    </JsTab.Navigator>
+  );
+}

package/src/index.js

@@ -0,0 +1 @@
+export { default, default as NativeTabsKit } from "./NativeTabsKit";