Utilities and UI components for cross-platform React Native apps
refactor: replace `Centered`/`Filled` components with shared styles
Gives more flexibility when combining them vs. not.
Joseph Hale
(Jan 25, 2026, 2:50 AM -0700)
79c2804d
19cf110e
+35
-60
+1
src/index.ts
+1
src/index.ts
-27
src/layouts/Centered.tsx
-27
src/layouts/Centered.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
-
import React from "react"
7
-
import { StyleSheet, View } from "react-native";
8
-
9
-
/**
10
-
* A `View` that centers its children vertically and horizontally.
11
-
*/
12
-
export default function Centered(props: React.ComponentProps<typeof View>) {
13
-
return (
14
-
<View {...props} style={[props.style, styles.container]}>
15
-
{props.children}
16
-
</View>
17
-
)
18
-
}
19
-
20
-
const styles = StyleSheet.create({
21
-
container: {
22
-
width: '100%',
23
-
height: '100%',
24
-
justifyContent: 'center',
25
-
alignItems: 'center',
26
-
}
27
-
});
-28
src/layouts/Filled.tsx
-28
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
-
/**
11
-
* A `View` that fills all available space.
12
-
*
13
-
* i.e. forces `{ width: '100%', height: '100%' }`
14
-
*/
15
-
export default function Filled(props: React.ComponentProps<typeof View>) {
16
-
return (
17
-
<View {...props} style={[props.style, styles.container]}>
18
-
{props.children}
19
-
</View>
20
-
)
21
-
}
22
-
23
-
const styles = StyleSheet.create({
24
-
container: {
25
-
width: '100%',
26
-
height: '100%',
27
-
}
28
-
});
+3
-3
src/layouts/Measured.tsx
+3
-3
src/layouts/Measured.tsx
···
6
6
7
7
import React, { createContext, useContext, useState } from "react";
8
8
import { View } from "react-native";
9
-
import Filled from "./Filled";
9
+
import styles from "./styles";
10
10
11
11
/**
12
12
* Children of this component can `useMeasurements` to get the
···
39
39
};
40
40
41
41
return (
42
-
<Filled onLayout={measure}>
42
+
<View style={styles.filled} onLayout={measure}>
43
43
{measurements.width > 0 && measurements.height > 0 && (
44
44
<MeasurementsContext value={measurements}>
45
45
{children}
46
46
</MeasurementsContext>
47
47
)}
48
-
</Filled>
48
+
</View>
49
49
);
50
50
}
51
51
-2
src/layouts/index.ts
-2
src/layouts/index.ts
···
4
4
// License, v. 2.0. If a copy of the MPL was not distributed with this
5
5
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
6
6
7
-
export { default as Centered } from './Centered';
8
-
export { default as Filled } from './Filled';
9
7
export { default as Measured, useMeasurements } from "./Measured";
+20
src/layouts/styles.ts
+20
src/layouts/styles.ts
···
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 { StyleSheet } from "react-native";
8
+
9
+
const styles = StyleSheet.create({
10
+
centered: {
11
+
justifyContent: 'center',
12
+
alignItems: 'center',
13
+
},
14
+
filled: {
15
+
width: '100%',
16
+
height: '100%',
17
+
}
18
+
})
19
+
20
+
export default styles;
+11
src/styles.ts
+11
src/styles.ts
···
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 layout from "./layouts/styles";
8
+
9
+
const styles = { layout };
10
+
11
+
export default styles;