Add HR component.

Author: jameswilddev

components/createHrComponent/index.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { View, StyleSheet, ColorValue } from "react-native";
+
+export const createHrComponent = (color: ColorValue, height: number) => {
+  const styles = StyleSheet.create({
+    view: {
+      width: `100%`,
+      height,
+      backgroundColor: color,
+    },
+  });
+
+  return () => <View style={styles.view} />;
+};

components/createHrComponent/readme.md

@@ -0,0 +1,15 @@
+# `react-native-app-helpers/createHrComponent`
+
+Creates a new React component which resembles a HTML `<hr>` component.
+
+## Usage
+
+```tsx
+import { createHrComponent } from "react-native-app-helpers";
+
+const ExampleHr = createSidebarComponent(`red`, 3);
+
+const ExampleScreen = () => (
+  <ExampleHr />
+);
+```

components/createHrComponent/unit.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { View } from "react-native";
+import { createHrComponent } from "../..";
+import { unwrapRenderedFunctionComponent } from "../../utilities/unwrapRenderedFunctionComponent";
+
+test(`renders as expected`, () => {
+  const Component = createHrComponent(`red`, 3);
+
+  const rendered = <Component />;
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <View style={{ backgroundColor: `red`, width: `100%`, height: 3 }} />
+  );
+});

index.ts

@@ -7,6 +7,7 @@ export { createFiniteStateMachineRoutingComponent } from "./components/createFin
 export { createFixedWidthComponent } from "./components/createFixedWidthComponent";
 export { createFlatColorBackgroundComponent } from "./components/createFlatColorBackgroundComponent";
 export { createHeaderBodyFooterComponent } from "./components/createHeaderBodyFooterComponent";
+export { createHrComponent } from "./components/createHrComponent";
 export { createImageBackgroundComponent } from "./components/createImageBackgroundComponent";
 export { createInputComponent } from "./components/createInputComponent";
 export { createPaddingComponent } from "./components/createPaddingComponent";

readme.md

@@ -25,6 +25,7 @@ import { createTextComponent } from "react-native-app-helpers";
 - [createFixedWidthComponent](./components/createFixedWidthComponent/readme.md)
 - [createFlatColorBackgroundComponent](./components/createFlatColorBackgroundComponent/readme.md)
 - [createHeaderBodyFooterComponent](./components/createHeaderBodyFooterComponent/readme.md)
+- [createHrComponent](./components/createHrComponent/readme.md)
 - [createImageBackgroundComponent](./components/createImageBackgroundComponent/readme.md)
 - [createInputComponent](./components/createInputComponent/readme.md)
 - [createPaddingComponent](./components/createPaddingComponent/readme.md)