react-native-platform-components 1.3.0 → 1.5.0

package/lib/commonjs/TabBar.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabBar = TabBar;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _TabBarNativeComponent = _interopRequireDefault(require("./TabBarNativeComponent"));
+var _TabBarAccessoryNativeComponent = _interopRequireDefault(require("./TabBarAccessoryNativeComponent"));
+var _LiquidGlass = require("./LiquidGlass");
+var _labelStyle = require("./labelStyle");
+var _tabItems = require("./tabItems");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// TabBar.tsx
+
+/**
+ * How labels show under the icons.
+ *
+ * - `auto` (default): the platform default. iOS labels every tab; Android
+ *   labels every tab up to three, and only the selected one from four.
+ * - `labeled`: every tab shows its label.
+ * - `selected`: only the selected tab shows its label. Android only; iOS
+ *   labels every tab.
+ * - `unlabeled`: icons only. Screen readers still announce the labels.
+ */
+
+/**
+ * When the bar gets out of the way of scrolling content, following the
+ * ScrollView named by `scrollViewNativeID`.
+ *
+ * - `onScrollDown`: minimize while scrolling down, come back scrolling up.
+ * - `onScrollUp`: the reverse.
+ * - `automatic`: the platform default (iOS 26: minimize on scroll down).
+ * - `never`: always full size.
+ */
+
+/**
+ * Where the iOS 26 bottom accessory sits: `regular`, its own row above the
+ * bar, or `inline`, beside the minimized bar.
+ */
+
+/**
+ * Android: the tab layout. `vertical` puts the icon above the label,
+ * `horizontal` beside it (Material 3 Expressive, for wide bars), and `auto`
+ * picks horizontal when the bar is at least 600dp wide.
+ */
+
+/**
+ * Android: the shape of the active indicator. `pill` (default) has fully
+ * rounded ends; `circle` is a circle the indicator's height across; a number
+ * is the corner radius, in dp, of a rounded rectangle.
+ */
+
+/** Badge colors. Both default to the platform look. */
+
+function TabBar(props) {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    haptics,
+    labelVisibility,
+    activeTintColor,
+    inactiveTintColor,
+    barColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    minimizeBehavior,
+    scrollViewNativeID,
+    accessory,
+    onAccessoryEnvironmentChange,
+    android,
+    style,
+    ...viewProps
+  } = props;
+  if (__DEV__ && items.length > _tabItems.MAX_TAB_ITEMS) {
+    console.warn(`TabBar: ${items.length} tabs given; the platform tab bars show at most ${_tabItems.MAX_TAB_ITEMS}, so the rest are dropped.`);
+  }
+  const nativeItems = (0, _react.useMemo)(() => (0, _tabItems.toNativeTabItems)(items), [items]);
+  const handleTabPress = (0, _react.useCallback)(event => {
+    const {
+      index,
+      value,
+      reselected
+    } = event.nativeEvent;
+    if (reselected === 'true') {
+      onReselect?.(value, index);
+    } else {
+      onSelect?.(value, index);
+    }
+  }, [onSelect, onReselect]);
+  const nativeLabelStyle = (0, _react.useMemo)(() => (0, _labelStyle.normalizeLabelStyle)(labelStyle), [labelStyle]);
+
+  // --- Accessory ---
+  // iOS 26 hosts it in UIKit's accessory: the content mounts into the
+  // accessory view, laid out at the size and place native reports. Elsewhere
+  // it is a plain view above the bar.
+  const hasAccessory = accessory !== undefined && accessory !== null && accessory !== false;
+  const hostsAccessory = hasAccessory && _LiquidGlass.isLiquidGlassSupported;
+  const accessoryID = `pc-tab-accessory${(0, _react.useId)()}`;
+  const [accessoryFrame, setAccessoryFrame] = (0, _react.useState)(null);
+  const environment = (0, _react.useRef)('regular');
+  const handleAccessoryLayout = (0, _react.useCallback)(event => {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = event.nativeEvent;
+    setAccessoryFrame(current => current && current.x === x && current.y === y && current.width === width && current.height === height ? current : {
+      x,
+      y,
+      width,
+      height
+    });
+    const next = event.nativeEvent.environment === 'inline' ? 'inline' : 'regular';
+    if (next !== environment.current) {
+      environment.current = next;
+      onAccessoryEnvironmentChange?.(next);
+    }
+  }, [onAccessoryEnvironmentChange]);
+  const indicatorShape = android?.indicatorShape;
+  const bar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarNativeComponent.default, {
+    items: nativeItems,
+    selectedValue: selectedValue ?? '',
+    labelVisibility: labelVisibility ?? 'auto',
+    activeTintColor: activeTintColor,
+    inactiveTintColor: inactiveTintColor,
+    barColor: barColor,
+    badgeBackgroundColor: badgeStyle?.backgroundColor,
+    badgeTextColor: badgeStyle?.color,
+    labelStyle: nativeLabelStyle,
+    maxFontSizeMultiplier: maxFontSizeMultiplier ?? 0,
+    minimizeBehavior: minimizeBehavior ?? '',
+    scrollViewNativeID: scrollViewNativeID ?? '',
+    accessoryID: hasAccessory ? accessoryID : '',
+    androidIndicatorColor: android?.indicatorColor,
+    androidRippleColor: android?.rippleColor,
+    androidIndicator: android?.indicator === undefined ? '' : String(android.indicator),
+    androidIndicatorShape: typeof indicatorShape === 'number' ? 'rounded' : indicatorShape ?? '',
+    androidIndicatorCornerRadius: typeof indicatorShape === 'number' ? indicatorShape : 0,
+    androidIndicatorWidth: android?.indicatorWidth ?? 0,
+    androidIndicatorHeight: android?.indicatorHeight ?? 0,
+    androidItemLayout: android?.itemLayout ?? '',
+    haptics: haptics ?? '',
+    onTabPress: onSelect || onReselect ? handleTabPress : undefined,
+    onAccessoryLayout: hostsAccessory ? handleAccessoryLayout : undefined,
+    style: hasAccessory ? undefined : style,
+    ...viewProps
+  });
+  if (!hasAccessory) {
+    return bar;
+  }
+  if (hostsAccessory) {
+    // The inner view has no padding, so the accessory's offsets are in the
+    // bar's coordinates. The content's place in the layout matches where
+    // UIKit shows it, for touch handling that measures views.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: style,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        pointerEvents: "box-none",
+        children: [bar, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarAccessoryNativeComponent.default, {
+          accessoryID: accessoryID,
+          style: [styles.hostedAccessory, accessoryFrame ? {
+            left: accessoryFrame.x,
+            top: accessoryFrame.y,
+            width: accessoryFrame.width,
+            height: accessoryFrame.height
+          } : styles.accessoryPlaceholder],
+          children: accessory
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: style,
+    pointerEvents: "box-none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      nativeID: accessoryID,
+      collapsable: false,
+      children: accessory
+    }), bar]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  hostedAccessory: {
+    position: 'absolute'
+  },
+  // Until the first layout: the accessory's usual row across the bar
+  accessoryPlaceholder: {
+    left: 0,
+    right: 0,
+    top: 0,
+    height: 48
+  }
+});
+//# sourceMappingURL=TabBar.js.map

