@farcaster/snap 2.1.0 → 2.1.2

package/src/react-native/components/snap-text.tsx

@@ -1,5 +1,6 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
 import { StyleSheet, Text, View } from "react-native";
+import { useSnapStackDirection } from "../stack-direction-context";
 import { useSnapTheme } from "../theme";
 
 const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
@@ -24,9 +25,10 @@ export function SnapText({
   const sizeStyle = SIZE_STYLES[size] ?? SIZE_STYLES.md;
   const resolvedWeight = weight ? WEIGHT_MAP[weight] : sizeStyle?.fontWeight;
   const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
+  const inHorizontalStack = useSnapStackDirection() === "horizontal";
 
   return (
-    <View style={styles.wrap}>
+    <View style={inHorizontalStack ? styles.wrapRow : styles.wrapCol}>
       <Text
         style={[
           styles.base,
@@ -46,6 +48,9 @@ export function SnapText({
 }
 
 const styles = StyleSheet.create({
-  wrap: { width: "100%" },
+  /** Full width for vertical stacks (alignment / wrapping). */
+  wrapCol: { width: "100%" },
+  /** Row peers: hug content; avoid width 100% fighting nowrap horizontal rows. */
+  wrapRow: { flexShrink: 1, minWidth: 0 },
   base: {},
 });

package/src/react-native/stack-direction-context.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+export type SnapStackDirection = "vertical" | "horizontal";
+
+const SnapStackDirectionContext = createContext<SnapStackDirection | undefined>(
+  undefined,
+);
+
+export function SnapStackDirectionProvider({
+  direction,
+  children,
+}: {
+  direction: SnapStackDirection;
+  children: ReactNode;
+}) {
+  return (
+    <SnapStackDirectionContext.Provider value={direction}>
+      {children}
+    </SnapStackDirectionContext.Provider>
+  );
+}
+
+export function useSnapStackDirection(): SnapStackDirection | undefined {
+  return useContext(SnapStackDirectionContext);
+}

package/src/react-native/v2/snap-view.tsx

@@ -17,6 +17,7 @@ import type { SnapPage, SnapActionHandlers } from "../types";
 
 const SNAP_MAX_HEIGHT = 500;
 const SNAP_WARNING_HEIGHT = 700;
+const SHOW_MORE_OVERHANG = 14;
 
 // ─── Validation fallback ─────────────────────────────
 
@@ -229,7 +230,7 @@ function SnapCardV2Inner({
   const pillBgPressed = isDark ? "rgba(60,60,60,0.95)" : "rgba(240,240,240,0.95)";
 
   return (
-    <>
+    <View style={{ paddingBottom: isExpandable ? SHOW_MORE_OVERHANG : 0 }}>
       <View style={{ position: "relative" }}>
         <View
           style={{
@@ -307,7 +308,7 @@ function SnapCardV2Inner({
           {actionError}
         </Text>
       )}
-    </>
+    </View>
   );
 }
 

package/src/stack-horizontal-utils.ts

@@ -0,0 +1,27 @@
+import { Children, isValidElement, type ReactNode } from "react";
+
+/**
+ * True when every rendered child comes from a catalog `button` element.
+ * json-render passes `{ element: { type, props, ... } }` into each catalog component.
+ */
+function isRenderableChild(c: ReactNode): boolean {
+  if (c == null) return false;
+  if (typeof c === "boolean") return false;
+  return true;
+}
+
+export function horizontalChildrenAreAllButtons(children: ReactNode): boolean {
+  const items = Children.toArray(children).filter(isRenderableChild);
+  if (items.length === 0) return false;
+  for (const child of items) {
+    if (!isValidElement(child)) return false;
+    const typ = (child.props as { element?: { type?: unknown } }).element?.type;
+    if (typ !== "button") return false;
+  }
+  return true;
+}
+
+/** Direct snap catalog children under a stack (used for all-button grid column count). */
+export function countRenderableChildren(children: ReactNode): number {
+  return Children.toArray(children).filter(isRenderableChild).length;
+}

package/src/ui/catalog.ts

@@ -92,7 +92,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     stack: {
       props: stackProps,
       description:
-        "Layout container — direction: vertical (default) | horizontal. Children are element ids in order.",
+        "Layout container — direction: vertical (default) | horizontal. Children are element ids in order. Horizontal stacks use a single flex row so peers stay side-by-side and shrink with min-width 0. Nested stacks participate as flexible row peers. All-button horizontal stacks use an equal N-column grid where N is the number of buttons (1–6). Optional `columns` (`2`–`6`) forces an explicit equal grid for mixed children.",
     },
     text: {
       props: textProps,

package/src/ui/stack.ts

@@ -8,6 +8,14 @@ export const stackProps = z.object({
   direction: z.enum(STACK_DIRECTIONS).optional(),
   gap: z.enum(STACK_GAPS).optional(),
   justify: z.enum(STACK_JUSTIFY).optional(),
+  /** Horizontal stacks only: fixed column grid (`2`–`6`). Prefer omitting this when children are stacks — they flex as row peers automatically. */
+  columns: z.union([
+    z.literal(2),
+    z.literal(3),
+    z.literal(4),
+    z.literal(5),
+    z.literal(6),
+  ]).optional(),
 });
 
 export type StackProps = z.infer<typeof stackProps>;