diff --git a/components/createFixedWidthComponent/index.tsx b/components/createFixedWidthComponent/index.tsx
index 3d1e5af8..fd8ecc98 100644
--- a/components/createFixedWidthComponent/index.tsx
+++ b/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 }) => {children};
+ return ({ children, height }) => (
+
+ {children}
+
+ );
};
diff --git a/components/createFixedWidthComponent/readme.md b/components/createFixedWidthComponent/readme.md
index 26f7245e..67cb8a92 100644
--- a/components/createFixedWidthComponent/readme.md
+++ b/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 = () => (
-
- This is 243 wide and fills its container.
+
+ This is 243 wide and fills its container vertically.
+
+);
+```
+
+```tsx
+import { createFixedWidthComponent } from "react-native-app-helpers";
+
+const ExampleComponent = createFixedWidthComponent(243);
+
+const ExampleScreen = () => (
+
+ This is 243 wide and fits its content vertically.
);
```
diff --git a/components/createFixedWidthComponent/unit.tsx b/components/createFixedWidthComponent/unit.tsx
index 756241cd..84b12a18 100644
--- a/components/createFixedWidthComponent/unit.tsx
+++ b/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 = (
-
+
Example Content
);
@@ -20,3 +20,19 @@ test(`renders as expected`, () => {
);
});
+
+test(`renders as expected when fitting its content vertically`, () => {
+ const Component = createFixedWidthComponent(243);
+
+ const rendered = (
+
+ Example Content
+
+ );
+
+ expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+
+ Example Content
+
+ );
+});