@honeypathkar/react-native-lq-bottom-bar 0.0.0-stage → 0.1.1

package/ios/LQBottomBarView.swift

@@ -0,0 +1,328 @@
+import UIKit
+
+/*
+ `RCTViewManager` and `RCTDirectEventBlock` are Objective-C types from
+ React-Core. Swift does not see them implicitly: the pod ships a module map
+ (`Headers/Public/React/React-Core.modulemap`), so the module has to be
+ imported by name like any other.
+*/
+import React
+
+/**
+ THE SYSTEM TAB BAR, HOSTED ANYWHERE.
+
+ The premise everything else in this app ran aground on was that a native tab
+ bar only exists inside a `UITabBarController`, and a `UITabBarController`
+ only draws its bar for its own child view controllers. That is true of the
+ CONTROLLER. It is not true of the BAR.
+
+ `UITabBar` is a plain `UIView` subclass. It can be added to any view
+ hierarchy, given `UITabBarItem`s, and told which one is selected. Doing that
+ gets the real thing and not a copy of it:
+
+   - On iOS 26 the system applies LIQUID GLASS to it through
+     `UITabBarAppearance`, including the scroll-edge treatment, because the
+     appearance is resolved by the bar itself and not by its controller.
+   - The selection animation, the icon bounce and the label crossfade are
+     UIKit's own, driven by `setSelectedItem(_:animated:)`.
+   - VoiceOver, Dynamic Type, Reduce Motion and the high-contrast variants
+     all come for free, because this IS the system control.
+
+ So a React Native view that wraps one gives every screen the same bar,
+ whether or not it happens to be a child of a tab controller. That is the
+ whole point of this package.
+
+ WHY NOT `UITabBarController` IN A CONTAINER: hosting the controller would
+ also host its content area, and React Native already owns the screen's
+ content. We want its bar and nothing else, so we take the bar.
+ */
+@objc(LQBottomBarView)
+public final class LQBottomBarView: UIView, UITabBarDelegate {
+
+  // MARK: - Bridged props
+
+  /// `[{ title, icon }]`, set from JS. Re-builds the items in place.
+  @objc public var items: NSArray = [] {
+    didSet {
+      /*
+       REBUILD ONLY WHEN THE ITEMS ACTUALLY CHANGED.
+
+       The JS side rebuilds its `items` array on every render, so this prop
+       arrives constantly with identical contents. Acting on each one calls
+       `setItems`, which THROWS AWAY the existing `UITabBarItem`s and the
+       selection animation running on them — a rebuild landing mid-animation
+       is how a press ends up looking like it half-happened.
+
+       `isEqual` on the arrays is a deep compare of the dictionaries inside,
+       which is what "the same bar" means here. The icon values are cached
+       data URIs on the JS side, so equal renders really do produce equal
+       strings rather than merely equivalent ones.
+      */
+      if items.isEqual(oldValue) { return }
+      rebuildItems()
+    }
+  }
+
+  /// Which item is lit. Setting it animates, which is the point.
+  @objc public var selectedIndex: NSNumber = 0 {
+    didSet { applySelection() }
+  }
+
+  /// Tint for the selected item. `nil` leaves the system default.
+  @objc public var selectedColor: UIColor? {
+    didSet { tabBar.tintColor = selectedColor }
+  }
+
+  /// Tint for everything else.
+  @objc public var unselectedColor: UIColor? {
+    didSet { applyAppearance() }
+  }
+
+  /**
+   Hide the labels and keep the glyphs.
+
+   UIKit has no switch for this, so it is done the way Apple's own compact
+   bars do it: the title is dropped and the image is nudged down by half the
+   space the title would have taken, which re-centres the glyph in the item.
+   */
+  @objc public var labeled: Bool = true {
+    didSet { rebuildItems() }
+  }
+
+  /// Fired on tap. The JS side owns the selection; this only reports.
+  @objc public var onTabSelected: RCTDirectEventBlock?
+
+  // MARK: - View
+
+  private let tabBar = UITabBar()
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setUp()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setUp()
+  }
+
+  private func setUp() {
+    tabBar.delegate = self
+    tabBar.translatesAutoresizingMaskIntoConstraints = false
+    addSubview(tabBar)
+
+    // Pinned to all four edges: React Native sizes this view through Yoga, so
+    // the bar takes whatever the layout gives it rather than carrying an
+    // intrinsic height of its own.
+    NSLayoutConstraint.activate([
+      tabBar.leadingAnchor.constraint(equalTo: leadingAnchor),
+      tabBar.trailingAnchor.constraint(equalTo: trailingAnchor),
+      tabBar.topAnchor.constraint(equalTo: topAnchor),
+      tabBar.bottomAnchor.constraint(equalTo: bottomAnchor),
+    ])
+
+    applyAppearance()
+  }
+
+  // MARK: - Appearance
+
+  private func applyAppearance() {
+    let appearance = UITabBarAppearance()
+
+    /*
+     `configureWithDefaultBackground()`, NOT a flat colour.
+
+     This is what opts the bar into the system material — on iOS 26 that is
+     liquid glass, below it a blur. Setting `backgroundColor` instead paints
+     an opaque sheet over the material, which is exactly how every hand-built
+     version of this bar ended up looking like a milky panel.
+     */
+    appearance.configureWithDefaultBackground()
+
+    if let unselected = unselectedColor {
+      let items: [UITabBarItemAppearance] = [
+        appearance.stackedLayoutAppearance,
+        appearance.inlineLayoutAppearance,
+        appearance.compactInlineLayoutAppearance,
+      ]
+      for item in items {
+        item.normal.iconColor = unselected
+        item.normal.titleTextAttributes = [.foregroundColor: unselected]
+      }
+    }
+
+    tabBar.standardAppearance = appearance
+    /*
+     The SCROLL EDGE appearance is a separate object and must be set too.
+
+     Without it the bar reverts to a transparent variant the moment a scroll
+     view underneath reaches its end, which reads as the bar vanishing. Using
+     the same appearance for both keeps the material constant.
+     */
+    tabBar.scrollEdgeAppearance = appearance
+  }
+
+  // MARK: - Items
+
+  private func rebuildItems() {
+    var built: [UITabBarItem] = []
+
+    for (index, raw) in items.enumerated() {
+      guard let spec = raw as? NSDictionary else { continue }
+
+      let title = labeled ? spec["title"] as? String : nil
+      let image = loadImage(spec["icon"])
+
+      let item = UITabBarItem(title: title, image: image, tag: index)
+
+      /*
+       `alwaysTemplate` so UIKit tints the glyph.
+
+       A PNG loaded as-is keeps its own colours and ignores `tintColor`, so
+       the selected state would look identical to the unselected one. The
+       alpha channel is the shape; the colour is the system's to decide.
+
+       `tintable: false` opts out, for an icon whose own colours ARE the
+       content — an avatar, a brand mark. Such an item then looks the same
+       selected as not, which is the caller's choice to make.
+       */
+      let tintable = (spec["tintable"] as? NSNumber)?.boolValue ?? true
+      item.image = image?.withRenderingMode(tintable ? .alwaysTemplate : .alwaysOriginal)
+      item.selectedImage = item.image
+
+      // Falls back to the title, which is what UIKit would have read anyway.
+      if let label = spec["accessibilityLabel"] as? String {
+        item.accessibilityLabel = label
+      }
+
+      if !labeled {
+        // Half the title's line height, so the glyph sits centred in the
+        // item rather than riding high where the label used to be.
+        item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
+      }
+
+      built.append(item)
+    }
+
+    tabBar.setItems(built, animated: false)
+    applySelection()
+  }
+
+  /**
+   React Native hands over either a bundled asset (a `uri` dictionary) or a
+   name in the app's own asset catalogue. Both are accepted so the JS side can
+   use `require('./icon.png')` in development, where assets are served over
+   HTTP from Metro, and a catalogue name in release.
+   */
+  private func loadImage(_ raw: Any?) -> UIImage? {
+    if let name = raw as? String {
+      return UIImage(named: name)
+    }
+    if let dict = raw as? NSDictionary {
+      if let name = dict["name"] as? String, let image = UIImage(named: name) {
+        return image
+      }
+      if let symbol = dict["sfSymbol"] as? String {
+        return UIImage(systemName: symbol)
+      }
+      if let uri = dict["uri"] as? String {
+        /*
+         A RASTERISED REACT ICON, which is the main path now.
+
+         `src/rasterise.tsx` draws a lucide or SVG icon off-screen and captures
+         it with react-native-svg's `toDataURL`, so the icon arrives as an
+         inline base64 PNG rather than as a file or a URL. Without this branch
+         it would fall through to `UIImage(contentsOfFile:)`, which cannot
+         read it, and the bar would show titles with no glyphs — the failure
+         is silent, which is why it is worth naming here.
+
+         THE SCALE IS NOT OPTIONAL. The capture renders through a
+         `UIGraphicsImageRenderer` at the screen's scale, so a 24-point glyph
+         is a 72x72 pixel PNG on a 3x device. PNG carries no scale of its own,
+         so decoding without one yields a 72-POINT image and a glyph three
+         times too large. Passing the screen scale is what cancels it back.
+        */
+        if uri.hasPrefix("data:") {
+          if let comma = uri.firstIndex(of: ","),
+            let data = Data(
+              base64Encoded: String(uri[uri.index(after: comma)...]),
+              options: .ignoreUnknownCharacters
+            )
+          {
+            return UIImage(data: data, scale: UIScreen.main.scale)
+          }
+          return nil
+        }
+
+        // A Metro-served asset. Loaded synchronously on purpose: a tab bar
+        // with no glyphs for a frame is worse than a frame's hitch, and these
+        // are a few hundred bytes each.
+        if uri.hasPrefix("http"), let url = URL(string: uri),
+          let data = try? Data(contentsOf: url)
+        {
+          return UIImage(data: data, scale: UIScreen.main.scale)
+        }
+        return UIImage(contentsOfFile: uri)
+      }
+    }
+    return nil
+  }
+
+  /**
+   `selectedItem` is a plain property, and that is the whole API.
+
+   `UITabBarController` has an animated setter; `UITabBar` does not. It does
+   not need one: the bar animates the change itself when it is on screen, so
+   assigning the property runs the same icon and label transition UIKit uses
+   for its own bars. There is nothing to opt into.
+   */
+  private func applySelection() {
+    let index = selectedIndex.intValue
+    guard let items = tabBar.items, index >= 0, index < items.count else {
+      return
+    }
+    let target = items[index]
+    // Already there. Re-assigning restarts the capsule animation, and this
+    // runs on every prop transaction, so the bar would shimmer continuously.
+    if tabBar.selectedItem === target { return }
+    tabBar.selectedItem = target
+  }
+
+  // MARK: - UITabBarDelegate
+
+  public func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
+    /*
+     REPORT, DO NOT DECIDE.
+
+     The selection is JS state: a tab press can be vetoed (the Home tab opens
+     a premise detail instead of switching, for one), so the bar must not
+     consider itself switched until JS says so. `selectedIndex` coming back
+     down is what moves it.
+     */
+    onTabSelected?(["index": item.tag])
+
+    /*
+     THE SNAP-BACK HAS TO WAIT A TURN, and this is the whole reason the bar
+     can end up lit on a tab the app is not showing.
+
+     UIKit calls this delegate method while it is still settling its OWN
+     selection — on iOS 26 the capsule is mid-animation — so assigning
+     `selectedItem` from in here is assigning into a change that has not
+     finished. UIKit wins, the highlight stays on the tapped item, and because
+     `selectedIndex` never changed VALUE, the prop never fires `didSet` again
+     and nothing ever corrects it. The bar is then permanently out of step with
+     the app: Events lit while the Profile screen is on screen.
+
+     Hopping to the next runloop turn puts the assignment after UIKit has
+     finished, where it sticks.
+
+     Reading `selectedIndex` late is a second benefit rather than a hazard: if
+     JS accepted the press and sent a new index in the meantime, this applies
+     THAT, so an accepted press does not visibly bounce back before moving
+     forward again.
+    */
+    DispatchQueue.main.async { [weak self] in
+      self?.applySelection()
+    }
+  }
+}

