@farcaster/snap 2.6.2 → 2.6.4

package/dist/react-native/components/snap-image.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image } from "expo-image";
+import { useCallback, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context.js";
 function aspectToRatio(aspect) {
@@ -17,10 +18,16 @@ export function SnapImage({ element: { props }, }) {
     const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
     const stackDir = useSnapStackDirection();
     const inHorizontalStack = stackDir === "horizontal";
-    return (_jsxs(View, { style: [
+    const [frameWidth, setFrameWidth] = useState(0);
+    const measuredHeight = frameWidth > 0 ? frameWidth / ratio : undefined;
+    const handleLayout = useCallback((event) => {
+        const nextWidth = Math.round(event.nativeEvent.layout.width);
+        setFrameWidth((currentWidth) => currentWidth !== nextWidth ? nextWidth : currentWidth);
+    }, []);
+    return (_jsxs(View, { onLayout: handleLayout, style: [
             styles.frame,
             inHorizontalStack ? styles.frameInHorizontalRow : styles.frameFullWidth,
-            { aspectRatio: ratio },
+            measuredHeight ? { height: measuredHeight } : { aspectRatio: ratio },
         ], children: [_jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }), hasOverlay ? (_jsx(View, { style: styles.overlay, pointerEvents: "none", children: _jsxs(View, { style: styles.overlayContent, children: [title ? (_jsx(Text, { numberOfLines: 1, style: styles.title, children: title })) : null, subtitle ? (_jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle })) : null] }) })) : null] }));
 }
 const styles = StyleSheet.create({

package/dist/react-native/v1/snap-view.js

@@ -82,7 +82,7 @@ export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark
 const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
     card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
-    body: { paddingHorizontal: 16, paddingVertical: 16 },
+    body: { paddingHorizontal: 8, paddingVertical: 8 },
     expandFloat: {
         position: "absolute",
         left: 0,

package/dist/react-native/v2/snap-view.js

@@ -123,7 +123,7 @@ function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWa
                                         : current === nextHeight
                                             ? current
                                             : nextHeight);
-                                }, style: { paddingHorizontal: 16, paddingVertical: 16 }, children: content }), expansion.showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (_jsxs(View, { style: { position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }, children: [_jsx(View, { style: { height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" } }), _jsx(View, { style: { position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }, children: _jsxs(Text, { style: { fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx(View, { style: { flex: 1, backgroundColor: "rgba(255,50,50,0.15)" } })] })), loading
+                                }, style: cardStyles.body, children: content }), expansion.showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (_jsxs(View, { style: { position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }, children: [_jsx(View, { style: { height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" } }), _jsx(View, { style: { position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }, children: _jsxs(Text, { style: { fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx(View, { style: { flex: 1, backgroundColor: "rgba(255,50,50,0.15)" } })] })), loading
                                 ? loadingOverlay === undefined
                                     ? _jsx(SnapLoadingOverlay, { appearance: mode, accentHex: accentHex })
                                     : loadingOverlay
@@ -157,7 +157,7 @@ export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark
 const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
     card: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
-    body: { paddingHorizontal: 16, paddingVertical: 16 },
+    body: { paddingHorizontal: 8, paddingVertical: 8 },
     actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
     expandFloat: {
         position: "absolute",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "2.6.2",
+  "version": "2.6.4",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

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

@@ -1,5 +1,7 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
 import { Image } from "expo-image";
+import { useCallback, useState } from "react";
+import type { ViewProps } from "react-native";
 import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context";
 
@@ -20,13 +22,22 @@ export function SnapImage({
   const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
   const stackDir = useSnapStackDirection();
   const inHorizontalStack = stackDir === "horizontal";
+  const [frameWidth, setFrameWidth] = useState(0);
+  const measuredHeight = frameWidth > 0 ? frameWidth / ratio : undefined;
+  const handleLayout = useCallback<NonNullable<ViewProps["onLayout"]>>((event) => {
+    const nextWidth = Math.round(event.nativeEvent.layout.width);
+    setFrameWidth((currentWidth) =>
+      currentWidth !== nextWidth ? nextWidth : currentWidth,
+    );
+  }, []);
 
   return (
     <View
+      onLayout={handleLayout}
       style={[
         styles.frame,
         inHorizontalStack ? styles.frameInHorizontalRow : styles.frameFullWidth,
-        { aspectRatio: ratio },
+        measuredHeight ? { height: measuredHeight } : { aspectRatio: ratio },
       ]}
     >
       <Image

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

@@ -263,7 +263,7 @@ export function SnapCardV1({
 const cardStyles = StyleSheet.create({
   frameRing: { alignSelf: "stretch" },
   card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
-  body: { paddingHorizontal: 16, paddingVertical: 16 },
+  body: { paddingHorizontal: 8, paddingVertical: 8 },
   expandFloat: {
     position: "absolute",
     left: 0,

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

@@ -289,7 +289,7 @@ function SnapCardV2Inner({
                     : nextHeight,
               );
             }}
-            style={{ paddingHorizontal: 16, paddingVertical: 16 }}
+            style={cardStyles.body}
           >
             {content}
           </View>
@@ -421,7 +421,7 @@ export function SnapCardV2({
 const cardStyles = StyleSheet.create({
   frameRing: { alignSelf: "stretch" },
   card: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
-  body: { paddingHorizontal: 16, paddingVertical: 16 },
+  body: { paddingHorizontal: 8, paddingVertical: 8 },
   actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
   expandFloat: {
     position: "absolute",