From f8229500a1473dcd1c170a61662f525e8cbd2205 Mon Sep 17 00:00:00 2001
From: jameswilddev <jameswilddev@outlook.com>
Date: Thu, 25 Nov 2021 16:42:48 +0000
Subject: [PATCH] Add flash messages.

---
 .../createFlashMessageComponent/index.tsx     |  110 ++
 .../createFlashMessageComponent/readme.md     |   76 ++
 .../createFlashMessageComponent/unit.tsx      | 1125 +++++++++++++++++
 index.ts                                      |    3 +
 readme.md                                     |    3 +
 types/FlashMessageState/index.tsx             |   15 +
 types/FlashMessageState/readme.md             |   14 +
 types/FlashMessageStyle/index.tsx             |   55 +
 types/FlashMessageStyle/readme.md             |   45 +
 9 files changed, 1446 insertions(+)
 create mode 100644 components/createFlashMessageComponent/index.tsx
 create mode 100644 components/createFlashMessageComponent/readme.md
 create mode 100644 components/createFlashMessageComponent/unit.tsx
 create mode 100644 types/FlashMessageState/index.tsx
 create mode 100644 types/FlashMessageState/readme.md
 create mode 100644 types/FlashMessageStyle/index.tsx
 create mode 100644 types/FlashMessageStyle/readme.md

