@vvedantb/native-ui 0.17.2 → 0.18.0

package/src/FloatingTabBar.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { Pressable, Text, View } from "react-native";
+import { memo, useEffect } from "react";
+import { Pressable, Text, View, type ColorValue } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -108,49 +108,19 @@ export function FloatingTabBar({
                 ? options.tabBarActiveTintColor
                 : options.tabBarInactiveTintColor) ??
               tabColors("segmented", focused, scheme).color;
-            const onPress = () => {
-              const event = navigation.emit({
-                type: "tabPress",
-                target: route.key,
-                canPreventDefault: true,
-              });
-              if (!focused && !event.defaultPrevented) {
-                selectionHaptic();
-                navigation.navigate(route.name, route.params);
-              }
-            };
-
             return (
-              <Pressable
+              <TabBarItem
                 key={route.key}
+                route={route}
+                navigation={navigation}
+                focused={focused}
+                label={label}
+                color={color}
+                largerText={largerText}
+                renderIcon={options.tabBarIcon}
                 testID={options.tabBarButtonTestID}
-                accessibilityRole="tab"
-                accessibilityState={{ selected: focused }}
                 accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
-                onPress={onPress}
-                className="min-h-12 min-w-12 flex-1 items-center justify-center gap-1"
-                style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
-              >
-                {options.tabBarIcon
-                  ? options.tabBarIcon({
-                      focused,
-                      color,
-                      size: largerText ? 28 : 24,
-                    })
-                  : null}
-                <Text
-                  numberOfLines={1}
-                  // The bar has a fixed height (`tabBarReserve`), so labels
-                  // scale with Dynamic Type only up to what fits in it.
-                  maxFontSizeMultiplier={1.5}
-                  className={`font-instrument-sans-semibold ${
-                    largerText ? "text-base" : "text-sm"
-                  }`}
-                  style={[{ color }, typeStyle("semibold")]}
-                >
-                  {label}
-                </Text>
-              </Pressable>
+              />
             );
           })}
         </View>
@@ -159,6 +129,73 @@ export function FloatingTabBar({
   );
 }
 
