initial commit

.agents/skills/vercel-react-native-skills/rules/ui-measure-views.md

@@ -0,0 +1,78 @@
+---
+title: Measuring View Dimensions
+impact: MEDIUM
+impactDescription: synchronous measurement, avoid unnecessary re-renders
+tags: layout, measurement, onLayout, useLayoutEffect
+---
+
+## Measuring View Dimensions
+
+Use both `useLayoutEffect` (synchronous) and `onLayout` (for updates). The sync
+measurement gives you the initial size immediately; `onLayout` keeps it current
+when the view changes. For non-primitive states, use a dispatch updater to
+compare values and avoid unnecessary re-renders.
+
+**Height only:**
+
+```tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { View, LayoutChangeEvent } from "react-native";
+
+function MeasuredBox({ children }: { children: React.ReactNode }) {
+  const ref = useRef<View>(null);
+  const [height, setHeight] = useState<number | undefined>(undefined);
+
+  useLayoutEffect(() => {
+    // Sync measurement on mount (RN 0.82+)
+    const rect = ref.current?.getBoundingClientRect();
+    if (rect) setHeight(rect.height);
+    // Pre-0.82: ref.current?.measure((x, y, w, h) => setHeight(h))
+  }, []);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setHeight(e.nativeEvent.layout.height);
+  };
+
+  return (
+    <View ref={ref} onLayout={onLayout}>
+      {children}
+    </View>
+  );
+}
+```
+
+**Both dimensions:**
+
+```tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { View, LayoutChangeEvent } from "react-native";
+
+type Size = { width: number; height: number };
+
+function MeasuredBox({ children }: { children: React.ReactNode }) {
+  const ref = useRef<View>(null);
+  const [size, setSize] = useState<Size | undefined>(undefined);
+
+  useLayoutEffect(() => {
+    const rect = ref.current?.getBoundingClientRect();
+    if (rect) setSize({ width: rect.width, height: rect.height });
+  }, []);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize((prev) => {
+      // for non-primitive states, compare values before firing a re-render
+      if (prev?.width === width && prev?.height === height) return prev;
+      return { width, height };
+    });
+  };
+
+  return (
+    <View ref={ref} onLayout={onLayout}>
+      {children}
+    </View>
+  );
+}
+```
+
+Use functional setState to compare—don't read state directly in the callback.