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

package/lib/commonjs/rasterise.js

@@ -0,0 +1,398 @@
+"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 });
+exports.useRasterisedIcons = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * TURNING A REACT ICON INTO A UIImage.
+ *
+ * `UITabBar` renders its items natively and accepts only `UIImage`. That is
+ * not a limitation to argue with — it is the reason the bar looks and behaves
+ * like the system's own, since UIKit is drawing the items rather than
+ * compositing someone else's views over them.
+ *
+ * So the icon has to become an image BEFORE it reaches the bar. The way out
+ * is react-native-svg's `toDataURL()`: mount the icon off-screen once, ask the
+ * native SVG view to render itself into a PNG, hand the base64 to the bar,
+ * and remember the result. A lucide icon is a react-native-svg `<Svg>` with a
+ * forwarded ref, so one path covers lucide and hand-written SVG alike.
+ *
+ * THE ALTERNATIVE, for the record: overlay JS icons on top of the native bar.
+ * That accepts any renderer and needs none of this file — but it forfeits
+ * UIKit's selection animation, which is the thing the native bar is for. A
+ * one-off rasterisation is the cheaper trade.
+ *
+ * WHAT THIS COSTS. The first frame for an uncached icon has a title and no
+ * glyph. The cache is module-level, so it is one frame per distinct icon per
+ * app launch, not per mount — and a static `items` array, which is the normal
+ * case, pays it once at startup.
+ */
+/**
+ * Captured PNGs, keyed by icon identity. Module scope: see above.
+ *
+ * SUCCESSES ONLY. An earlier version also stored failures here, as an empty
+ * string, to stop an uncapturable icon being retried on every render. That
+ * was a trap: this map outlives every mount AND survives Fast Refresh, so a
+ * failure recorded once was permanent for the life of the JS context. Fixing
+ * the cause — an icon component that did not forward its ref — then changed
+ * nothing, because the poisoned entry was still there and the icon was never
+ * attempted again. Failures are tracked per mount instead; see `failed`.
+ */
+const cache = new Map();
+/**
+ * Stable ids for component types, so a cache key can name "this icon
+ * component" without stringifying a function.
+ *
+ * Weak, because the key must not be the thing that keeps a lazily-imported
+ * icon module alive.
+ */
+const typeIds = new WeakMap();
+let nextTypeId = 0;
+const typeId = (type) => {
+    if (typeof type === 'string')
+        return type;
+    if (typeof type !== 'function' && typeof type !== 'object')
+        return 'anon';
+    if (type === null)
+        return 'anon';
+    const existing = typeIds.get(type);
+    if (existing)
+        return existing;
+    const id = `t${nextTypeId++}`;
+    typeIds.set(type, id);
+    return id;
+};
+/**
+ * OPAQUE BLACK, and the colour genuinely does not matter.
+ *
+ * The capture is handed to UIKit as a TEMPLATE image: the alpha channel is
+ * the shape and the system chooses the colour. What does matter is that the
+ * colour is RESOLVABLE — lucide defaults `color` to the literal string
+ * `"currentColor"`, which resolves against the `<Svg>`'s own `color` prop, and
+ * with nothing to resolve against the glyph rasterises empty. Setting `color`
+ * on the root is what gives `currentColor` a value.
+ */
+const RASTER_COLOR = '#000000';
+/**
+ * The dimension to ask `toDataURL` for, in whichever unit this platform means
+ * by it. See the long note at the call site for why they disagree.
+ */
+const captureSize = (size) => react_native_1.Platform.OS === 'android' ? Math.round(react_native_1.PixelRatio.get() * size) : size;
+/** Props only ever serialised for the cache key, never compared deeply. */
+const stableStringify = (value) => {
+    if (value === null || typeof value !== 'object') {
+        // A function in props cannot be serialised, and two renders produce two
+        // identities. Collapse it to its type: a caller whose icon varies by a
+        // callback should pass an explicit `key`.
+        return typeof value === 'function' ? 'fn' : String(value);
+    }
+    if (Array.isArray(value)) {
+        return `[${value.map(stableStringify).join(',')}]`;
+    }
+    const record = value;
+    const keys = Object.keys(record).sort();
+    return `{${keys
+        .map(k => `${k}:${stableStringify(record[k])}`)
+        .join(',')}}`;
+};
+/** True for the two icon forms that have to be drawn before iOS can use them. */
+const needsRaster = (icon) => typeof icon === 'function' || (0, react_1.isValidElement)(icon);
+const cacheKey = (item, size) => {
+    const { icon } = item;
+    if (!needsRaster(icon))
+        return null;
+    const base = item.key
+        ? `k:${item.key}`
+        : typeof icon === 'function'
+            ? `f:${typeId(icon)}`
+            : `e:${typeId(icon.type)}:${stableStringify(icon.props)}`;
+    return `${base}|${size}`;
+};
+/**
+ * Resolve an icon to the element that should actually be drawn, sized and
+ * coloured for capture.
+ */
+const rasterElement = (icon, size) => {
+    var _a, _b, _c, _d, _e;
+    if (typeof icon === 'function') {
+        /*
+         ALWAYS THE UNSELECTED FACE. UIKit owns the selected appearance: it tints
+         the one template image it was given. Capturing the selected face too
+         would produce a second artwork fighting the system's own treatment —
+         which is also why `tintable` exists for icons that should opt out.
+        */
+        return icon({ selected: false, color: RASTER_COLOR, size });
+    }
+    if (!(0, react_1.isValidElement)(icon))
+        return null;
+    const props = ((_a = icon.props) !== null && _a !== void 0 ? _a : {});
+    return (0, react_1.cloneElement)(icon, {
+        // Only filled in where the caller left them out, so an icon that sets its
+        // own size or colours keeps them.
+        size: (_b = props.size) !== null && _b !== void 0 ? _b : size,
+        width: (_c = props.width) !== null && _c !== void 0 ? _c : size,
+        height: (_d = props.height) !== null && _d !== void 0 ? _d : size,
+        color: (_e = props.color) !== null && _e !== void 0 ? _e : RASTER_COLOR,
+    });
+};
+/**
+ * How long to wait for a capture before re-issuing it, and how many times.
+ *
+ * Eight tries at 100ms is 800ms of patience before an icon is written off,
+ * which is generous for something that normally lands on the first frame and
+ * still short enough that a genuinely uncapturable icon does not hold the
+ * off-screen host mounted for the session.
+ */
+const RETRY_MS = 100;
+const MAX_TRIES = 8;
+/**
+ * One off-screen icon, captured once.
+ *
+ * `toDataURL` needs the NATIVE view to exist and, on Android, to have been
+ * drawn at least once — neither of which is true when the effect first runs:
+ * React has committed the tree, but the native view is mounted and laid out a
+ * frame later. Hence the frame of delay.
+ *
+ * THE WATCHDOG IS NOT BELT-AND-BRACES, it is the only thing covering the worst
+ * failure mode. On Android `SvgViewModule.toDataURL` checks `notRendered()`
+ * and, if the view has not drawn yet, parks the request as a task to be run
+ * from the next `onDraw` — and returns WITHOUT invoking the callback. So a
+ * retry driven from inside the callback cannot fire: nothing ever calls it.
+ * Re-issuing the whole request on a timer is what breaks that deadlock, and
+ * the attempt cap is what stops it running forever if the icon simply cannot
+ * be drawn.
+ */
+const Capture = ({ cacheKey: key, node, size, onCaptured }) => {
+    const ref = (0, react_1.useRef)(null);
+    /**
+     * Survives effect re-runs on purpose.
+     *
+     * `cancelled` below is per-run, so a re-run restarts a capture that has not
+     * landed. This one is per-COMPONENT, so a capture that already reported is
+     * never reported twice — which it would be if both flags were the same ref,
+     * and which the earlier version of this file got wrong in the other
+     * direction: a cleanup that set the shared flag killed every subsequent
+     * attempt, so any re-render before the first capture landed meant no glyph
+     * ever appeared.
+     */
+    const reported = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        let tries = 0;
+        let watchdog;
+        let frame = 0;
+        const report = (dataUri) => {
+            if (cancelled || reported.current)
+                return;
+            reported.current = true;
+            if (watchdog)
+                clearTimeout(watchdog);
+            onCaptured(key, dataUri);
+        };
+        const issue = () => {
+            if (cancelled || reported.current)
+                return;
+            if (tries >= MAX_TRIES) {
+                report(null);
+                return;
+            }
+            tries += 1;
+            const svg = ref.current;
+            if (!svg || typeof svg.toDataURL !== 'function') {
+                /*
+                 Either the native view is not up yet, or this is not an <Svg> root at
+                 all — the usual cause of the latter being an icon wrapped in a <View>,
+                 where the ref lands on the wrapper and the SVG underneath is
+                 unreachable. Both are retried, because the first resolves itself and
+                 the second costs only the attempt budget before falling through to a
+                 reported miss.
+                */
+                watchdog = setTimeout(issue, RETRY_MS);
+                return;
+            }
+            watchdog = setTimeout(issue, RETRY_MS);
+            svg.toDataURL((base64) => {
+                if (base64) {
+                    /*
+                     `toDataURL` yields BARE base64, not a data URI — the name is a
+                     long-standing misnomer in react-native-svg. The prefix is added
+                     here so the native side receives something it recognises as an
+                     image source.
+                    */
+                    report(`data:image/png;base64,${base64}`);
+                }
+                // An empty result is left to the watchdog rather than retried here,
+                // so there is one retry path instead of two that can race.
+            }, 
+            /*
+             THE UNITS DIFFER BY PLATFORM, and getting it wrong fails quietly in
+             two different ways. Hence `captureSize`.
+    
+             iOS takes POINTS. The renderer is a `UIGraphicsImageRenderer` at the
+             screen's scale, so a 24-point request yields a 24x24pt / 72x72px PNG
+             on a 3x device; PNG carries no scale, so the native side decodes it
+             with `UIScreen.main.scale` and the two cancel out. Asking for
+             `size * pixelRatio` here would double-apply the scale and draw the
+             glyph three times too large.
+    
+             Android takes PIXELS. `SvgView.toDataURL(w, h)` allocates a bitmap of
+             exactly w by h pixels and then draws the SVG in the VIEW's own
+             coordinate space, which is already in pixels — so a 24-pixel bitmap
+             on a 3x device captures the top-left ninth of a 72-pixel glyph and
+             discards the rest. The bitmap has to be the full pixel size, and the
+             native side scales it back down to `size` dp when it draws.
+            */
+            { width: captureSize(size), height: captureSize(size) });
+        };
+        frame = requestAnimationFrame(issue);
+        return () => {
+            cancelled = true;
+            if (watchdog)
+                clearTimeout(watchdog);
+            cancelAnimationFrame(frame);
+        };
+    }, [key, size, onCaptured]);
+    return (0, react_1.cloneElement)(node, { ref });
+};
+const styles = react_native_1.StyleSheet.create({
+    /**
+     * OFF-SCREEN, not invisible, and NOT CLIPPED.
+     *
+     * `opacity: 0` and `display: 'none'` are both tempting and both wrong: the
+     * first relies on the renderer still drawing a fully transparent subtree,
+     * and the second detaches the native view so there is nothing left to
+     * capture. Moving it out of the viewport keeps a real, laid-out native view
+     * that the user cannot see.
+     *
+     * No size and no `overflow: 'hidden'` either, which an earlier version had.
+     * Pinning the host to 1x1 and clipping is the obvious way to keep it out of
+     * the way, but on Android a capture is only possible once the SVG has been
+     * drawn at least once — so clipping the icons out of the host is clipping
+     * away the very thing being waited on. Without a size the host sizes itself
+     * to its content, and being off-screen is enough on its own.
+     */
+    host: {
+        position: 'absolute',
+        left: -10000,
+        top: -10000,
+    },
+});
+/**
+ * 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.
+ */
+const useRasterisedIcons = (items, size) => {
+    const keys = (0, react_1.useMemo)(() => items.map(item => cacheKey(item, size)), [items, size]);
+    /**
+     * Captures that landed during THIS mount.
+     *
+     * The module cache is the source of truth and survives unmounting, but a
+     * write to it is invisible to the reconciler. This mirror is what actually
+     * triggers the re-render; it is only ever added to, and it is seeded from
+     * nothing because a warm cache needs no re-render — `sources` reads it
+     * directly on the first pass.
+     */
+    const [captured, setCaptured] = (0, react_1.useState)({});
+    /**
+     * Icons that could not be captured DURING THIS MOUNT.
+     *
+     * Held in a ref rather than in the module cache so the scope is right in
+     * both directions: within a mount an icon is attempted once, so a glyph that
+     * genuinely cannot be drawn does not spin; across mounts the slate is clean,
+     * so remounting the bar — or a Fast Refresh that fixed the icon — gets
+     * another go. A permanent record of failure is what made a fixed icon stay
+     * broken until the app was killed.
+     */
+    const failed = (0, react_1.useRef)(new Set());
+    const onCaptured = (0, react_1.useCallback)((key, dataUri) => {
+        if (dataUri) {
+            cache.set(key, dataUri);
+        }
+        else {
+            failed.current.add(key);
+            if (__DEV__) {
+                /*
+                 LOUD, because the failure is otherwise invisible: the item renders
+                 with its title and no glyph, which reads as a styling problem rather
+                 than a capture that never happened.
+                */
+                console.warn(`[lq-bottom-bar] Could not rasterise the icon for "${key}". ` +
+                    'The icon must be a react-native-svg <Svg> element, or a component ' +
+                    'that forwards its ref to one — a plain function component drops ' +
+                    'the ref and cannot be captured. Wrap it in React.forwardRef.');
+            }
+        }
+        setCaptured(prev => ({ ...prev, [key]: dataUri !== null && dataUri !== void 0 ? dataUri : '' }));
+    }, []);
+    const sources = (0, react_1.useMemo)(() => keys.map(key => {
+        var _a;
+        if (!key)
+            return null;
+        return (_a = cache.get(key)) !== null && _a !== void 0 ? _a : null;
+    }), 
+    // `captured` is what makes this re-run; the cache it reads is module state.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [keys, captured]);
+    const pending = (0, react_1.useMemo)(() => keys
+        .map((key, index) => ({ key, index }))
+        .filter((entry) => entry.key !== null &&
+        !cache.has(entry.key) &&
+        !failed.current.has(entry.key)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [keys, captured]);
+    const host = pending.length === 0 ? null : (react_1.default.createElement(react_native_1.View, { style: styles.host, pointerEvents: "none", collapsable: false }, pending.map(({ key, index }) => {
+        const node = rasterElement(items[index].icon, size);
+        if (!node)
+            return null;
+        return (
+        /*
+         `onCaptured` IS PASSED AS-IS, not wrapped in an arrow.
+
+         An inline `dataUri => onCaptured(key, dataUri)` is a new function
+         identity on every render, which lands in `Capture`'s effect deps
+         and re-runs the effect — tearing down an in-flight capture on
+         every parent render. The key travels as a prop instead so the
+         callback can stay stable.
+        */
+        react_1.default.createElement(Capture, { key: key, cacheKey: key, node: node, size: size, onCaptured: onCaptured }));
+    })));
+    return { sources, host };
+};
+exports.useRasterisedIcons = useRasterisedIcons;
+//# sourceMappingURL=rasterise.js.map

package/lib/commonjs/rasterise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rasterise.js","sourceRoot":"","sources":["../../src/rasterise.tsx"],"names":[],"mappings":"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"}

package/lib/commonjs/types.d.ts

@@ -0,0 +1,119 @@
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
+/**
+ * What an item's icon can be.
+ *
+ * The union is wide because the two platforms want opposite things and the
+ * caller should not have to care which.
+ *
+ * A native `UITabBar` draws its own items and accepts only `UIImage`, so a
+ * React element has to BECOME an image before it reaches the bar. The JS
+ * Android bar has no such constraint and renders the element directly, at
+ * full fidelity. `src/rasterise.tsx` is the bridge between those two facts.
+ */
+export type LQIcon = 
+/**
+ * A react-native-svg element — which is what a lucide icon is, under the
+ * hood. Rasterised once on iOS, rendered live on Android.
+ */
+ReactElement
+/**
+ * The same, but told whether it is selected. Preferred over a bare element
+ * when the icon changes shape (not just tint) between states: an outline
+ * glyph when idle and a filled one when active, which is what this app's
+ * own set does.
+ *
+ * iOS calls this ONCE, with `selected: false`, because UIKit owns the
+ * selected appearance — see `tintable`.
+ */
+ | ((state: LQIconState) => ReactElement)
+/** `require('./home.png')`, or `{ uri }`. */
+ | ImageSourcePropType
+/** A name in the app's own asset catalogue. iOS only. */
+ | {
+    name: string;
+}
+/** An SF Symbol. iOS only; ignored on Android. */
+ | {
+    sfSymbol: string;
+};
+export interface LQIconState {
+    selected: boolean;
+    /** `selectedColor` when selected, `unselectedColor` otherwise. */
+    color: string;
+    size: number;
+}
+export interface LQBottomBarItem {
+    /** Shown under the glyph unless `labeled` is false. */
+    title?: string;
+    icon: LQIcon;
+    /**
+     * A STABLE identity for this item's icon, and the cache key the
+     * rasteriser memoises on.
+     *
+     * Without it the key is derived from the icon's component type and its
+     * props, which is correct but costs a serialisation per render and misses
+     * when a prop is a function or a style object. Pass this whenever the item
+     * list is static, which it almost always is.
+     */
+    key?: string;
+    /**
+     * Whether UIKit may TINT this glyph, iOS only. Default true.
+     *
+     * True renders the image as a template: the alpha channel is the shape and
+     * the system picks the colour, selected against unselected. That is what
+     * makes one artwork cover both states and what makes the glyph follow the
+     * platform's own selected-state treatment.
+     *
+     * Set it false for an icon whose own colours ARE the content — an avatar, a
+     * brand mark — which then looks identical in both states.
+     */
+    tintable?: boolean;
+    /** Accessibility label. Falls back to `title`. */
+    accessibilityLabel?: string;
+}
+export interface LQBottomBarProps {
+    items: LQBottomBarItem[];
+    /**
+     * Which item is lit. JS OWNS THIS, on both platforms: `onTabSelected` is a
+     * report, not a commit, so a press that should not switch tabs (one that
+     * opens a detail screen instead, say) cannot desync the bar.
+     */
+    selectedIndex: number;
+    /** Tint for the selected item. Leave unset for the system default. */
+    selectedColor?: string;
+    /** Tint for everything else. */
+    unselectedColor?: string;
+    /** False hides the titles and re-centres the glyphs. Default true. */
+    labeled?: boolean;
+    /** Glyph size in points. Default 24. */
+    iconSize?: number;
+    onTabSelected?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Forwarded to the native view, because a bar is very often absolutely
+     * positioned over a scrollable page.
+     *
+     * `"box-none"` is the useful value there: the bar's own items stay tappable
+     * while the empty space around them — the safe-area strip below, the gap
+     * either side of an inset pill — passes touches through to the content
+     * underneath instead of swallowing them.
+     */
+    pointerEvents?: ViewProps['pointerEvents'];
+    /**
+     * Android only: blur strength behind the bar, 0 disables it and leaves the
+     * flat `androidBackgroundColor` scrim. Default 20.
+     */
+    blurAmount?: number;
+    /**
+     * Android only: the material's TINT, painted over the blurred backdrop.
+     *
+     * That order is how UIKit composes a material — blur first, then a
+     * translucent colour on top — and it is why this must stay translucent. An
+     * opaque value stops being a tint and becomes a lid: the blur is still
+     * computed, still costs a software draw of the tree every frame, and is
+     * completely hidden behind it.
+     */
+    androidBackgroundColor?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,MAAM;AAChB;;;GAGG;AACD,YAAY;AACd;;;;;;;;GAQG;GACD,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC;AACxC,6CAA6C;GAC3C,mBAAmB;AACrB,yDAAyD;GACvD;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE;AAClB,kDAAkD;GAChD;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzB,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IAEb;;;;;;;;OAQG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,eAAe,EAAE,CAAC;IAEzB;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAE3C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC"}

package/lib/commonjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/commonjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@honeypathkar/react-native-lq-bottom-bar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The real iOS UITabBar (liquid glass on iOS 26) and a matching blurred Android bar, taking React icons rather than only images",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/commonjs/index.js",
+  "module": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "types": "lib/commonjs/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "ios",
+    "android/src",
+    "android/build.gradle",
+    "react-native-lq-bottom-bar.podspec",
+    "README.md",
+    "!lib/tsconfig.tsbuildinfo"
+  ],
+  "scripts": {
+    "build": "tsc --build",
+    "clean": "rm -rf lib",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "tab-bar",
+    "bottom-bar",
+    "uitabbar",
+    "liquid-glass",
+    "blur",
+    "lucide",
+    "svg"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/honeypathkar/react-native-components.git",
+    "directory": "react-native-lq-bottom-bar"
+  },
+  "homepage": "https://github.com/honeypathkar/react-native-components/tree/master/react-native-lq-bottom-bar#readme",
+  "bugs": {
+    "url": "https://github.com/honeypathkar/react-native-components/issues"
+  },
+  "author": "honeypathkar",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "19.2.0",
+    "react-native": "0.83.1",
+    "typescript": "^5.0.0"
+  }
+}

package/react-native-lq-bottom-bar.podspec

@@ -0,0 +1,27 @@
+require "json"
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-lq-bottom-bar"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.license      = package["license"]
+  s.authors      = { "honeypathkar" => "tech@yekuminc.com" }
+  s.homepage     = "https://github.com/honeypathkar/react-native-lq-bottom-bar"
+  s.platforms    = { :ios => "15.0" }
+  s.source       = { :git => "https://github.com/honeypathkar/react-native-lq-bottom-bar.git", :tag => "#{s.version}" }
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.swift_version = "5.0"
+
+  # React Native's own helper, not a bare `React-Core` dependency. With the
+  # new architecture on, a pod that touches React headers needs the whole
+  # Fabric/JSI header surface and its flags; `React-Core` alone leaves
+  # `jsi/jsi.h` off the search path and the failure then surfaces inside
+  # React's OWN targets, which looks like a broken app rather than a bad
+  # podspec.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+  end
+end