Cursor rule

1---
2alwaysApply: false
3---
4 
5## Measuring View Dimensions
6 
7Use both `useLayoutEffect` (synchronous) and `onLayout` (for updates). The sync
8measurement gives you the initial size immediately; `onLayout` keeps it current
9when the view changes. For non-primitive states, use a dispatch updater to
10compare values and avoid unnecessary re-renders.
11 
12**Height only:**
13 
14```tsx
15import { useLayoutEffect, useRef, useState } from 'react'
16import { View, LayoutChangeEvent } from 'react-native'
17 
18function MeasuredBox({ children }: { children: React.ReactNode }) {
19  const ref = useRef<View>(null)
20  const [height, setHeight] = useState<number | undefined>(undefined)
21 
22  useLayoutEffect(() => {
23    // Sync measurement on mount (RN 0.82+)
24    const rect = ref.current?.getBoundingClientRect()
25    if (rect) setHeight(rect.height)
26    // Pre-0.82: ref.current?.measure((x, y, w, h) => setHeight(h))
27  }, [])
28 
29  const onLayout = (e: LayoutChangeEvent) => {
30    setHeight(e.nativeEvent.layout.height)
31  }
32 
33  return (
34    <View ref={ref} onLayout={onLayout}>
35      {children}
36    </View>
37  )
38}
39```
40 
41**Both dimensions:**
42 
43```tsx
44import { useLayoutEffect, useRef, useState } from 'react'
45import { View, LayoutChangeEvent } from 'react-native'
46 
47type Size = { width: number; height: number }
48 
49function MeasuredBox({ children }: { children: React.ReactNode }) {
50  const ref = useRef<View>(null)
51  const [size, setSize] = useState<Size | undefined>(undefined)
52 
53  useLayoutEffect(() => {
54    const rect = ref.current?.getBoundingClientRect()
55    if (rect) setSize({ width: rect.width, height: rect.height })
56  }, [])
57 
58  const onLayout = (e: LayoutChangeEvent) => {
59    const { width, height } = e.nativeEvent.layout
60    setSize((prev) => {
61      // for non-primitive states, compare values before firing a re-render
62      if (prev?.width === width && prev?.height === height) return prev
63      return { width, height }
64    })
65  }
66 
67  return (
68    <View ref={ref} onLayout={onLayout}>
69      {children}
70    </View>
71  )
72}
73```
74 
75Use functional setState to compare—don't read state directly in the callback.
76