package/lib/commonjs/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_TabBarNativeComponent","_interopRequireDefault","_TabBarAccessoryNativeComponent","_LiquidGlass","_labelStyle","_tabItems","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TabBar","props","items","selectedValue","onSelect","onReselect","haptics","labelVisibility","activeTintColor","inactiveTintColor","barColor","badgeStyle","labelStyle","maxFontSizeMultiplier","minimizeBehavior","scrollViewNativeID","accessory","onAccessoryEnvironmentChange","android","style","viewProps","__DEV__","length","MAX_TAB_ITEMS","console","warn","nativeItems","useMemo","toNativeTabItems","handleTabPress","useCallback","event","index","value","reselected","nativeEvent","nativeLabelStyle","normalizeLabelStyle","hasAccessory","undefined","hostsAccessory","isLiquidGlassSupported","accessoryID","useId","accessoryFrame","setAccessoryFrame","useState","environment","useRef","handleAccessoryLayout","x","y","width","height","current","next","indicatorShape","bar","jsx","badgeBackgroundColor","backgroundColor","badgeTextColor","color","androidIndicatorColor","indicatorColor","androidRippleColor","rippleColor","androidIndicator","indicator","String","androidIndicatorShape","androidIndicatorCornerRadius","androidIndicatorWidth","indicatorWidth","androidIndicatorHeight","indicatorHeight","androidItemLayout","itemLayout","onTabPress","onAccessoryLayout","View","pointerEvents","children","jsxs","styles","hostedAccessory","left","top","accessoryPlaceholder","nativeID","collapsable","StyleSheet","create","position","right"],"sourceRoot":"../../src","sources":["TabBar.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAQA,IAAAE,sBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAIA,IAAAI,+BAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AAEA,IAAAM,WAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AAIoB,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAG,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAU,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAtBpB;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAGA;;AAoIO,SAASgB,MAAMA,CAACC,KAAkB,EAAsB;EAC7D,MAAM;IACJC,KAAK;IACLC,aAAa;IACbC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,eAAe;IACfC,eAAe;IACfC,iBAAiB;IACjBC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,qBAAqB;IACrBC,gBAAgB;IAChBC,kBAAkB;IAClBC,SAAS;IACTC,4BAA4B;IAC5BC,OAAO;IACPC,KAAK;IACL,GAAGC;EACL,CAAC,GAAGnB,KAAK;EAET,IAAIoB,OAAO,IAAInB,KAAK,CAACoB,MAAM,GAAGC,uBAAa,EAAE;IAC3CC,OAAO,CAACC,IAAI,CACV,WAAWvB,KAAK,CAACoB,MAAM,mDAAmDC,uBAAa,4BACzF,CAAC;EACH;EAEA,MAAMG,WAAW,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,0BAAgB,EAAC1B,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEnE,MAAM2B,cAAc,GAAG,IAAAC,kBAAW,EAC/BC,KAA8C,IAAK;IAClD,MAAM;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAW,CAAC,GAAGH,KAAK,CAACI,WAAW;IACtD,IAAID,UAAU,KAAK,MAAM,EAAE;MACzB7B,UAAU,GAAG4B,KAAK,EAAED,KAAK,CAAC;IAC5B,CAAC,MAAM;MACL5B,QAAQ,GAAG6B,KAAK,EAAED,KAAK,CAAC;IAC1B;EACF,CAAC,EACD,CAAC5B,QAAQ,EAAEC,UAAU,CACvB,CAAC;EAED,MAAM+B,gBAAgB,GAAG,IAAAT,cAAO,EAC9B,MAAM,IAAAU,+BAAmB,EAACzB,UAAU,CAAC,EACrC,CAACA,UAAU,CACb,CAAC;;EAED;EACA;EACA;EACA;EACA,MAAM0B,YAAY,GAChBtB,SAAS,KAAKuB,SAAS,IAAIvB,SAAS,KAAK,IAAI,IAAIA,SAAS,KAAK,KAAK;EACtE,MAAMwB,cAAc,GAAGF,YAAY,IAAIG,mCAAsB;EAC7D,MAAMC,WAAW,GAAG,mBAAmB,IAAAC,YAAK,EAAC,CAAC,EAAE;EAChD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAClD,IACF,CAAC;EACD,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAA6B,SAAS,CAAC;EAEjE,MAAMC,qBAAqB,GAAG,IAAAnB,kBAAW,EACtCC,KAAuD,IAAK;IAC3D,MAAM;MAAEmB,CAAC;MAAEC,CAAC;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGtB,KAAK,CAACI,WAAW;IACjDU,iBAAiB,CAAES,OAAO,IACxBA,OAAO,IACPA,OAAO,CAACJ,CAAC,KAAKA,CAAC,IACfI,OAAO,CAACH,CAAC,KAAKA,CAAC,IACfG,OAAO,CAACF,KAAK,KAAKA,KAAK,IACvBE,OAAO,CAACD,MAAM,KAAKA,MAAM,GACrBC,OAAO,GACP;MAAEJ,CAAC;MAAEC,CAAC;MAAEC,KAAK;MAAEC;IAAO,CAC5B,CAAC;IACD,MAAME,IAAgC,GACpCxB,KAAK,CAACI,WAAW,CAACY,WAAW,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS;IACnE,IAAIQ,IAAI,KAAKR,WAAW,CAACO,OAAO,EAAE;MAChCP,WAAW,CAACO,OAAO,GAAGC,IAAI;MAC1BtC,4BAA4B,GAAGsC,IAAI,CAAC;IACtC;EACF,CAAC,EACD,CAACtC,4BAA4B,CAC/B,CAAC;EAED,MAAMuC,cAAc,GAAGtC,OAAO,EAAEsC,cAAc;EAE9C,MAAMC,GAAG,gBACP,IAAA7E,WAAA,CAAA8E,GAAA,EAACpF,sBAAA,CAAAS,OAAY;IACXmB,KAAK,EAAEwB,WAAY;IACnBvB,aAAa,EAAEA,aAAa,IAAI,EAAG;IACnCI,eAAe,EAAEA,eAAe,IAAI,MAAO;IAC3CC,eAAe,EAAEA,eAAgB;IACjCC,iBAAiB,EAAEA,iBAAkB;IACrCC,QAAQ,EAAEA,QAAS;IACnBiD,oBAAoB,EAAEhD,UAAU,EAAEiD,eAAgB;IAClDC,cAAc,EAAElD,UAAU,EAAEmD,KAAM;IAClClD,UAAU,EAAEwB,gBAAiB;IAC7BvB,qBAAqB,EAAEA,qBAAqB,IAAI,CAAE;IAClDC,gBAAgB,EAAEA,gBAAgB,IAAI,EAAG;IACzCC,kBAAkB,EAAEA,kBAAkB,IAAI,EAAG;IAC7C2B,WAAW,EAAEJ,YAAY,GAAGI,WAAW,GAAG,EAAG;IAC7CqB,qBAAqB,EAAE7C,OAAO,EAAE8C,cAAe;IAC/CC,kBAAkB,EAAE/C,OAAO,EAAEgD,WAAY;IACzCC,gBAAgB,EACdjD,OAAO,EAAEkD,SAAS,KAAK7B,SAAS,GAAG,EAAE,GAAG8B,MAAM,CAACnD,OAAO,CAACkD,SAAS,CACjE;IACDE,qBAAqB,EACnB,OAAOd,cAAc,KAAK,QAAQ,GAAG,SAAS,GAAIA,cAAc,IAAI,EACrE;IACDe,4BAA4B,EAC1B,OAAOf,cAAc,KAAK,QAAQ,GAAGA,cAAc,GAAG,CACvD;IACDgB,qBAAqB,EAAEtD,OAAO,EAAEuD,cAAc,IAAI,CAAE;IACpDC,sBAAsB,EAAExD,OAAO,EAAEyD,eAAe,IAAI,CAAE;IACtDC,iBAAiB,EAAE1D,OAAO,EAAE2D,UAAU,IAAI,EAAG;IAC7CvE,OAAO,EAAEA,OAAO,IAAI,EAAG;IACvBwE,UAAU,EAAE1E,QAAQ,IAAIC,UAAU,GAAGwB,cAAc,GAAGU,SAAU;IAChEwC,iBAAiB,EAAEvC,cAAc,GAAGS,qBAAqB,GAAGV,SAAU;IACtEpB,KAAK,EAAEmB,YAAY,GAAGC,SAAS,GAAGpB,KAAM;IAAA,GACpCC;EAAS,CACd,CACF;EAED,IAAI,CAACkB,YAAY,EAAE;IACjB,OAAOmB,GAAG;EACZ;EAEA,IAAIjB,cAAc,EAAE;IAClB;IACA;IACA;IACA,oBACE,IAAA5D,WAAA,CAAA8E,GAAA,EAACrF,YAAA,CAAA2G,IAAI;MAAC7D,KAAK,EAAEA,KAAM;MAAC8D,aAAa,EAAC,UAAU;MAAAC,QAAA,eAC1C,IAAAtG,WAAA,CAAAuG,IAAA,EAAC9G,YAAA,CAAA2G,IAAI;QAACC,aAAa,EAAC,UAAU;QAAAC,QAAA,GAC3BzB,GAAG,eACJ,IAAA7E,WAAA,CAAA8E,GAAA,EAAClF,+BAAA,CAAAO,OAAqB;UACpB2D,WAAW,EAAEA,WAAY;UACzBvB,KAAK,EAAE,CACLiE,MAAM,CAACC,eAAe,EACtBzC,cAAc,GACV;YACE0C,IAAI,EAAE1C,cAAc,CAACM,CAAC;YACtBqC,GAAG,EAAE3C,cAAc,CAACO,CAAC;YACrBC,KAAK,EAAER,cAAc,CAACQ,KAAK;YAC3BC,MAAM,EAAET,cAAc,CAACS;UACzB,CAAC,GACD+B,MAAM,CAACI,oBAAoB,CAC/B;UAAAN,QAAA,EAEDlE;QAAS,CACW,CAAC;MAAA,CACpB;IAAC,CACH,CAAC;EAEX;EAEA,oBACE,IAAApC,WAAA,CAAAuG,IAAA,EAAC9G,YAAA,CAAA2G,IAAI;IAAC7D,KAAK,EAAEA,KAAM;IAAC8D,aAAa,EAAC,UAAU;IAAAC,QAAA,gBAC1C,IAAAtG,WAAA,CAAA8E,GAAA,EAACrF,YAAA,CAAA2G,IAAI;MAACS,QAAQ,EAAE/C,WAAY;MAACgD,WAAW,EAAE,KAAM;MAAAR,QAAA,EAC7ClE;IAAS,CACN,CAAC,EACNyC,GAAG;EAAA,CACA,CAAC;AAEX;AAEA,MAAM2B,MAAM,GAAGO,uBAAU,CAACC,MAAM,CAAC;EAC/BP,eAAe,EAAE;IAAEQ,QAAQ,EAAE;EAAW,CAAC;EACzC;EACAL,oBAAoB,EAAE;IAAEF,IAAI,EAAE,CAAC;IAAEQ,KAAK,EAAE,CAAC;IAAEP,GAAG,EAAE,CAAC;IAAElC,MAAM,EAAE;EAAG;AAChE,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/TabBarAccessoryNativeComponent.ts

