Add fixed height components.

Author: jameswilddev

index.ts

@@ -9,6 +9,7 @@ export { createCheckboxComponent } from './react-native/components/createCheckbo
 export { createCreatableSelectComponent } from './react-native/components/createCreatableSelectComponent'
 export { createFileStoreManagerComponent } from './react-native/components/createFileStoreManagerComponent'
 export { createFiniteStateMachineRoutingComponent } from './react-native/components/createFiniteStateMachineRoutingComponent'
+export { createFixedHeightComponent } from './react-native/components/createFixedHeightComponent'
 export { createFixedWidthComponent } from './react-native/components/createFixedWidthComponent'
 export { createFlashMessageComponent } from './react-native/components/createFlashMessageComponent'
 export { createFlatColorBackgroundComponent } from './react-native/components/createFlatColorBackgroundComponent'
@@ -106,6 +107,7 @@ export type { FileRequestBody } from './react-native/types/FileRequestBody'
 export type { FileStoreInterface } from './react-native/types/FileStoreInterface'
 export type { FiniteStateMachineRouterState } from './react-native/types/FiniteStateMachineRouterState'
 export type { FiniteStateMachineRoutingProps } from './react-native/types/FiniteStateMachineRoutingProps'
+export type { FixedHeightProps } from './react-native/types/FixedHeightProps'
 export type { FixedWidthProps } from './react-native/types/FixedWidthProps'
 export type { FlashMessageProps } from './react-native/types/FlashMessageProps'
 export type { FlashMessageState } from './react-native/types/FlashMessageState'

react-native/components/createFixedHeightComponent/index.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import type { FixedHeightProps } from '../../types/FixedHeightProps'
+
+/**
+ * Creates a React component which has a fixed height.
+ * @param height The height of the component
+ * @returns     The created component.
+ */
+export const createFixedHeightComponent = (
+  height: number
+): React.FunctionComponent<FixedHeightProps> => {
+  const styles = StyleSheet.create({
+    fillsContainer: {
+      height,
+      width: '100%'
+    },
+    fitsContent: {
+      height
+    }
+  })
+
+  const FixedHeight: React.FunctionComponent<FixedHeightProps> = ({ children, width }) => (
+    <View
+      style={
+        width === 'fillsContainer' ? styles.fillsContainer : styles.fitsContent
+      }
+      pointerEvents="box-none"
+    >
+      {children}
+    </View>
+  )
+
+  return FixedHeight
+}

react-native/components/createFixedHeightComponent/readme.md

@@ -0,0 +1,29 @@
+# `react-native-app-helpers/createFixedHeightComponent`
+
+Creates a React component which has a fixed height.
+
+## Usage
+
+```tsx
+import { createFixedHeightComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createFixedHeightComponent(243);
+
+const ExampleScreen = () => (
+  <ExampleComponent width="fillsContainer">
+    <Text>This is 243 wide and fills its container horizontally.</Text>
+  </ExampleComponent>
+);
+```
+
+```tsx
+import { createFixedHeightComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createFixedHeightComponent(243);
+
+const ExampleScreen = () => (
+  <ExampleComponent width="fitsContent">
+    <Text>This is 243 wide and fits its content horizontally.</Text>
+  </ExampleComponent>
+);
+```

react-native/components/createFixedHeightComponent/unit.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Text, View } from 'react-native'
+import {
+  createFixedHeightComponent,
+  unwrapRenderedFunctionComponent
+} from '../../..'
+
+test('renders as expected when filling its container vertically', () => {
+  const Component = createFixedHeightComponent(243)
+
+  const rendered = (
+    <Component width="fillsContainer">
+      <Text>Example Content</Text>
+    </Component>
+  )
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ height: 243, width: '100%' }} pointerEvents="box-none">
+      <Text>Example Content</Text>
+    </View>
+  )
+})
+
+test('renders as expected when fitting its content vertically', () => {
+  const Component = createFixedHeightComponent(243)
+
+  const rendered = (
+    <Component width="fitsContent">
+      <Text>Example Content</Text>
+    </Component>
+  )
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ height: 243 }} pointerEvents="box-none">
+      <Text>Example Content</Text>
+    </View>
+  )
+})

react-native/types/FixedHeightProps/index.tsx

@@ -0,0 +1,11 @@
+import type * as React from 'react'
+
+/**
+ * Props to be given to fixed height components.
+ */
+export type FixedHeightProps = React.PropsWithChildren<{
+  /**
+   * Describes how the component's widthwidth should be sized.
+   */
+  readonly width: 'fillsContainer' | 'fitsContent'
+}>

react-native/types/FixedHeightProps/readme.md

@@ -0,0 +1,13 @@
+# `react-native-app-helpers/FixedHeightProps`
+
+Props to be given to fixed height components.
+
+## Usage
+
+```tsx
+import type { FixedHeightProps } from "react-native-app-helpers";
+
+const example: FixedHeightProps = {
+  width: "fitsContent",
+};
+```

readme.md

@@ -29,6 +29,7 @@ import { createTextComponent } from "react-native-app-helpers";
 - [createCreatableSelectComponent](./react-native/components/createCreatableSelectComponent/readme.md)
 - [createFileStoreManagerComponent](./react-native/components/createFileStoreManagerComponent/readme.md)
 - [createFiniteStateMachineRoutingComponent](./react-native/components/createFiniteStateMachineRoutingComponent/readme.md)
+- [createFixedHeightComponent](./react-native/components/createFixedHeightComponent/readme.md)
 - [createFixedWidthComponent](./react-native/components/createFixedWidthComponent/readme.md)
 - [createFlashMessageComponent](./react-native/components/createFlashMessageComponent/readme.md)
 - [createFlatColorBackgroundComponent](./react-native/components/createFlatColorBackgroundComponent/readme.md)
@@ -126,6 +127,7 @@ import { createTextComponent } from "react-native-app-helpers";
 - [FileRequestBody](./react-native/types/FileRequestBody/readme.md)
 - [FiniteStateMachineRouterState](./react-native/types/FiniteStateMachineRouterState/readme.md)
 - [FiniteStateMachineRoutingProps](./react-native/types/FiniteStateMachineRoutingProps/readme.md)
+- [FixedHeightProps](./react-native/types/FixedHeightProps/readme.md)
 - [FixedWidthProps](./react-native/types/FixedWidthProps/readme.md)
 - [FlashMessageProps](./react-native/types/FlashMessageProps/readme.md)
 - [FlashMessageState](./react-native/types/FlashMessageState/readme.md)