diff --git a/components/createFlashMessageComponent/index.tsx b/components/createFlashMessageComponent/index.tsx
new file mode 100644
index 00000000..a8ac0a29
--- /dev/null
+++ b/components/createFlashMessageComponent/index.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import { StyleSheet, Text, TextStyle, ViewStyle } from "react-native";
+import { useRefresh } from "../../hooks/useRefresh";
+import type { FlashMessageState } from "../../types/FlashMessageState";
+import type { FlashMessageStyle } from "../../types/FlashMessageStyle";
+import { Hitbox } from "../Hitbox";
+
+/**
+ * Creates a new React component representing a flash message.
+ * @template T              The names of the types available.
+ * @param flashMessageStyle The style of the flash message to create.
+ * @returns                 The created React component.
+ */
+export function createFlashMessageComponent<T extends string>(
+  flashMessageStyle: FlashMessageStyle<T>
+): React.FunctionComponent<{
+  /**
+   * When null, the flash message is closed.  When non-null, the details of the
+   * flash message which may be displayed (the user can dismiss the current
+   * message).
+   */
+  readonly state: null | FlashMessageState<T>;
+}> {
+  const hitboxStylesInput: { [TKey in T]?: ViewStyle } = {};
+  const textStylesInput: { [TKey in T]?: TextStyle } = {};
+
+  for (const typeKey in flashMessageStyle.types) {
+    const typeValue = flashMessageStyle.types[typeKey];
+
+    const hitboxStyle: ViewStyle = {
+      backgroundColor: typeValue.backgroundColor,
+    };
+
+    if (typeValue.border !== null) {
+      hitboxStyle.borderWidth = typeValue.border.width;
+      hitboxStyle.borderColor = typeValue.border.color;
+    }
+
+    if (flashMessageStyle.horizontalPadding !== 0) {
+      hitboxStyle.paddingHorizontal = flashMessageStyle.horizontalPadding;
+    }
+
+    if (flashMessageStyle.verticalPadding !== 0) {
+      hitboxStyle.paddingVertical = flashMessageStyle.verticalPadding;
+    }
+
+    if (flashMessageStyle.radius !== 0) {
+      hitboxStyle.borderRadius = flashMessageStyle.radius;
+    }
+
+    hitboxStylesInput[typeKey] = hitboxStyle;
+
+    const textStyle: TextStyle = {
+      fontFamily: flashMessageStyle.fontFamily,
+      fontSize: flashMessageStyle.fontSize,
+      lineHeight: flashMessageStyle.fontSize * 1.4,
+      color: typeValue.color,
+    };
+
+    textStylesInput[typeKey] = textStyle;
+  }
+
+  const hitboxStyles = StyleSheet.create(
+    hitboxStylesInput as { readonly [TKey in T]: ViewStyle }
+  );
+
+  const textStyles = StyleSheet.create(
+    textStylesInput as { readonly [TKey in T]: TextStyle }
+  );
+
+  return ({ state }) => {
+    const refresh = useRefresh();
+    const internalState = React.useRef({
+      open: state !== null,
+      type: state === null ? null : state.type,
+      message: state === null ? null : state.message,
+    });
+
+    if (state === null) {
+      internalState.current.open = false;
+      internalState.current.type = null;
+      internalState.current.message = null;
+    } else if (
+      state.type !== internalState.current.type ||
+      state.message !== internalState.current.message
+    ) {
+      internalState.current.open = true;
+      internalState.current.type = state.type;
+      internalState.current.message = state.message;
+    }
+
+    if (state !== null && internalState.current.open) {
+      return (
+        <Hitbox
+          disabled={false}
+          onPress={() => {
+            console.log("let us go!");
+            internalState.current.open = false;
+            refresh();
+          }}
+          style={hitboxStyles[state.type]}
+        >
+          <Text style={textStyles[state.type]}>{state.message}</Text>
+        </Hitbox>
+      );
+    } else {
+      return null;
+    }
+  };
+}
diff --git a/components/createFlashMessageComponent/readme.md b/components/createFlashMessageComponent/readme.md
new file mode 100644
index 00000000..b63dc634
--- /dev/null
+++ b/components/createFlashMessageComponent/readme.md
@@ -0,0 +1,76 @@
+# `react-native-app-helpers/createFlashMessageComponent`
+
+Creates a new React component representing a flash message.
+
+## Usage
+
+```tsx
+import { createFlashMessageComponent, FlashMessageState } from "react-native-app-helpers";
+import { Button } from "react-native";
+
+const ExampleFlashMessage = createFlashMessageComponent(
+{
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  }
+);
+
+const ExampleScreen = () => {
+  const [state, setState] = React.useState<null | FlashMessageState<`exampleTypeA` | `exampleTypeB` | `exampleTypeC` | `exampleTypeD`>>(null);
+
+  return (
+    <React.Fragment>
+      <ExampleFlashMessage state={state} />
+      <Button
+        onPress={() => {
+          setState({
+            type: `exampleTypeB`,
+            message: `This is example message B.`,
+          })
+        }}
+        title="Show Message B"
+      />
+      <Button
+        onPress={() => {
+          setState({
+            type: `exampleTypeC`,
+            message: `This is example message C.`,
+          })
+        }}
+        title="Show Message C"
+      />
+    </React.Fragment>
+  );
+};
+```
diff --git a/components/createFlashMessageComponent/unit.tsx b/components/createFlashMessageComponent/unit.tsx
new file mode 100644
index 00000000..01f2bfc6
--- /dev/null
+++ b/components/createFlashMessageComponent/unit.tsx
@@ -0,0 +1,1125 @@
+import * as React from "react";
+import { Text } from "react-native";
+import * as TestRenderer from "react-test-renderer";
+import { createFlashMessageComponent } from "../..";
+import { Hitbox } from "../Hitbox";
+
+test(`can initially be hidden`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(<Component state={null} />);
+
+  expect(renderer.toTree()?.rendered).toBeNull();
+
+  renderer.unmount();
+});
+
+test(`can initially be shown`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`can change from hidden to visible`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(<Component state={null} />);
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`can change to another message when initially shown`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message A`,
+      }}
+    />
+  );
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message B`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message B`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`can change to another type when initially shown`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeC`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`remains open if unchanged`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`closes when pressed`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  console.log("before press");
+  TestRenderer.act(() => {
+    (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree).props[
+      `onPress`
+    ]();
+  });
+  console.log("after press");
+
+  expect(renderer.toTree()?.rendered).toBeNull();
+
+  renderer.unmount();
+});
+
+test(`remains closed when the state does not change`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  TestRenderer.act(() => {
+    (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree).props[
+      `onPress`
+    ]();
+  });
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toBeNull();
+
+  renderer.unmount();
+});
+
+test(`shows again when the message changes`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message A`,
+      }}
+    />
+  );
+
+  TestRenderer.act(() => {
+    (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree).props[
+      `onPress`
+    ]();
+  });
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message B`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message B`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`shows again when the type changes`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeC`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  TestRenderer.act(() => {
+    (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree).props[
+      `onPress`
+    ]();
+  });
+
+  renderer.update(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`closes when withdrawn`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  renderer.update(<Component state={null} />);
+
+  expect(renderer.toTree()?.rendered).toBeNull();
+
+  renderer.unmount();
+});
+
+test(`renders as expected without border radius`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 0,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`renders as expected without horizontal padding`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 0,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`renders as expected without vertical padding`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 0,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: {
+          width: 15,
+          color: `orange`,
+        },
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        borderWidth: 15,
+        borderColor: `orange`,
+        paddingHorizontal: 41,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
+
+test(`renders as expected without borders`, () => {
+  const Component = createFlashMessageComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 25,
+    radius: 12,
+    horizontalPadding: 41,
+    verticalPadding: 57,
+    types: {
+      exampleTypeA: {
+        backgroundColor: `red`,
+        color: `green`,
+        border: null,
+      },
+      exampleTypeB: {
+        backgroundColor: `blue`,
+        color: `yellow`,
+        border: null,
+      },
+      exampleTypeC: {
+        backgroundColor: `purple`,
+        color: `cyan`,
+        border: null,
+      },
+      exampleTypeD: {
+        backgroundColor: `magenta`,
+        color: `black`,
+        border: {
+          width: 24,
+          color: `white`,
+        },
+      },
+    },
+  });
+
+  const renderer = TestRenderer.create(
+    <Component
+      state={{
+        type: `exampleTypeB`,
+        message: `Example Message`,
+      }}
+    />
+  );
+
+  expect(renderer.toTree()?.rendered).toMatchObject({
+    type: Hitbox,
+    props: {
+      onPress: expect.any(Function),
+      disabled: false,
+      style: {
+        backgroundColor: `blue`,
+        paddingHorizontal: 41,
+        paddingVertical: 57,
+        borderRadius: 12,
+      },
+      children: expect.objectContaining({
+        type: Text,
+        props: {
+          style: {
+            fontFamily: `Example Font Family`,
+            fontSize: 25,
+            lineHeight: 35,
+            color: `yellow`,
+          },
+          children: `Example Message`,
+        },
+      }),
+    },
+  });
+
+  renderer.unmount();
+});
diff --git a/index.ts b/index.ts
index 899a265e..c956a307 100644
--- a/index.ts
+++ b/index.ts
@@ -8,6 +8,7 @@ export { createCreatableSelectComponent } from "./components/createCreatableSele
 export { createDropDownComponent } from "./components/createDropDownComponent";
 export { createFiniteStateMachineRoutingComponent } from "./components/createFiniteStateMachineRoutingComponent";
 export { createFixedWidthComponent } from "./components/createFixedWidthComponent";
