Utilities and UI components for cross-platform React Native apps
feat: only render `Measured` children after measurements are complete
Joseph Hale
(Jan 24, 2026, 11:36 PM -0700)
79981035
6c94d485
+30
-5
+23
src/layouts/Filled.tsx
+23
src/layouts/Filled.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 from "react"
8
+
import { StyleSheet, View } from "react-native";
9
+
10
+
export default function Filled(props: React.ComponentProps<typeof View>) {
11
+
return (
12
+
<View {...props} style={[props.style, styles.container]}>
13
+
{props.children}
14
+
</View>
15
+
)
16
+
}
17
+
18
+
const styles = StyleSheet.create({
19
+
container: {
20
+
width: '100%',
21
+
height: '100%',
22
+
}
23
+
});
+7
-5
src/layouts/Measured.tsx
+7
-5
src/layouts/Measured.tsx
···
32
32
[setMeasurements]
33
33
);
34
34
return (
35
-
<View ref={ref} onLayout={saveMeasurements}>
36
-
<MeasurementsContext.Provider value={measurements}>
37
-
{children}
38
-
</MeasurementsContext.Provider>
39
-
</View>
35
+
<Filled ref={ref} onLayout={saveMeasurements}>
36
+
{measurements.width > 0 && measurements.height > 0 && (
37
+
<MeasurementsContext.Provider value={measurements}>
38
+
{children}
39
+
</MeasurementsContext.Provider>
40
+
)}
41
+
</Filled>
40
42
);
41
43
}