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 + + ); +});