+export { createFlashMessageComponent } from "./components/createFlashMessageComponent";
 export { createFlatColorBackgroundComponent } from "./components/createFlatColorBackgroundComponent";
 export { createFullHeightPopoverComponent } from "./components/createFullHeightPopoverComponent";
 export { createHeaderBodyFooterComponent } from "./components/createHeaderBodyFooterComponent";
@@ -54,6 +55,8 @@ export { ControlStyle } from "./types/ControlStyle";
 export { CustomElementTableColumn } from "./types/CustomElementTableColumn";
 export { CustomTextTableColumn } from "./types/CustomTextTableColumn";
 export { FiniteStateMachineRouterState } from "./types/FiniteStateMachineRouterState";
+export { FlashMessageState } from "./types/FlashMessageState";
+export { FlashMessageStyle } from "./types/FlashMessageStyle";
 export { Json } from "./types/Json";
 export { KeyableTableCell } from "./types/KeyableTableCell";
 export { NonKeyableTableCell } from "./types/NonKeyableTableCell";
diff --git a/readme.md b/readme.md
index 0fe10dd9..84d96ff2 100644
--- a/readme.md
+++ b/readme.md
@@ -26,6 +26,7 @@ import { createTextComponent } from "react-native-app-helpers";
 - [createDropDownComponent](./components/createDropDownComponent/readme.md)
 - [createFiniteStateMachineRoutingComponent](./components/createFiniteStateMachineRoutingComponent/readme.md)
 - [createFixedWidthComponent](./components/createFixedWidthComponent/readme.md)
+- [createFlashMessageComponent](./components/createFlashMessageComponent/readme.md)
 - [createFlatColorBackgroundComponent](./components/createFlatColorBackgroundComponent/readme.md)
 - [createFullHeightPopoverComponent](./components/createFullHeightPopoverComponent/readme.md)
 - [createHeaderBodyFooterComponent](./components/createHeaderBodyFooterComponent/readme.md)
@@ -81,6 +82,8 @@ import { createTextComponent } from "react-native-app-helpers";
 - [CustomElementTableColumn](./types/CustomElementTableColumn/readme.md)
 - [CustomTextTableColumn](./types/CustomTextTableColumn/readme.md)
 - [FiniteStateMachineRouterState](./types/FiniteStateMachineRouterState/readme.md)
