6 files changed, 94 insertions, 0 deletions
diff --git a/app/components/wallpaper/bg.png b/app/components/wallpaper/bg.png
new file mode 100644
index 0000000..641838e
--- /dev/null
+++ b/app/components/wallpaper/bg.png
diff --git a/app/components/wallpaper/[email protected] b/app/components/wallpaper/[email protected]
new file mode 100644
index 0000000..3ae8396
--- /dev/null
+++ b/app/components/wallpaper/[email protected]
diff --git a/app/components/wallpaper/wallpaper.presets.ts b/app/components/wallpaper/wallpaper.presets.ts
new file mode 100644
index 0000000..3885b8f
--- /dev/null
+++ b/app/components/wallpaper/wallpaper.presets.ts
@@ -0,0 +1,34 @@
+import { ImageStyle } from "react-native"
+
+/**
+ * All wallpaper will start off looking like this.
+ */
+const BASE: ImageStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+}
+
+/**
+ * All the variations of wallpaper styling within the app.
+ *
+ * You want to customize these to whatever you need in your app.
+ */
+export const presets = {
+  /**
+   * The default wallpaper styles.
+   */
+  stretch: {
+    ...BASE,
+    resizeMode: "stretch",
+    width: null, // Have to set these to null because android ¯\_(ツ)_/¯
+    height: null,
+  } as ImageStyle,
+}
+
+/**
+ * A list of preset names.
+ */
+export type WallpaperPresets = keyof typeof presets
diff --git a/app/components/wallpaper/wallpaper.props.ts b/app/components/wallpaper/wallpaper.props.ts
new file mode 100644
index 0000000..592bac9
--- /dev/null
+++ b/app/components/wallpaper/wallpaper.props.ts
@@ -0,0 +1,19 @@
+import { ImageStyle, StyleProp } from "react-native"
+import { WallpaperPresets } from "./wallpaper.presets"
+
+export interface WallpaperProps {
+  /**
+   * An optional style override useful for padding & margin.
+   */
+  style?: StyleProp<ImageStyle>
+
+  /**
+   * An optional background image to override the default image.
+   */
+  backgroundImage?: string
+
+  /**
+   * One of the different types of wallpaper presets.
+   */
+  preset?: WallpaperPresets
+}
diff --git a/app/components/wallpaper/wallpaper.story.tsx b/app/components/wallpaper/wallpaper.story.tsx
new file mode 100644
index 0000000..8f5488a
--- /dev/null
+++ b/app/components/wallpaper/wallpaper.story.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+import { storiesOf } from "@storybook/react-native"
+import { StoryScreen, Story, UseCase } from "../../../storybook/views"
+import { Wallpaper } from "./wallpaper"
+
+declare let module
+
+storiesOf("Wallpaper", module)
+  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
+  .add("Style Presets", () => (
+    <Story>
+      <UseCase text="default/stretch" usage="Full screen wallpaper image.">
+        <Wallpaper />
+      </UseCase>
+    </Story>
+  ))
diff --git a/app/components/wallpaper/wallpaper.tsx b/app/components/wallpaper/wallpaper.tsx
new file mode 100644
index 0000000..ebba75a
--- /dev/null
+++ b/app/components/wallpaper/wallpaper.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import { AutoImage as Image } from "../auto-image/auto-image"
+import { presets } from "./wallpaper.presets"
+import { WallpaperProps } from "./wallpaper.props"
+
+const defaultImage = require("./bg.png")
+
+/**
+ * For your text displaying needs.
+ *
+ * This component is a HOC over the built-in React Native one.
+ */
+export function Wallpaper(props: WallpaperProps) {
+  // grab the props
+  const { preset = "stretch", style: styleOverride, backgroundImage } = props
+
+  // assemble the style
+  const presetToUse = presets[preset] || presets.stretch
+  const styles = [presetToUse, styleOverride]
+
+  // figure out which image to use
+  const source = backgroundImage || defaultImage
+
+  return <Image source={source} style={styles} />
+}