+type TabBarItemProps = {
+  route: FloatingTabBarProps["state"]["routes"][number];
+  navigation: FloatingTabBarProps["navigation"];
+  focused: boolean;
+  label: string;
+  color: ColorValue;
+  largerText: boolean;
+  renderIcon: FloatingTabOptions["tabBarIcon"];
+  testID: string | undefined;
+  accessibilityLabel: string;
+};
+
+/**
+ * One tab. Memoised: a switch re-renders the bar, and without it every tab
+ * and its SVG icon re-rendered too (the kit is not built with React
+ * Compiler). Now only the two tabs whose focus changed render. The props are
+ * stable between switches: `route` and `navigation` keep their identity, and
+ * `tabBarIcon` is the caller's function.
+ */
+const TabBarItem = memo(function TabBarItem({
+  route,
+  navigation,
+  focused,
+  label,
+  color,
+  largerText,
+  renderIcon,
+  testID,
+  accessibilityLabel,
+}: TabBarItemProps) {
+  const onPress = () => {
+    const event = navigation.emit({
+      type: "tabPress",
+      target: route.key,
+      canPreventDefault: true,
+    });
+    if (!focused && !event.defaultPrevented) {
+      selectionHaptic();
+      navigation.navigate(route.name, route.params);
+    }
+  };
+
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: focused }}
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      className="min-h-12 min-w-12 flex-1 items-center justify-center gap-1"
+      style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+    >
+      {renderIcon ? renderIcon({ focused, color, size: largerText ? 28 : 24 }) : null}
+      <Text
+        numberOfLines={1}
+        // The bar has a fixed height (`tabBarReserve`), so labels
+        // scale with Dynamic Type only up to what fits in it.
+        maxFontSizeMultiplier={1.5}
+        className={`font-instrument-sans-semibold ${largerText ? "text-base" : "text-sm"}`}
+        style={[{ color }, typeStyle("semibold")]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+});
+
 /**
  * The pill behind tab `index` of `count` drawn tabs: one tab wide (they share
  * the row equally), `TAB_BAR_PADDING` inside the bar, in

package/src/ai/conversation.tsx

@@ -531,23 +531,27 @@ export function ConversationScrollButton({
           testID={testID}
           // Wider than 44 with its label; only the height needs slop.
           hitSlop={touchSlop(MIN_TOUCH_TARGET, SCROLL_PILL_HEIGHT)}
-          style={({ pressed }) => ({
+          // A plain style object: NativeWind drops a function `style` on a
+          // native `Pressable`, which lost the pill's row, border and fill.
+          style={{
             minHeight: SCROLL_PILL_HEIGHT,
             flexDirection: "row",
             alignItems: "center",
-            gap: 6,
             paddingHorizontal: 12,
             borderRadius: tokens.radius.pill,
             borderWidth: 1,
             borderColor: withAlpha(tokens.color.border[scheme], 0.6),
             backgroundColor: tokens.color.surface[scheme],
-            opacity: pressed ? 0.7 : 1,
-          })}
+          }}
         >
-          <Icon size={largerText ? 20 : 16} color={tokens.color.muted[scheme]} />
-          <Text className={cn(labelSize, "font-instrument-sans")} style={[sizeStyle(labelSize), textStyle("muted", scheme)]}>
-            {label}
-          </Text>
+          {({ pressed }) => (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 6, opacity: pressed ? 0.7 : 1 }}>
+              <Icon size={largerText ? 20 : 16} color={tokens.color.muted[scheme]} />
+              <Text className={cn(labelSize, "font-instrument-sans")} style={[sizeStyle(labelSize), textStyle("muted", scheme)]}>
+                {label}
+              </Text>
+            </View>
+          )}
         </Pressable>
       ) : (
         <Button

package/src/glassBlur.tsx

@@ -2,44 +2,68 @@ import {
   createContext,
   useContext,
   useLayoutEffect,
-  useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
   type ComponentRef,
-  type Dispatch,
   type ReactNode,
   type RefObject,
-  type SetStateAction,
 } from "react";
 import { StyleSheet, View, type ViewProps } from "react-native";
 import { loadBlur } from "./blur";
 
 type BlurTargetRef = RefObject<ComponentRef<typeof View> | null>;
 
-type GlassBlurContextValue = {
-  target: BlurTargetRef | null;
-  setTarget: Dispatch<SetStateAction<BlurTargetRef | null>> | null;
+/**
+ * The current blur target, outside React state. A target change (each tab
+ * switch hands it from one tab to the next) then re-renders only the glass
+ * that subscribes, not the whole tab tree under the provider: as a context
+ * value it walked every mounted tab twice per switch.
+ */
+type BlurTargetStore = {
+  get: () => BlurTargetRef | null;
+  set: (next: BlurTargetRef | null) => void;
+  subscribe: (listener: () => void) => () => void;
 };
 