package/ios/LQBottomBarViewManager.m

@@ -0,0 +1,21 @@
+#import <React/RCTViewManager.h>
+#import <React/RCTUIManager.h>
+
+/**
+ Prop and event declarations for `LQBottomBarViewManager`.
+ *
+ These macros cannot be written in Swift — `RCT_EXPORT_VIEW_PROPERTY` is a
+ preprocessor construct — so the manager is split: behaviour in Swift,
+ declarations here. This is the standard arrangement for a Swift view manager
+ and the reason the pair exists.
+ */
+@interface RCT_EXTERN_MODULE (LQBottomBarViewManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(items, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(selectedColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(unselectedColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(labeled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onTabSelected, RCTDirectEventBlock)
+
+@end

package/ios/LQBottomBarViewManager.swift

@@ -0,0 +1,36 @@
+import UIKit
+
+/*
+ `RCTViewManager` and `RCTDirectEventBlock` are Objective-C types from
+ React-Core. Swift does not see them implicitly: the pod ships a module map
+ (`Headers/Public/React/React-Core.modulemap`), so the module has to be
+ imported by name like any other.
+*/
+import React
+
+/**
+ The bridge's handle on `LQBottomBarView`.
+
+ A LEGACY view manager, deliberately, even though this app runs Fabric.
+ React Native 0.83 bridges legacy managers through its interop layer, and the
+ alternative — a Fabric component view — must be written in Objective-C++,
+ which cannot host Swift directly and interacts badly with the `use_frameworks!`
+ linkage this Podfile sets. One Swift file that works beats two that fight the
+ build.
+ */
+@objc(LQBottomBarViewManager)
+final class LQBottomBarViewManager: RCTViewManager {
+
+  override func view() -> UIView! {
+    return LQBottomBarView()
+  }
+
+  /**
+   The bar is a leaf with no React children and no layout of its own to
+   compute, so it can be created on the main queue without stalling the
+   shadow tree.
+   */
+  override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+}

package/lib/commonjs/NativeBottomBar.d.ts

@@ -0,0 +1,33 @@
+import type { HostComponent, StyleProp, ViewProps, ViewStyle } from 'react-native';
+/**
+ * The native view, on whichever platform this is.
+ *
+ * Both platforms register the same component name, and both are legacy view
+ * managers bridged through React Native's interop layer — so there is one
+ * `requireNativeComponent` call and no per-platform file.
+ *
+ * `null` on anything else rather than absent: `requireNativeComponent` throws
+ * at REQUIRE time where the view is not registered, so it cannot sit at module
+ * scope unguarded on, say, web.
+ */
+/** The shape the native side is declared with, not the public API. */
+export interface NativeBottomBarProps {
+    items: unknown[];
+    selectedIndex: number;
+    selectedColor?: string;
+    unselectedColor?: string;
+    labeled: boolean;
+    onTabSelected?: (event: {
+        nativeEvent: {
+            index: number;
+        };
+    }) => void;
+    style?: StyleProp<ViewStyle>;
+    pointerEvents?: ViewProps['pointerEvents'];
+    /** Android only; the iOS bar gets its material from UIKit. */
+    iconSize?: number;
+    blurAmount?: number;
+    scrimColor?: string;
+}
+export declare const NativeBottomBar: HostComponent<NativeBottomBarProps> | null;
+//# sourceMappingURL=NativeBottomBar.d.ts.map

package/lib/commonjs/NativeBottomBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeBottomBar.d.ts","sourceRoot":"","sources":["../../src/NativeBottomBar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;GAUG;AAEH,sEAAsE;AACtE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAE3C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAID,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAG1D,CAAC"}

package/lib/commonjs/NativeBottomBar.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeBottomBar = void 0;
+const react_native_1 = require("react-native");
+const SUPPORTED = react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android';
+exports.NativeBottomBar = SUPPORTED
+    ? (0, react_native_1.requireNativeComponent)('LQBottomBarView')
+    : null;
+//# sourceMappingURL=NativeBottomBar.js.map

package/lib/commonjs/NativeBottomBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeBottomBar.js","sourceRoot":"","sources":["../../src/NativeBottomBar.ts"],"names":[],"mappings":";;;AAAA,+CAAgE;AAqChE,MAAM,SAAS,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,uBAAQ,CAAC,EAAE,KAAK,SAAS,CAAC;AAExD,QAAA,eAAe,GAC1B,SAAS;IACP,CAAC,CAAC,IAAA,qCAAsB,EAAuB,iBAAiB,CAAC;IACjE,CAAC,CAAC,IAAI,CAAC"}

package/lib/commonjs/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { LQBottomBarItem, LQBottomBarProps, LQIcon, LQIconState } from './types';
+export type { LQBottomBarItem, LQBottomBarProps, LQIcon, LQIconState };
+declare const LQBottomBar: ({ items, selectedIndex, selectedColor, unselectedColor, labeled, iconSize, onTabSelected, style, pointerEvents, blurAmount, androidBackgroundColor, }: LQBottomBarProps) => React.JSX.Element | null;
+export default LQBottomBar;
+//# sourceMappingURL=index.d.ts.map

package/lib/commonjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAoDvE,QAAA,MAAM,WAAW,GAAI,uJAYlB,gBAAgB,6BA4DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/commonjs/index.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const NativeBottomBar_1 = require("./NativeBottomBar");
+const rasterise_1 = require("./rasterise");
+/**
+ * THE SYSTEM TAB BAR, HOSTED ANYWHERE.
+ *
+ * A native tab bar normally only exists inside a `UITabBarController`, which
+ * only draws its bar for its own children — so a screen pushed above a tab
+ * navigator cannot have one. That is true of the CONTROLLER, not the BAR:
+ * `UITabBar` is a plain `UIView`, and hosting one directly gets the real
+ * thing rather than a drawing of it. Liquid glass on iOS 26, UIKit's own
+ * selection animation, and the platform's accessibility, on any screen.
+ *
+ * Android has no system bar to borrow, so it draws a matching one: same
+ * dimensions, same tint crossfade and icon bounce, with a blurred backdrop
+ * standing in for the iOS material.
+ *
+ * BOTH PLATFORMS DRAW THEIR OWN ITEMS, which is why `src/rasterise.tsx`
+ * exists: a view that renders its items natively cannot be handed a React
+ * element, so a lucide or SVG icon is captured to a PNG once and the capture
+ * is what crosses the bridge. See that file for the trade this makes and what
+ * it costs.
+ */
+/**
+ * ASSETS ARE RESOLVED HERE, and they have to be.
+ *
+ * `require('./home.png')` evaluates to a NUMBER — an id into React Native's
+ * asset registry. The bridge converts that number into `{ uri, scale, ... }`
+ * only for props it knows are image sources, which it learns from the prop's
+ * declared type. `items` is declared as an array, so the bridge has no reason
+ * to look inside it: the number crosses to native as a number, the native
+ * loader finds nothing it recognises, and the bar draws labels with no
+ * glyphs. `Image.resolveAssetSource` does the same conversion by hand, which
+ * is what lets a caller keep writing `require(...)`.
+ */
+const resolveIcon = (icon) => {
+    if (typeof icon === 'number')
+        return react_native_1.Image.resolveAssetSource(icon);
+    return icon;
+};
+/**
+ * `overflow: 'hidden'` on Android, always.
+ *
+ * The blurred backdrop is a real child view, so without clipping it squares
+ * off whatever `borderRadius` the caller gave the bar — the corners stay
+ * rounded on the bar's own background while the blur fills them in. iOS needs
+ * none of this: `UITabBar` shapes its own material.
+ */
+const androidClip = react_native_1.StyleSheet.create({
+    bar: { overflow: 'hidden' },
+});
+const LQBottomBar = ({ items, selectedIndex, selectedColor, unselectedColor, labeled = true, iconSize = 24, onTabSelected, style, pointerEvents, blurAmount = 20, androidBackgroundColor = 'rgba(20, 20, 20, 0.45)', }) => {
+    const { sources, host } = (0, rasterise_1.useRasterisedIcons)(items, iconSize);
+    const nativeItems = (0, react_1.useMemo)(() => items.map((item, index) => {
+        var _a;
+        const rasterised = sources[index];
+        return {
+            title: item.title,
+            /*
+             A captured glyph wins; otherwise the icon passes through as the
+             image or symbol descriptor it already was — which only iOS can
+             resolve. Until a capture lands this is `undefined`, which draws the
+             item with its title and no glyph for a frame; see the cost note in
+             `rasterise.tsx`.
+            */
+            icon: rasterised ? { uri: rasterised } : resolveIcon(item.icon),
+            // Default true: one artwork, tinted by the platform for both states.
+            tintable: item.tintable !== false,
+            accessibilityLabel: (_a = item.accessibilityLabel) !== null && _a !== void 0 ? _a : item.title,
+        };
+    }), [items, sources]);
+    if (!NativeBottomBar_1.NativeBottomBar)
+        return null;
+    const platformProps = react_native_1.Platform.OS === 'android'
+        ? {
+            iconSize,
+            blurAmount,
+            scrimColor: androidBackgroundColor,
+        }
+        : // Passing Android-only props to the iOS manager would log an unknown
+            // prop warning for each one on every render.
+            null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        host,
+        react_1.default.createElement(NativeBottomBar_1.NativeBottomBar, { style: react_native_1.Platform.OS === 'android' ? [style, androidClip.bar] : style, pointerEvents: pointerEvents, items: nativeItems, selectedIndex: selectedIndex, selectedColor: selectedColor, unselectedColor: unselectedColor, labeled: labeled !== false, ...platformProps, 
+            /*
+             A REPORT, NOT A COMMIT. Both bars put their highlight back where
+             `selectedIndex` says it is, so a tap the caller declines to act on —
+             one that opens a detail screen instead of switching tabs — cannot
+             leave the bar showing the wrong item.
+            */
+            onTabSelected: event => onTabSelected === null || onTabSelected === void 0 ? void 0 : onTabSelected(event.nativeEvent.index) })));
+};
+exports.default = LQBottomBar;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,+CAA2D;AAE3D,uDAAoD;AACpD,2CAAiD;AAUjD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,GAAG,CAAC,IAAY,EAAW,EAAE;IAC5C,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO,oBAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACpE,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,yBAAU,CAAC,MAAM,CAAC;IACpC,GAAG,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;CAC5B,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,EAAE,EACb,aAAa,EACb,KAAK,EACL,aAAa,EACb,UAAU,GAAG,EAAE,EACf,sBAAsB,GAAG,wBAAwB,GAChC,EAAE,EAAE;IACrB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAA,8BAAkB,EAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;QACxB,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAClC,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB;;;;;;cAME;YACF,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YAC/D,qEAAqE;YACrE,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;YACjC,kBAAkB,EAAE,MAAA,IAAI,CAAC,kBAAkB,mCAAI,IAAI,CAAC,KAAK;SAC1D,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,KAAK,EAAE,OAAO,CAAC,CACjB,CAAC;IAEF,IAAI,CAAC,iCAAe;QAAE,OAAO,IAAI,CAAC;IAElC,MAAM,aAAa,GACjB,uBAAQ,CAAC,EAAE,KAAK,SAAS;QACvB,CAAC,CAAC;YACE,QAAQ;YACR,UAAU;YACV,UAAU,EAAE,sBAAsB;SACnC;QACH,CAAC,CAAC,qEAAqE;YACrE,6CAA6C;YAC7C,IAAI,CAAC;IAEX,OAAO,CACL;QACG,IAAI;QACL,8BAAC,iCAAe,IACd,KAAK,EAAE,uBAAQ,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EACnE,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,WAAW,EAClB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,KAAK,KAAK,KACtB,aAAa;YACjB;;;;;cAKE;YACF,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,GAChE,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/lib/commonjs/rasterise.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react';
+import type { LQBottomBarItem } from './types';
+export interface RasterisedIcons {
+    /**
+     * Per item: the captured data URI, or `null` when the icon needs no
+     * rasterising (an image or SF Symbol) or has not been captured yet.
+     */
+    sources: (string | null)[];
+    /** Mount this somewhere in the tree. Renders nothing visible. */
+    host: ReactElement | null;
+}
+/**
+ * Capture every React-element icon in `items`, memoised by icon identity.
+ *
+ * Returns the captured sources plus the off-screen host that does the
+ * capturing — the caller has to render the host, since a hook cannot mount
+ * views on its own.
+ */
+export declare const useRasterisedIcons: (items: LQBottomBarItem[], size: number) => RasterisedIcons;
+//# sourceMappingURL=rasterise.d.ts.map

package/lib/commonjs/rasterise.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rasterise.d.ts","sourceRoot":"","sources":["../../src/rasterise.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAU,MAAM,SAAS,CAAC;AAkTvD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3B,iEAAiE;IACjE,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,eAAe,EAAE,EACxB,MAAM,MAAM,KACX,eAyGF,CAAC"}