@@ -0,0 +1,19 @@
+// TabBarAccessoryNativeComponent.ts
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * The content of a TabBar's bottom accessory on iOS 26. Its children are
+ * mounted into the view UIKit shows as the tab bar's accessory, found by the
+ * bar through `accessoryID`; this view itself stays empty in the layout.
+ */
+export interface TabBarAccessoryNativeProps extends ViewProps {
+  /** The id the TabBar links to; '' = not linked. */
+  accessoryID: string;
+}
+
+export default codegenNativeComponent<TabBarAccessoryNativeProps>(
+  'PCTabBarAccessory',
+  // Only iOS 26 hosts the accessory; Android renders a plain view
+  { excludedPlatforms: ['android'] }
+) as HostComponent<TabBarAccessoryNativeProps>;

package/lib/commonjs/TabBarNativeComponent.ts

@@ -0,0 +1,145 @@
+// TabBarNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type {
+  BubblingEventHandler,
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from './codegenTypes';
+
+/**
+ * A single tab. Icons are pre-resolved on the JS side (see icons.ts), the
+ * selected icon under the `selected…` fields; empty strings mean "none".
+ */
+export type TabBarItem = Readonly<{
+  label: string;
+  value: string;
+  disabled: string; // 'enabled' | 'disabled'
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string;
+  iconRequest: string;
+  iconUri: string;
+  iconScale: Double;
+  iconTinted: string; // 'true' | 'false'
+  selectedIconType: string;
+  selectedIconName: string;
+  selectedIconRequest: string;
+  selectedIconUri: string;
+  selectedIconScale: Double;
+  selectedIconTinted: string;
+  badge: string; // badge text, '' = no badge
+  accessibilityLabel: string; // '' = the label
+  testID: string; // '' = none
+  role: string; // '' | 'search'
+  systemItem: string; // '' | a UITabBarItem.SystemItem name ('favorites', …)
+}>;
+
+/** A press on a tab. `reselected` is 'true' when the tab was already selected. */
+export type TabBarSelectEvent = Readonly<{
+  index: Int32;
+  value: string;
+  reselected: string; // 'true' | 'false'
+}>;
+
+/**
+ * iOS 26: where the hosted bottom accessory sits, in the bar's coordinates,
+ * and its environment.
+ */
+export type TabBarAccessoryLayoutEvent = Readonly<{
+  x: Double;
+  y: Double;
+  width: Double;
+  height: Double;
+  environment: string; // 'regular' | 'inline'
+}>;
+
+/** Label font. Empty strings / 0 mean "platform default". */
+export type TabBarLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string;
+  fontStyle?: string;
+}>;
+
+export interface TabBarNativeProps extends ViewProps {
+  /** The tabs. */
+  items: ReadonlyArray<TabBarItem>;
+
+  /** Selected tab by value; '' = none. */
+  selectedValue?: WithDefault<string, ''>;
+
+  /** 'auto' | 'labeled' | 'selected' | 'unlabeled' */
+  labelVisibility?: string;
+
+  /** Icon and label color of the selected tab. */
+  activeTintColor?: ColorValue;
+
+  /** Icon and label color of the other tabs. */
+  inactiveTintColor?: ColorValue;
+
+  /** Bar background; transparent to show what is behind. */
+  barColor?: ColorValue;
+
+  /** Badge colors. */
+  badgeBackgroundColor?: ColorValue;
+  badgeTextColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: TabBarLabelStyleProps;
+
+  /** Largest font scale the labels may reach; 0 = no cap. */
+  maxFontSizeMultiplier?: Double;
+
+  /** '' | 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp' */
+  minimizeBehavior?: string;
+
+  /** nativeID of the ScrollView whose scrolling minimizes the bar. */
+  scrollViewNativeID?: string;
+
+  /** Android: the active indicator pill behind the selected icon. */
+  androidIndicatorColor?: ColorValue;
+
+  /** Android: ripple shown while pressing a tab. */
+  androidRippleColor?: ColorValue;
+
+  /** Android: 'true' | 'false' ('' = shown), the active indicator. */
+  androidIndicator?: string;
+
+  /** Android: '' (pill) | 'pill' | 'circle' | 'rounded' (androidIndicatorCornerRadius). */
+  androidIndicatorShape?: string;
+
+  /** Android: corner radius of a 'rounded' indicator, in dp. */
+  androidIndicatorCornerRadius?: Double;
+
+  /** Android: indicator size in dp; 0 = the Material default. */
+  androidIndicatorWidth?: Double;
+  androidIndicatorHeight?: Double;
+
+  /** Android: '' | 'vertical' | 'horizontal' | 'auto', icon above or beside the label. */
+  androidItemLayout?: string;
+
+  /**
+   * Links the bar to its accessory view (PCTabBarAccessory with the same
+   * id): iOS 26 hosts it as the tab bar's bottom accessory; Android slides
+   * it away with the bar. '' = none.
+   */
+  accessoryID?: string;
+
+  /**
+   * Haptic played when a tab is pressed: '' (none added) | 'none' | 'selection' |
+   * 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error'
+   */
+  haptics?: string;
+
+  /** Fired when a tab is pressed. */
+  onTabPress?: BubblingEventHandler<TabBarSelectEvent>;
+
+  /** iOS 26: the hosted accessory moved, resized or changed environment. */
+  onAccessoryLayout?: DirectEventHandler<TabBarAccessoryLayoutEvent>;
+}
+
+export default codegenNativeComponent<TabBarNativeProps>(
+  'PCTabBar'
+) as HostComponent<TabBarNativeProps>;