Utilities and UI components for cross-platform React Native apps
feat: add `Measured` component
Measures and provides its own dimensions to its children.
Joseph Hale
(Jan 24, 2026, 11:36 PM -0700)
6c94d485
125bfc47
+42
+41
src/layouts/Measured.tsx
+41
src/layouts/Measured.tsx
···
1
+
// Copyright (c) 2026 Joseph Hale
2
+
//
3
+
// This Source Code Form is subject to the terms of the Mozilla Public
4
+
// License, v. 2.0. If a copy of the MPL was not distributed with this
5
+
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
6
+
7
+
import React, { createContext, useCallback, useContext, useRef, useState, type ComponentRef } from "react";
8
+
import { View } from "react-native";
9
+
10
+
type Measurements = Readonly<{
11
+
x: number;
12
+
y: number;
13
+
width: number;
14
+
height: number;
15
+
}>
16
+
17
+
const UNMEASURED = Object.freeze({ x: -1, y: -1, width: -1, height: -1 } satisfies Measurements);
18
+
19
+
const MeasurementsContext = createContext<Measurements>(UNMEASURED);
20
+
21
+
export function useMeasurements() {
22
+
return useContext(MeasurementsContext);
23
+
}
24
+
25
+
type OnLayout = NonNullable<React.ComponentProps<typeof View>['onLayout']>;
26
+
27
+
export default function Measured({ children }: { children: React.ReactNode }) {
28
+
const ref = useRef<ComponentRef<View>>(null);
29
+
const [measurements, setMeasurements] = useState(UNMEASURED);
30
+
const saveMeasurements = useCallback<OnLayout>(
31
+
({ nativeEvent }) => { setMeasurements(nativeEvent.layout) },
32
+
[setMeasurements]
33
+
);
34
+
return (
35
+
<View ref={ref} onLayout={saveMeasurements}>
36
+
<MeasurementsContext.Provider value={measurements}>
37
+
{children}
38
+
</MeasurementsContext.Provider>
39
+
</View>
40
+
);
41
+
}