Skip to content

Commit 2b9d1f4

Browse files
committed
Add column component.
1 parent af339c5 commit 2b9d1f4

File tree

6 files changed

+1220
-4
lines changed

6 files changed

+1220
-4
lines changed

index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { Aligned } from './react-native/components/Aligned'
2+
export { Column } from './react-native/components/Column'
23
export { ContainerFillingKeyboardAvoidingView } from './react-native/components/ContainerFillingKeyboardAvoidingView'
34
export { ContainerFillingScrollView } from './react-native/components/ContainerFillingScrollView'
45
export { createBottomTabBarComponent } from './react-native/components/createBottomTabBarComponent'
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as React from 'react'
2+
import { StyleSheet, View, type ViewStyle } from 'react-native'
3+
4+
const styles: Record<string, ViewStyle> = {}
5+
6+
/**
7+
* A React component which fills the container horizontally and applies a flex
8+
* column to its children.
9+
*/
10+
export const Column: React.FunctionComponent<
11+
React.PropsWithChildren<{
12+
readonly width: 'fitsContent' | 'fillsContainer'
13+
readonly verticalDistribution:
14+
| 'top'
15+
| 'centered'
16+
| 'bottom'
17+
| 'spaced'
18+
| 'spacedTouchingEnds'
19+
readonly horizontalAlignment: 'left' | 'centered' | 'right' | 'stretched'
20+
}>
21+
> = ({ width, verticalDistribution, horizontalAlignment, children }) => {
22+
const styleKey = `${width}-${verticalDistribution}-${horizontalAlignment}`
23+
24+
if (!(styleKey in styles)) {
25+
const view: ViewStyle = { height: '100%', flexDirection: 'column' }
26+
27+
if (width === 'fillsContainer') {
28+
view.width = '100%'
29+
}
30+
31+
switch (verticalDistribution) {
32+
case 'centered':
33+
view.justifyContent = 'center'
34+
break
35+
36+
case 'bottom':
37+
view.justifyContent = 'flex-end'
38+
break
39+
40+
case 'spaced':
41+
view.justifyContent = 'space-evenly'
42+
break
43+
44+
case 'spacedTouchingEnds':
45+
view.justifyContent = 'space-between'
46+
break
47+
}
48+
49+
switch (horizontalAlignment) {
50+
case 'left':
51+
view.alignItems = 'flex-start'
52+
break
53+
54+
case 'centered':
55+
view.alignItems = 'center'
56+
break
57+
58+
case 'right':
59+
view.alignItems = 'flex-end'
60+
break
61+
}
62+
63+
styles[styleKey] = StyleSheet.create({ view }).view
64+
}
65+
66+
return (
67+
<View style={styles[styleKey]} pointerEvents="box-none">
68+
{children}
69+
</View>
70+
)
71+
}
Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# `react-native-app-helpers/Column`
2+
3+
A React component which fills the container vertically and applies a flex column to its children.
4+
5+
## Usage
6+
7+
```tsx
8+
import { Column } from "react-native-app-helpers";
9+
10+
const ExampleScreen = () => (
11+
<Column
12+
height="fitsContent"
13+
verticalDistribution="top"
14+
horizontalAlignment="left"
15+
>
16+
<Text>These example items are aligned to the top left.</Text>
17+
<Text>
18+
The container is as narrow as possible while containing its width.
19+
</Text>
20+
</Column>
21+
);
22+
```
23+
24+
```tsx
25+
import { Column } from "react-native-app-helpers";
26+
27+
const ExampleScreen = () => (
28+
<Column
29+
height="fillsContainer"
30+
verticalDistribution="centered"
31+
horizontalAlignment="centered"
32+
>
33+
<Text>These example items are grouped in the center.</Text>
34+
<Text>The container fills its container horizontally.</Text>
35+
</Column>
36+
);
37+
```
38+
39+
```tsx
40+
import { Column } from "react-native-app-helpers";
41+
42+
const ExampleScreen = () => (
43+
<Column
44+
height="fitsContent"
45+
verticalDistribution="bottom"
46+
horizontalAlignment="right"
47+
>
48+
<Text>These example items are aligned to the bottom right.</Text>
49+
<Text>
50+
The container is as narrow as possible while containing its width.
51+
</Text>
52+
</Column>
53+
);
54+
```
55+
56+
```tsx
57+
import { Column } from "react-native-app-helpers";
58+
59+
const ExampleScreen = () => (
60+
<Column
61+
height="fitsContent"
62+
verticalDistribution="spaced"
63+
horizontalAlignment="stretched"
64+
>
65+
<Text>
66+
These example items are spaced out vertically, and are stretched to fill
67+
the container vertically.
68+
</Text>
69+
<Text>
70+
The container is as narrow as possible while containing its width.
71+
</Text>
72+
</Column>
73+
);
74+
```
75+
76+
```tsx
77+
import { Column } from "react-native-app-helpers";
78+
79+
const ExampleScreen = () => (
80+
<Column
81+
height="fitsContent"
82+
verticalDistribution="spacedTouchingEnds"
83+
horizontalAlignment="stretched"
84+
>
85+
<Text>
86+
These example items are spaced out vertically to the very edges of the
87+
container, and are stretched to fill the container horizontally.
88+
</Text>
89+
<Text>
90+
The container is as narrow as possible while containing its width.
91+
</Text>
92+
</Column>
93+
);
94+
```

0 commit comments

Comments
 (0)