Add column component.

Author: jameswilddev

index.ts

@@ -1,4 +1,5 @@
 export { Aligned } from './react-native/components/Aligned'
+export { Column } from './react-native/components/Column'
 export { ContainerFillingKeyboardAvoidingView } from './react-native/components/ContainerFillingKeyboardAvoidingView'
 export { ContainerFillingScrollView } from './react-native/components/ContainerFillingScrollView'
 export { createBottomTabBarComponent } from './react-native/components/createBottomTabBarComponent'

react-native/components/Column/index.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { StyleSheet, View, type ViewStyle } from 'react-native'
+
+const styles: Record<string, ViewStyle> = {}
+
+/**
+ * A React component which fills the container horizontally and applies a flex
+ * column to its children.
+ */
+export const Column: React.FunctionComponent<
+React.PropsWithChildren<{
+  readonly width: 'fitsContent' | 'fillsContainer'
+  readonly verticalDistribution:
+  | 'top'
+  | 'centered'
+  | 'bottom'
+  | 'spaced'
+  | 'spacedTouchingEnds'
+  readonly horizontalAlignment: 'left' | 'centered' | 'right' | 'stretched'
+}>
+> = ({ width, verticalDistribution, horizontalAlignment, children }) => {
+  const styleKey = `${width}-${verticalDistribution}-${horizontalAlignment}`
+
+  if (!(styleKey in styles)) {
+    const view: ViewStyle = { height: '100%', flexDirection: 'column' }
+
+    if (width === 'fillsContainer') {
+      view.width = '100%'
+    }
+
+    switch (verticalDistribution) {
+      case 'centered':
+        view.justifyContent = 'center'
+        break
+
+      case 'bottom':
+        view.justifyContent = 'flex-end'
+        break
+
+      case 'spaced':
+        view.justifyContent = 'space-evenly'
+        break
+
+      case 'spacedTouchingEnds':
+        view.justifyContent = 'space-between'
+        break
+    }
+
+    switch (horizontalAlignment) {
+      case 'left':
+        view.alignItems = 'flex-start'
+        break
+
+      case 'centered':
+        view.alignItems = 'center'
+        break
+
+      case 'right':
+        view.alignItems = 'flex-end'
+        break
+    }
+
+    styles[styleKey] = StyleSheet.create({ view }).view
+  }
+
+  return (
+    <View style={styles[styleKey]} pointerEvents="box-none">
+      {children}
+    </View>
+  )
+}

react-native/components/Column/readme.md

@@ -0,0 +1,94 @@
+# `react-native-app-helpers/Column`
+
+A React component which fills the container vertically and applies a flex column to its children.
+
+## Usage
+
+```tsx
+import { Column } from "react-native-app-helpers";
+
+const ExampleScreen = () => (
+  <Column
+    height="fitsContent"
+    verticalDistribution="top"
+    horizontalAlignment="left"
+  >
+    <Text>These example items are aligned to the top left.</Text>
+    <Text>
+      The container is as narrow as possible while containing its width.
+    </Text>
+  </Column>
+);
+```
+
+```tsx
+import { Column } from "react-native-app-helpers";
+
+const ExampleScreen = () => (
+  <Column
+    height="fillsContainer"
+    verticalDistribution="centered"
+    horizontalAlignment="centered"
+  >
+    <Text>These example items are grouped in the center.</Text>
+    <Text>The container fills its container horizontally.</Text>
+  </Column>
+);
+```
+
+```tsx
+import { Column } from "react-native-app-helpers";
+
+const ExampleScreen = () => (
+  <Column
+    height="fitsContent"
+    verticalDistribution="bottom"
+    horizontalAlignment="right"
+  >
+    <Text>These example items are aligned to the bottom right.</Text>
+    <Text>
+      The container is as narrow as possible while containing its width.
+    </Text>
+  </Column>
+);
+```
+
+```tsx
+import { Column } from "react-native-app-helpers";
+
+const ExampleScreen = () => (
+  <Column
+    height="fitsContent"
+    verticalDistribution="spaced"
+    horizontalAlignment="stretched"
+  >
+    <Text>
+      These example items are spaced out vertically, and are stretched to fill
+      the container vertically.
+    </Text>
+    <Text>
+      The container is as narrow as possible while containing its width.
+    </Text>
+  </Column>
+);
+```
+
+```tsx
+import { Column } from "react-native-app-helpers";
+
+const ExampleScreen = () => (
+  <Column
+    height="fitsContent"
+    verticalDistribution="spacedTouchingEnds"
+    horizontalAlignment="stretched"
+  >
+    <Text>
+      These example items are spaced out vertically to the very edges of the
+      container, and are stretched to fill the container horizontally.
+    </Text>
+    <Text>
+      The container is as narrow as possible while containing its width.
+    </Text>
+  </Column>
+);
+```