@expokit/cli 0.4.0 → 0.4.2

package/registry/floating-input/files/src/components/ui/floating-input.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Platform,
@@ -85,6 +86,9 @@ export const FLOATING_INPUT_SIZES = {
   md: { height: 54, font: 16, floated: 12.5, padX: 16, icon: 18, radius: 0 },
   lg: { height: 64, font: 18, floated: 13.5, padX: 18, icon: 20, radius: 4 },
 };
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const HALO = 4;
 /** Font size of the static label used when `floatingLabel` is false. */
 const LABEL_ABOVE_FONT = { sm: 13, md: 14, lg: 14.5 };
@@ -166,6 +170,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
   ref
 ) {
   const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const S = FLOATING_INPUT_SIZES[size];
   // The user's border colour only replaces the resting one; numeric height / radius drive the layout maths.
@@ -200,29 +205,36 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
   const check = useRef(new Animated.Value(ok ? 1 : 0)).current; // native
 
   useEffect(() => {
-    Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [floating, float]);
+    if (reduce) float.setValue(floating ? 1 : 0);
+    else Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [floating, float, reduce]);
 
   useEffect(() => {
     Animated.timing(focus, { toValue: isFocused ? 1 : 0, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
-    Animated.spring(glow, { toValue: isFocused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [isFocused, focus, glow]);
+    // Reduce Motion: halo and indicator bar only fade (their scales are pinned below).
+    if (reduce) Animated.timing(glow, { toValue: isFocused ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(glow, { toValue: isFocused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [isFocused, focus, glow, reduce]);
 
   useEffect(() => {
-    Animated.spring(clear, { toValue: clearable && text && editable ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [clearable, text, editable, clear]);
+    const to = clearable && text && editable ? 1 : 0;
+    if (reduce) Animated.timing(clear, { toValue: to, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(clear, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [clearable, text, editable, clear, reduce]);
 
   useEffect(() => {
-    Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [ok, check]);
+    if (reduce) Animated.timing(check, { toValue: ok ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [ok, check, reduce]);
 
   useEffect(() => {
-    if (!error) return;
+    // Reduce Motion: no shake; the red border and message still flag the error.
+    if (!error || reduce) return;
     shake.setValue(0);
     Animated.sequence(
       [10, -8, 6, -4, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 55, useNativeDriver: true }))
     ).start();
-  }, [error, shake]);
+  }, [error, shake, reduce]);
 
   const setText = (next: string) => {
     if (value === undefined) setInner(next);
@@ -310,23 +322,24 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
                 borderRadius: corner + HALO,
                 backgroundColor: active,
                 opacity: glow.interpolate({ inputRange: [0, 1], outputRange: [0, 0.18], extrapolate: 'clamp' }),
-                transform: [{ scale: glow.interpolate({ inputRange: [0, 1], outputRange: [0.97, 1] }) }],
+                transform: [{ scale: glow.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.97, 1] }) }],
               },
             ]}
           />
         )}
         <Pressable onPress={() => inputRef.current?.focus()} disabled={!editable} accessible={false}>
-          <Animated.View style={[styles.field, boxStyle, { height: HEIGHT }, userField, { borderColor }]}>
+          <Animated.View style={[styles.field, boxStyle, { minHeight: HEIGHT }, userField, { borderColor }]}>
             {left ? <View style={[styles.left, { left: underline ? 2 : S.padX - 2 }, underline && { top: contentTop }]}>{left}</View> : null}
             <View style={[styles.row, { paddingLeft: leftPad, paddingRight: rightPad, paddingTop: contentTop }]}>
               {prefix ? (
-                <Animated.Text style={[styles.affix, styles.prefix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, prefixStyle, { opacity: affixOpacity }]}>
+                <Animated.Text maxFontSizeMultiplier={FONT_CAP} style={[styles.affix, styles.prefix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, prefixStyle, { opacity: affixOpacity }]}>
                   {prefix}
                 </Animated.Text>
               ) : null}
               <TextInput
                 ref={inputRef}
                 accessibilityLabel={label}
+                maxFontSizeMultiplier={FONT_CAP}
                 {...props}
                 maxLength={maxLength}
                 editable={editable}
@@ -347,7 +360,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
                 style={[styles.input, ff, { color: colors.foreground, fontSize: S.font }, inputStyle, NO_WEB_OUTLINE]}
               />
               {suffix ? (
-                <Animated.Text style={[styles.affix, styles.suffix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, suffixStyle, { opacity: affixOpacity }]}>
+                <Animated.Text maxFontSizeMultiplier={FONT_CAP} style={[styles.affix, styles.suffix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, suffixStyle, { opacity: affixOpacity }]}>
                   {suffix}
                 </Animated.Text>
               ) : null}
@@ -358,6 +371,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
                 style={[styles.labelWrap, { left: leftPad, right: right ? adorn : S.padX - 4, top: contentTop, height: HEIGHT - contentTop }, labelStyle]}
               >
                 <Animated.Text
+                  maxFontSizeMultiplier={FONT_CAP}
                   numberOfLines={1}
                   style={[
                     styles.label,
@@ -380,7 +394,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
             ) : null}
             {clearable ? (
               <Animated.View
-                style={[styles.slot, { right: edge, top: contentTop, opacity: clear, transform: [{ scale: clear }] }]}
+                style={[styles.slot, { right: edge, top: contentTop, opacity: clear, transform: [{ scale: reduce ? 1 : clear }] }]}
                 pointerEvents={text && editable ? 'box-none' : 'none'}
               >
                 <Pressable
@@ -408,8 +422,8 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
                   top: contentTop,
                   opacity: check.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
                   transform: [
-                    { scale: check.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) },
-                    { rotate: check.interpolate({ inputRange: [0, 1], outputRange: ['-30deg', '0deg'] }) },
+                    { scale: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.3, 1] }) },
+                    { rotate: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? '0deg' : '-30deg', '0deg'] }) },
                   ],
                 },
               ]}
