79 lines
2.2 KiB
Markdown
79 lines
2.2 KiB
Markdown
---
|
|
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.
|