1 files changed, 51 insertions, 0 deletions
diff --git a/storybook/toggle-storybook.tsx b/storybook/toggle-storybook.tsx
new file mode 100644
index 0000000..394ecf4
--- /dev/null
+++ b/storybook/toggle-storybook.tsx
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react"
+import { DevSettings } from "react-native"
+import { loadString, saveString } from "../app/utils/storage"
+
+/**
+ * Toggle Storybook mode, in __DEV__ mode only.
+ *
+ * In non-__DEV__ mode, or when Storybook isn't toggled on,
+ * renders its children.
+ *
+ * The mode flag is persisted in async storage, which means it
+ * persists across reloads/restarts - this is handy when developing
+ * new components in Storybook.
+ */
+export function ToggleStorybook(props) {
+  const [showStorybook, setShowStorybook] = useState(false)
+  const [StorybookUIRoot, setStorybookUIRoot] = useState(null)
+
+  useEffect(() => {
+    if (__DEV__ && DevSettings) {
+      // Load the setting from storage if it's there
+      loadString("devStorybook").then((storedSetting) => {
+        // Set the initial value
+        setShowStorybook(storedSetting === "on")
+
+        // Add our toggle command to the menu
+        DevSettings.addMenuItem("Toggle Storybook", () => {
+          setShowStorybook((show) => {
+            // On toggle, flip the current value
+            show = !show
+
+            // Write it back to storage
+            saveString("devStorybook", show ? "on" : "off")
+
+            // Return it to change the local state
+            return show
+          })
+        })
+
+        // Load the storybook UI once
+        setStorybookUIRoot(() => require("./storybook").StorybookUIRoot)
+      })
+    }
+  }, [])
+
+  if (showStorybook) {
+    return StorybookUIRoot ? <StorybookUIRoot /> : null
+  } else {
+    return props.children
+  }
+}