@@ -423,10 +437,14 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
             {outlined ? null : (
               <>
                 <View pointerEvents="none" style={[styles.baseLine, { height: underline ? 1.5 : 1, backgroundColor: rest }]} />
-                {/* Grows out from the centre on focus. */}
+                {/* Grows out from the centre on focus (fades in with Reduce Motion). */}
                 <Animated.View
                   pointerEvents="none"
-                  style={[styles.bar, { backgroundColor: active, transform: [{ scaleX: glowClamped }] }]}
+                  style={[
+                    styles.bar,
+                    { backgroundColor: active },
+                    reduce ? { opacity: glowClamped } : { transform: [{ scaleX: glowClamped }] },
+                  ]}
                 />
               </>
             )}
@@ -436,10 +454,11 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
       {message || showCounter ? (
         <View style={[styles.footer, underline && styles.footerFlush]}>
           <View style={styles.messageSlot}>
-            {message ? <FieldMessage key={tone + message} text={message} tone={tone} color={toneColor} style={messageStyle} /> : null}
+            {message ? <FieldMessage key={tone + message} text={message} tone={tone} color={toneColor} style={messageStyle} reduce={reduce} /> : null}
           </View>
           {showCounter ? (
             <Text
+              maxFontSizeMultiplier={FONT_CAP}
               style={[
                 styles.count,
                 ff,
@@ -459,13 +478,27 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
 
 type MessageTone = 'error' | 'success' | 'helper';
 
-/** Helper / error / success line. Error and success slide up and fade in. */
-function FieldMessage({ text, tone, color, style }: { text: string; tone: MessageTone; color: string; style?: StyleProp<TextStyle> }) {
+/** Helper / error / success line. Error and success slide up and fade in (only fade with Reduce Motion). */
+function FieldMessage({
+  text,
+  tone,
+  color,
+  style,
+  reduce,
+}: {
+  text: string;
+  tone: MessageTone;
+  color: string;
+  style?: StyleProp<TextStyle>;
+  reduce: boolean;
+}) {
   const { font } = useKit();
   const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
   useEffect(() => {
-    if (tone !== 'helper') Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [tone, enter]);
+    if (tone === 'helper') return;
+    if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [tone, enter, reduce]);
 
   return (
     <Animated.View
@@ -473,7 +506,7 @@ function FieldMessage({ text, tone, color, style }: { text: string; tone: Messag
         styles.message,
         {
           opacity: enter.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-          transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }],
+          transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 4, 0] }) }],
         },
       ]}
     >
@@ -510,11 +543,27 @@ function flattenView(style: StyleProp<ViewStyle>): ViewStyle {
   return style as ViewStyle;
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   disabled: { opacity: 0.5 },
   halo: { position: 'absolute', top: -HALO, left: -HALO, right: -HALO, bottom: -HALO },
   field: { justifyContent: 'center' },
-  row: { flexDirection: 'row', alignItems: 'center', height: '100%' },
+  row: { flexDirection: 'row', alignItems: 'center', flexGrow: 1 },
   input: { flex: 1, alignSelf: 'stretch', paddingVertical: 0, paddingHorizontal: 0 },
   affix: { fontWeight: '400' },
   prefix: { marginRight: 4 },

package/registry/liquidglass-tab/files/src/app/(tabs)/_layout.tsx

@@ -1,97 +1,6 @@
-import React from 'react';
-import { DynamicColorIOS, Platform } from 'react-native';
-import { Tabs } from 'expo-router/js-tabs';
-// SDK 54–57 path. On SDK 58+ change this to 'expo-router/native-tabs'.
-import { NativeTabs } from 'expo-router/unstable-native-tabs';
-
-import { GlassTabBar } from '@/components/GlassTabBar';
-import { USE_NATIVE_TABS } from '@/lib/tab-bar';
-import {
-  asFamily,
-  resolveIconLibrary,
-  resolveIconNames,
-  TAB_BAR,
-  TABS,
-  type TabItem,
-} from '@/lib/tabs';
-
-type IconProps = React.ComponentProps<typeof NativeTabs.Trigger.Icon>;
-
-function dynamicColor(pair: { light: string; dark: string }) {
-  return Platform.OS === 'ios' ? DynamicColorIOS(pair) : pair.light;
-}
-
-/** Vector-font icon rasterised for the native bar (Android, or iOS when no SF Symbol is set). */
-function vectorSrc(tab: TabItem) {
-  const library = resolveIconLibrary(tab);
-  const { name, selected } = resolveIconNames(tab);
-  if (!library || !name) return undefined;
-
-  const family = asFamily(library);
-  const icon = <NativeTabs.Trigger.VectorIcon family={family} name={name} />;
-  if (!selected) return icon;
-  return { default: icon, selected: <NativeTabs.Trigger.VectorIcon family={family} name={selected} /> };
-}
-
-/**
- * Returns the Icon element itself (not a wrapper component): NativeTabs reads its
- * children by type, so <NativeTabs.Trigger.Icon> must be a direct child of the Trigger.
- */
-function nativeIcon(tab: TabItem, tint: IconProps['selectedColor']) {
-  const src = tab.src ?? vectorSrc(tab);
-  if (!tab.sf && !src) return null;
-  // sf wins on iOS, src is used on Android.
-  const props = { sf: tab.sf, src, selectedColor: tint } as IconProps;
-  return <NativeTabs.Trigger.Icon {...props} />;
-}
-
-function NativeTabLayout() {
-  const tint = dynamicColor(TAB_BAR.colors.tint);
-  const inactive = dynamicColor(TAB_BAR.colors.inactive);
-  const { fontSize, fontWeight, selectedFontWeight } = TAB_BAR.labelStyle;
-
-  return (
-    <NativeTabs
-      tintColor={tint}
-      iconColor={inactive}
-      labelVisibilityMode={TAB_BAR.labelVisibilityMode}
-      minimizeBehavior={TAB_BAR.minimizeBehavior}
-      labelStyle={{ color: inactive, fontSize, fontWeight }}
-      {...(TAB_BAR.backgroundColor != null ? { backgroundColor: TAB_BAR.backgroundColor } : null)}
-    >
-      {TABS.map((tab) => (
-        <NativeTabs.Trigger key={tab.name} name={tab.name} hidden={tab.hidden}>
-          {nativeIcon(tab, tint)}
-          <NativeTabs.Trigger.Label
-            hidden={tab.hiddenLabel}
-            selectedStyle={{ color: tint, fontSize, fontWeight: selectedFontWeight }}
-          >
-            {tab.title}
-          </NativeTabs.Trigger.Label>
-          {tab.badge ? <NativeTabs.Trigger.Badge>{tab.badge}</NativeTabs.Trigger.Badge> : null}
-        </NativeTabs.Trigger>
-      ))}
-    </NativeTabs>
-  );
-}
-
-function GlassTabLayout() {
-  return (
-    <Tabs
-      tabBar={(props) => <GlassTabBar {...props} />}
-      screenOptions={{ headerShown: false, animation: 'fade' }}
-    >
-      {TABS.map((tab) => (
-        <Tabs.Screen
-          key={tab.name}
-          name={tab.name}
-          options={{ title: tab.title, href: tab.hidden ? null : undefined }}
-        />
-      ))}
-    </Tabs>
-  );
-}
+import { LiquidGlassTabs } from '@/components/LiquidGlassTabs';
 
+// Tabs, icons and colours live in lib/tabs.ts. Auth redirects etc. go here, before the return.
 export default function TabLayout() {
-  return USE_NATIVE_TABS ? <NativeTabLayout /> : <GlassTabLayout />;
+  return <LiquidGlassTabs />;
 }

package/registry/liquidglass-tab/files/src/app/(tabs)/alerts.tsx

@@ -1,5 +1,6 @@
 import { TabScreenFromConfig } from '@/components/TabScreen';
 
 export default function AlertsScreen() {
-  return <TabScreenFromConfig tabName="alerts" />;
+  // The button is pinned with useTabBarInset(), so it clears the floating bar on every OS.
+  return <TabScreenFromConfig tabName="alerts" action="Mark all as read" />;
 }

package/registry/liquidglass-tab/files/src/app/_layout.tsx

@@ -3,8 +3,8 @@ import React, { useEffect } from 'react';
 import { StyleSheet, useColorScheme } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-// SDK 56+: navigation themes come from expo-router itself. Using @react-navigation/native's
-// ThemeProvider here does nothing (expo-router ships its own copy) and causes a white flash.
+// Navigation themes: from 'expo-router' on SDK 56+ (it ships its own copy, so the
+// @react-navigation/native ThemeProvider would do nothing there), '@react-navigation/native' on SDK 54–55.
 import { DarkTheme, DefaultTheme, Slot, ThemeProvider } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 

package/registry/liquidglass-tab/files/src/components/GlassTabBar.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { BlurView } from 'expo-blur';
 import * as Haptics from 'expo-haptics';
+// '@react-navigation/bottom-tabs' on SDK 54–55 (the CLI writes the right one).
 import type { BottomTabBarProps } from 'expo-router/js-tabs';
 
 import { GLASS_BAR_HEIGHT, setTabBarCollapsed, tabBarCollapse } from '@/lib/tab-bar';
@@ -157,7 +158,7 @@ function TabButton({
 }) {
   const press = useRef(new Animated.Value(1)).current;
   const to = (v: number) =>
-    Animated.spring(press, { toValue: v, useNativeDriver: true, speed: 40, bounciness: 10 }).start();
+    Animated.spring(press, { toValue: v, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
 
   return (
     <Pressable

package/registry/liquidglass-tab/files/src/components/LiquidGlassTabs.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { DynamicColorIOS, Platform } from 'react-native';
+// Written for your Expo SDK by `npx @expokit/cli add liquidglass-tab` (SDK 54–55: Tabs from
+// 'expo-router'; SDK 58+: NativeTabs from 'expo-router/native-tabs'). `update` keeps it in sync.
+import { Tabs } from 'expo-router/js-tabs';
+import { NativeTabs } from 'expo-router/unstable-native-tabs';
+
+import { GlassTabBar } from '@/components/GlassTabBar';
+import { USE_NATIVE_TABS } from '@/lib/tab-bar';
+import {
+  asFamily,
+  resolveIconLibrary,
+  resolveIconNames,
+  TAB_BAR,
+  TABS,
+  type TabItem,
+} from '@/lib/tabs';
+
+type IconProps = React.ComponentProps<typeof NativeTabs.Trigger.Icon>;
+
+function dynamicColor(pair: { light: string; dark: string }) {
+  return Platform.OS === 'ios' ? DynamicColorIOS(pair) : pair.light;
+}
+
+/** Vector-font icon rasterised for the native bar (Android, or iOS when no SF Symbol is set). */
+function vectorSrc(tab: TabItem) {
+  const library = resolveIconLibrary(tab);
+  const { name, selected } = resolveIconNames(tab);
+  if (!library || !name) return undefined;
+
+  const family = asFamily(library);
+  const icon = <NativeTabs.Trigger.VectorIcon family={family} name={name} />;
+  if (!selected) return icon;
+  return { default: icon, selected: <NativeTabs.Trigger.VectorIcon family={family} name={selected} /> };
+}
+
+/**
+ * Returns the Icon element itself (not a wrapper component): NativeTabs reads its
+ * children by type, so the Icon must be a direct child of the Trigger.
+ */
+function nativeIcon(tab: TabItem, tint: IconProps['selectedColor']) {
+  // SF Symbol on iOS when set; otherwise the image / vector icon (always on Android).
+  if (Platform.OS === 'ios' && tab.sf) {
+    return <NativeTabs.Trigger.Icon {...({ sf: tab.sf, selectedColor: tint } as IconProps)} />;
+  }
+  const src = tab.src ?? vectorSrc(tab);
+  if (!src) return null;
+  return <NativeTabs.Trigger.Icon {...({ src, selectedColor: tint } as IconProps)} />;
+}
+
+function NativeTabLayout() {
+  const tint = dynamicColor(TAB_BAR.colors.tint);
+  const inactive = dynamicColor(TAB_BAR.colors.inactive);
+  const { fontSize, fontWeight, selectedFontWeight } = TAB_BAR.labelStyle;
+
+  return (
+    <NativeTabs
+      tintColor={tint}
+      iconColor={inactive}
+      labelVisibilityMode={TAB_BAR.labelVisibilityMode}
+      minimizeBehavior={TAB_BAR.minimizeBehavior}
+      labelStyle={{ color: inactive, fontSize, fontWeight }}
+      {...(TAB_BAR.backgroundColor != null ? { backgroundColor: TAB_BAR.backgroundColor } : null)}
+    >
+      {TABS.map((tab) => (
+        <NativeTabs.Trigger key={tab.name} name={tab.name} hidden={tab.hidden}>
+          {nativeIcon(tab, tint)}
+          <NativeTabs.Trigger.Label
+            hidden={tab.hiddenLabel}
+            selectedStyle={{ color: tint, fontSize, fontWeight: selectedFontWeight }}
+          >
+            {tab.title}
+          </NativeTabs.Trigger.Label>
+          {tab.badge ? <NativeTabs.Trigger.Badge>{tab.badge}</NativeTabs.Trigger.Badge> : null}
+        </NativeTabs.Trigger>
+      ))}
+    </NativeTabs>
+  );
+}
+
+function GlassTabLayout() {
+  return (
+    <Tabs
+      tabBar={(props) => <GlassTabBar {...props} />}
+      screenOptions={{ headerShown: false, animation: 'fade' }}
+    >
+      {TABS.map((tab) => (
+        <Tabs.Screen
+          key={tab.name}
+          name={tab.name}
+          options={{ title: tab.title, href: tab.hidden ? null : undefined }}
+        />
+      ))}
+    </Tabs>
+  );
+}
+
+/**
+ * The whole tab bar, driven by lib/tabs.ts: system NativeTabs with real Liquid Glass on
+ * iOS 26+, the floating glass fallback everywhere else. Render it from the layout that owns
+ * your tab routes — app/(tabs)/_layout.tsx — after any redirects:
+ *
+ *   export default function TabLayout() {
+ *     if (!signedIn) return <Redirect href="/sign-in" />;
+ *     return <LiquidGlassTabs />;
+ *   }
+ */
+export function LiquidGlassTabs() {
+  return USE_NATIVE_TABS ? <NativeTabLayout /> : <GlassTabLayout />;
+}

package/registry/liquidglass-tab/files/src/components/TabScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Pressable,
   ScrollView,
   StyleSheet,
   Text,
@@ -15,13 +16,17 @@ interface TabScreenProps {
   title: string;
   description: string;
   accent: string;
+  /** Label of a button pinned to the bottom of the screen, above the tab bar. */
+  action?: string;
 }
 
-export function TabScreen({ title, description, accent }: TabScreenProps) {
+export function TabScreen({ title, description, accent, action }: TabScreenProps) {
   const isDark = useColorScheme() === 'dark';
   const insets = useSafeAreaInsets();
   const onScroll = useTabBarScroll();
-  const bottomInset = useTabBarInset();
+  const bottomInset = useTabBarInset(24);
+  // Bottom-anchored UI sits on top of the bar's footprint, not on the screen edge.
+  const actionBottom = useTabBarInset(12);
   const bg = isDark ? '#0f0f1a' : '#f2f2f7';
   const text = isDark ? '#fff' : '#1c1c1e';
   const sub = isDark ? '#9898a8' : '#6c6c70';
@@ -32,11 +37,11 @@ export function TabScreen({ title, description, accent }: TabScreenProps) {
         style={{ flex: 1, backgroundColor: bg }}
         contentContainerStyle={[
           styles.scroll,
-          { paddingTop: USE_NATIVE_TABS ? 12 : insets.top + 12, paddingBottom: bottomInset },
+          { paddingTop: insets.top + 12, paddingBottom: bottomInset },
         ]}
         showsVerticalScrollIndicator={false}
-        // Native tabs inset content for the system bars; the glass fallback pads it manually.
-        contentInsetAdjustmentBehavior={USE_NATIVE_TABS ? 'automatic' : 'never'}
+        // Pad by hand on every bar: useTabBarInset() already counts the floating bar and home indicator.
+        contentInsetAdjustmentBehavior="never"
         scrollEventThrottle={16}
         onScroll={onScroll}
       >
@@ -64,12 +69,21 @@ export function TabScreen({ title, description, accent }: TabScreenProps) {
             </Text>
           </View>
         ))}
+        {action ? <View style={{ height: 64 }} /> : null}
       </ScrollView>
+      {action ? (
+        <Pressable
+          accessibilityRole="button"
+          style={({ pressed }) => [styles.action, { bottom: actionBottom, backgroundColor: accent, opacity: pressed ? 0.85 : 1 }]}
+        >
+          <Text style={styles.actionText}>{action}</Text>
+        </Pressable>
+      ) : null}
     </View>
   );
 }
 
-export function TabScreenFromConfig({ tabName }: { tabName: string }) {
+export function TabScreenFromConfig({ tabName, action }: { tabName: string; action?: string }) {
   const tab = getTab(tabName);
   if (!tab) {
     return null;
@@ -83,6 +97,7 @@ export function TabScreenFromConfig({ tabName }: { tabName: string }) {
         'Scroll to test native tab bar minimize behavior on iOS 26+.'
       }
       accent={tab.accent ?? '#6366f1'}
+      action={action}
     />
   );
 }
@@ -119,4 +134,14 @@ const styles = StyleSheet.create({
   },
   cardTitle: { fontSize: 17, fontWeight: '400' },
   cardSub: { fontSize: 14, marginTop: 4, lineHeight: 20 },
+  action: {
+    position: 'absolute',
+    left: 20,
+    right: 20,
+    height: 50,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionText: { color: '#fff', fontSize: 16, fontWeight: '500' },
 });

package/registry/liquidglass-tab/files/src/lib/tab-bar.ts

@@ -53,9 +53,17 @@ export function useTabBarScroll() {
   }, []);
 }
 
-/** Bottom padding a scrolling screen needs so its last row clears the floating bar. */
-export function useTabBarInset() {
+/**
+ * How far the tab bar covers the bottom of a screen, plus `gap`. Both bars float over the
+ * content — iOS 26's Liquid Glass bar and the glass fallback — so use it for anything that
+ * reaches the bottom edge: a ScrollView's paddingBottom (with
+ * contentInsetAdjustmentBehavior="never"), a bottom-anchored button's `bottom`, or the
+ * paddingBottom of a full-screen layout. Android's system bar (TAB_BAR.legacy = 'native')
+ * sits below the content, so there it is just `gap`.
+ */
+export function useTabBarInset(gap = 8) {
   const insets = useSafeAreaInsets();
-  if (USE_NATIVE_TABS) return 24;
-  return GLASS_BAR_HEIGHT + Math.max(insets.bottom, 12) + 24;
+  if (USE_NATIVE_TABS && Platform.OS === 'android') return gap;
+  // The system bar has no height API; it sits in the same spot as the fallback pill.
+  return GLASS_BAR_HEIGHT + Math.max(insets.bottom, 12) + gap;
 }

package/registry/liquidglass-tab/files/src/lib/tab-icons.ts

@@ -19,7 +19,8 @@ import type { ColorValue, ImageSourcePropType } from 'react-native';
  * Preset sets (no import needed): Ionicons, Feather, FontAwesome, …
  * Custom font: iconFont() / icoMoon()
  * Custom module: library + icon on TabItem
- * PNG: src on TabItem
+ * PNG: src on TabItem — SVG kits (Hugeicons, Lucide, Tabler) → PNGs with
+ *   npx @expokit/cli@latest icons --from hugeicons --names Home01Icon --out assets/tab-icons
  */
 
 export type IconSetName =
@@ -85,8 +86,10 @@ export function asFamily(mod: unknown): VectorIconFamily {
   }
 
   throw new Error(
-    '[expo-kit] This icon package has no getImageSource (SVG kits like Hugeicons, Tabler, Lucide).\n' +
-      'Use icon.set preset, src PNG, iconFont(), or icoMoon().'
+    '[expo-kit] This icon package has no getImageSource — SVG kits (Hugeicons, Lucide, Tabler) can not be drawn by the native tab bar.\n' +
+      'Render them to PNGs and use `src` on the tab:\n' +
+      '  npx @expokit/cli@latest icons --from hugeicons --names Home01Icon,Search01Icon --out assets/tab-icons\n' +
+      'Or use an icon.set preset, iconFont() or icoMoon().'
   );
 }
 

package/registry/liquidglass-tab/files/src/lib/tabs.ts

@@ -14,12 +14,14 @@ export type { IconSetName, TabIconPreset } from '@/lib/tab-icons';
 
 /**
  * Edit this file only — tabs, labels, icons, colors, and screen copy.
- * Each tab needs a route file: src/app/(tabs)/{name}.tsx (use TabScreenFromConfig).
+ * Each tab needs a route file: src/app/(tabs)/{name}.tsx — `npx @expokit/cli@latest update`
+ * creates a missing one.
  *
  * Icons (pick one per tab):
  *   icon: { set: 'Ionicons', name: 'home-outline', selected: 'home' }
  *   library + iconName (any package with getImageSource)
- *   src: require('../assets/icon.png')
+ *   src: require('../assets/icon.png') — or { default, selected }. SVG kits (Hugeicons, Lucide,
+ *     Tabler): npx @expokit/cli@latest icons --from hugeicons --names Home01Icon --out assets/tab-icons
  */
 
 export interface TabItem {