@farcaster/snap 2.6.2 → 2.6.3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "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