+- [FlashMessageState](./types/FlashMessageState/readme.md)
+- [FlashMessageStyle](./types/FlashMessageStyle/readme.md)
 - [Json](./types/Json/readme.md)
 - [KeyableTableCell](./types/KeyableTableCell/readme.md)
 - [NonKeyableTableCell](./types/NonKeyableTableCell/readme.md)
diff --git a/types/FlashMessageState/index.tsx b/types/FlashMessageState/index.tsx
new file mode 100644
index 00000000..d3bd608b
--- /dev/null
+++ b/types/FlashMessageState/index.tsx
@@ -0,0 +1,15 @@
+/**
+ * Describes the state of a flash message.
+ * @template T The names of the types available.
+ */
+export type FlashMessageState<T extends string> = {
+  /**
+   * The name of the type to display.
+   */
+  readonly type: T;
+
+  /**
+   * The message to display.
+   */
+  readonly message: string;
+};
diff --git a/types/FlashMessageState/readme.md b/types/FlashMessageState/readme.md
new file mode 100644
index 00000000..43d795ef
--- /dev/null
+++ b/types/FlashMessageState/readme.md
@@ -0,0 +1,14 @@
+# `react-native-app-helpers/FlashMessageState`
+
+Describes the state of a flash message.
+
+## Usage
+
+```tsx
+import type { FlashMessageState } from "react-native-app-helpers";
+
+const flashMessageState: FlashMessageState<`exampleTypeA` | `exampleTypeB` | `exampleTypeC` | `exampleTypeD`> = {
+  type: `exampleTypeB`,
+  message: `Example Message`,
+};
+```
diff --git a/types/FlashMessageStyle/index.tsx b/types/FlashMessageStyle/index.tsx
new file mode 100644
index 00000000..6d2f7637
--- /dev/null
+++ b/types/FlashMessageStyle/index.tsx
@@ -0,0 +1,55 @@
+import type { ColorValue } from "react-native";
+import type { BorderStyle } from "../BorderStyle";
+
+/**
+ * Describes the style of a flash message.
+ * @template T The names of the types available.
+ */
+export type FlashMessageStyle<T extends string> = {
+  /**
+   * The font family to use.
+   */
+  readonly fontFamily: string;
+
+  /**
+   * The font size to use.
+   */
+  readonly fontSize: number;
+
+  /**
+   * The border radius to apply.
+   */
+  readonly radius: number;
+
+  /**
+   * The internal horizontal padding to include.
+   */
+  readonly horizontalPadding: number;
+
+  /**
+   * The internal vertical padding to include.
+   */
+  readonly verticalPadding: number;
+
+  /**
+   * Details specific to flash message types.
+   */
+  readonly types: {
+    readonly [TKey in T]: {
+      /**
+       * The background color used by this type.
+       */
+      readonly backgroundColor: ColorValue;
+
+      /**
+       * The foreground color used by this type.
+       */
+      readonly color: ColorValue;
+
+      /**
+       * The border used by this type (or null if no border is to be included).
+       */
+      readonly border: null | BorderStyle;
+    };
+  };
+};
diff --git a/types/FlashMessageStyle/readme.md b/types/FlashMessageStyle/readme.md
new file mode 100644
index 00000000..d87f8943
--- /dev/null
+++ b/types/FlashMessageStyle/readme.md
@@ -0,0 +1,45 @@
+# `react-native-app-helpers/FlashMessageStyle`
+
+Describes the style of a flash message.
+
+## Usage
+
+```tsx
+import type { FlashMessageStyle } from "react-native-app-helpers";
+
+const flashMessageStyle: FlashMessageStyle<`exampleTypeA` | `exampleTypeB` | `exampleTypeC` | `exampleTypeD`> = {
+  fontFamily: `Example Font Family`,
+  fontSize: 25,
+  radius: 12,
+  horizontalPadding: 41,
+  verticalPadding: 57,
+  types: {
+    exampleTypeA: {
+      backgroundColor: `red`,
+      color: `green`,
+      border: null,
+    },
+    exampleTypeB: {
+      backgroundColor: `blue`,
+      color: `yellow`,
+      border: {
+        width: 15,
+        color: `orange`,
+      },
+    },
+    exampleTypeC: {
+      backgroundColor: `purple`,
+      color: `cyan`,
+      border: null,
+    },
+    exampleTypeD: {
+      backgroundColor: `magenta`,
+      color: `black`,
+      border: {
+        width: 24,
+        color: `white`,
+      },
+    },
+  },
+};
+```