Fixed width components can now fit their content vertically.

components/createFixedWidthComponent/index.tsx

@@ -2,20 +2,33 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 
 /**
- * Creates a React component which has a fixed width (and fills its container
- * vertically).
+ * Creates a React component which has a fixed width.
  * @param width The width of the component
  * @returns     The created component.
  */
 export const createFixedWidthComponent = (
   width: number
-): React.FunctionComponent => {
+): React.FunctionComponent<{
+  /** Determines how the column is to be sized vertically. */
+  readonly height: `fillsContainer` | `fitsContent`;
+}> => {
   const styles = StyleSheet.create({
-    view: {
+    fillsContainer: {
       width,
       height: `100%`,
     },
+    fitsContent: {
+      width,
+    },
   });
 
-  return ({ children }) => <View style={styles.view}>{children}</View>;
+  return ({ children, height }) => (
+    <View
+      style={
+        height === `fillsContainer` ? styles.fillsContainer : styles.fitsContent
+      }
+    >
+      {children}
+    </View>
+  );
 };

components/createFixedWidthComponent/readme.md

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

components/createFixedWidthComponent/unit.tsx

@@ -5,11 +5,11 @@ import {
   unwrapRenderedFunctionComponent,
 } from "../..";
 
-test(`renders as expected`, () => {
+test(`renders as expected when filling its container vertically`, () => {
   const Component = createFixedWidthComponent(243);
 
   const rendered = (
-    <Component>
+    <Component height="fillsContainer">
       <Text>Example Content</Text>
     </Component>
   );
@@ -20,3 +20,19 @@ test(`renders as expected`, () => {
     </View>
   );
 });
+
+test(`renders as expected when fitting its content vertically`, () => {
+  const Component = createFixedWidthComponent(243);
+
+  const rendered = (
+    <Component height="fitsContent">
+      <Text>Example Content</Text>
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ width: 243 }}>
+      <Text>Example Content</Text>
+    </View>
+  );
+});