Add limited width component.

index.ts

@@ -1,4 +1,3 @@
-import "react-native-get-random-values";
 export { Aligned } from "./react-native/components/Aligned";
 export { AwaitingPullSyncableStateCollectionItem } from "./react-native/types/AwaitingPullSyncableStateCollectionItem";
 export { AwaitingPushSyncableStateCollectionItem } from "./react-native/types/AwaitingPushSyncableStateCollectionItem";
@@ -32,6 +31,7 @@ export { createHeaderComponent } from "./react-native/components/createHeaderCom
 export { createHrComponent } from "./react-native/components/createHrComponent";
 export { createImageBackgroundComponent } from "./react-native/components/createImageBackgroundComponent";
 export { createInputComponent } from "./react-native/components/createInputComponent";
+export { createLimitedWidthComponent } from "./react-native/components/createLimitedWidthComponent";
 export { createNullableEmailInputComponent } from "./react-native/components/createNullableEmailInputComponent";
 export { createNullableFloatInputComponent } from "./react-native/components/createNullableFloatInputComponent";
 export { createNullableIntegerInputComponent } from "./react-native/components/createNullableIntegerInputComponent";
@@ -145,3 +145,4 @@ export { useMeasure } from "./react-native/hooks/useMeasure";
 export { useRefresh } from "./react-native/hooks/useRefresh";
 export { useSyncFileCleanUpBlocker } from "./react-native/hooks/useSyncFileCleanUpBlocker";
 export { useSyncInProgress } from "./react-native/hooks/useSyncInProgress";
+import "react-native-get-random-values";

react-native/components/createFixedWidthComponent/index.tsx

@@ -27,6 +27,7 @@ export const createFixedWidthComponent = (
       style={
         height === `fillsContainer` ? styles.fillsContainer : styles.fitsContent
       }
+      pointerEvents="box-none"
     >
       {children}
     </View>

react-native/components/createFixedWidthComponent/unit.tsx

@@ -15,7 +15,7 @@ test(`renders as expected when filling its container vertically`, () => {
   );
 
   expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <View style={{ width: 243, height: `100%` }}>
+    <View style={{ width: 243, height: `100%` }} pointerEvents="box-none">
       <Text>Example Content</Text>
     </View>
   );
@@ -31,7 +31,7 @@ test(`renders as expected when fitting its content vertically`, () => {
   );
 
   expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <View style={{ width: 243 }}>
+    <View style={{ width: 243 }} pointerEvents="box-none">
       <Text>Example Content</Text>
     </View>
   );

react-native/components/createLimitedWidthComponent/index.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+/**
+ * Creates a React component which has a maximum width.
+ * @param maximumWidth The maximum width of the component
+ * @returns     The created component.
+ */
+export const createLimitedWidthComponent = (
+  maximumWidth: number
+): React.FunctionComponent<{
+  /** Determines how the column is to be sized vertically. */
+  readonly height: `fillsContainer` | `fitsContent`;
+}> => {
+  const styles = StyleSheet.create({
+    fillsContainer: {
+      maxWidth: maximumWidth,
+      height: `100%`,
+    },
+    fitsContent: {
+      maxWidth: maximumWidth,
+    },
+  });
+
+  return ({ children, height }) => (
+    <View
+      style={
+        height === `fillsContainer` ? styles.fillsContainer : styles.fitsContent
+      }
+      pointerEvents="box-none"
+    >
+      {children}
+    </View>
+  );
+};

react-native/components/createLimitedWidthComponent/readme.md

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

react-native/components/createLimitedWidthComponent/unit.tsx

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

readme.md

@@ -38,6 +38,7 @@ import { createTextComponent } from "react-native-app-helpers";
 - [createHrComponent](./react-native/components/createHrComponent/readme.md)
 - [createImageBackgroundComponent](./react-native/components/createImageBackgroundComponent/readme.md)
 - [createInputComponent](./react-native/components/createInputComponent/readme.md)
+- [createLimitedWidthComponent](./react-native/components/createLimitedWidthComponent/readme.md)
 - [createNullableEmailInputComponent](./react-native/components/createNullableEmailInputComponent/readme.md)
 - [createNullableFloatInputComponent](./react-native/components/createNullableFloatInputComponent/readme.md)
 - [createNullableIntegerInputComponent](./react-native/components/createNullableIntegerInputComponent/readme.md)