-const NO_TARGET: GlassBlurContextValue = { target: null, setTarget: null };
+function createBlurTargetStore(): BlurTargetStore {
+  let current: BlurTargetRef | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => current,
+    set: (next) => {
+      if (next === current) return;
+      current = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+// `null` outside a provider and inside a target (a blur view must not sit
+// inside its own target). The value is the provider's one store, so it never
+// changes.
+const BlurTargetStoreContext = createContext<BlurTargetStore | null>(null);
 
-const GlassBlurContext = createContext<GlassBlurContextValue>(NO_TARGET);
+const noSubscribe = () => () => {};
+const noTarget = () => null;
 
 /**
  * The mounted `GlassBlurTarget` that floating glass blurs on Android, or
  * `null` outside a `GlassBlurProvider` and inside the target itself.
  */
 export function useGlassBlurTarget() {
-  return useContext(GlassBlurContext).target;
+  const store = useContext(BlurTargetStoreContext);
+  return useSyncExternalStore(store?.subscribe ?? noSubscribe, store?.get ?? noTarget, noTarget);
 }
 
 export function GlassBlurProvider({ children }: { children: ReactNode }) {
-  const [target, setTarget] = useState<BlurTargetRef | null>(null);
-  const value = useMemo(() => ({ target, setTarget }), [target]);
+  const [store] = useState(createBlurTargetStore);
 
-  return (
-    <GlassBlurContext.Provider value={value}>{children}</GlassBlurContext.Provider>
-  );
+  return <BlurTargetStoreContext.Provider value={store}>{children}</BlurTargetStoreContext.Provider>;
 }
 
 export type GlassBlurTargetProps = ViewProps & {
@@ -59,23 +83,24 @@ export function GlassBlurTarget({
   children,
   ...props
 }: GlassBlurTargetProps) {
-  const { setTarget } = useContext(GlassBlurContext);
+  const store = useContext(BlurTargetStoreContext);
   const ref = useRef<ComponentRef<typeof View>>(null);
   const BlurTargetView = loadBlur()?.BlurTargetView;
 
   // Publish the ref only once it is attached: expo-blur compares
   // `blurTarget.current` between renders to pick up a new target.
   useLayoutEffect(() => {
-    if (!setTarget || !active) {
+    if (!store || !active) {
       return;
     }
-    setTarget(ref);
-    return () => setTarget((current) => (current === ref ? null : current));
-  }, [setTarget, active]);
+    store.set(ref);
+    return () => {
+      if (store.get() === ref) store.set(null);
+    };
+  }, [store, active]);
 
-  const content = (
-    <GlassBlurContext.Provider value={NO_TARGET}>{children}</GlassBlurContext.Provider>
-  );
+  // Surfaces in here get no target: a blur view must not sit inside its own.
+  const content = <BlurTargetStoreContext.Provider value={null}>{children}</BlurTargetStoreContext.Provider>;
 
   return BlurTargetView ? (
     <BlurTargetView ref={ref} style={[styles.fill, style]} {...props}>

package/src/primitives/swipe-row-gesture.tsx

@@ -80,6 +80,12 @@ export function GestureSwipeableRow({
 
   // Whether this touch began while a row was open, so its release only closes that row. Nothing renders from it.
   const closesOnRelease = useRef(false);
+  // The action strips mount on the row's first touch, not with the row: a
+  // list of a hundred rows then mounts no hidden buttons and icons up front.
+  // A touch lands a few frames before a swipe can move the row, so the strip
+  // is there before any of it shows.
+  const [revealed, setRevealed] = useState(false);
+  const reveal = () => setRevealed(true);
   const webClicks = useWebClickGuard(isSwipeRowOpen);
   const insidePager = useContext(InsidePagerContext);
   const opened = () => {
@@ -137,6 +143,9 @@ export function GestureSwipeableRow({
     .failOffsetY([-SWIPE_FAIL_OFFSET_Y, SWIPE_FAIL_OFFSET_Y]);
   if (activation.failOffsetX !== undefined) pan.failOffsetX(activation.failOffsetX);
   pan
+    .onBegin(() => {
+      runOnJS(reveal)();
+    })
     .onStart(() => {
       cancelAnimation(x);
       start.set(x.get());
@@ -184,10 +193,10 @@ export function GestureSwipeableRow({
   const rowStyle = useAnimatedStyle(() => ({ transform: [{ translateX: x.get() }] }));
   return (
     <View onLayout={(event) => width.set(event.nativeEvent.layout.width)} style={styles.clip}>
-      {leadingActions.length > 0 ? (
+      {revealed && leadingActions.length > 0 ? (
         <ActionStrip side="leading" actions={leadingActions} x={x} armedScale={armedScale} onPress={press} />
       ) : null}
-      {trailingActions.length > 0 ? (
+      {revealed && trailingActions.length > 0 ? (
         <ActionStrip side="trailing" actions={trailingActions} x={x} armedScale={armedScale} onPress={press} />
       ) : null}
       <GestureDetector gesture={pan}>