1 files changed, 181 insertions, 0 deletions
diff --git a/app/screens/demo/demo-screen.tsx b/app/screens/demo/demo-screen.tsx
new file mode 100644
index 0000000..40e3830
--- /dev/null
+++ b/app/screens/demo/demo-screen.tsx
@@ -0,0 +1,181 @@
+import React from "react"
+import { ImageStyle, Platform, TextStyle, View, ViewStyle } from "react-native"
+import { useNavigation } from "@react-navigation/native"
+import { observer } from "mobx-react-lite"
+import {
+  BulletItem,
+  Button,
+  Header,
+  Text,
+  Screen,
+  Wallpaper,
+  AutoImage as Image,
+} from "../../components"
+import { color, spacing } from "../../theme"
+import { Api } from "../../services/api"
+import { save } from "../../utils/storage"
+export const logoIgnite = require("./logo-ignite.png")
+export const heart = require("./heart.png")
+
+const FULL: ViewStyle = { flex: 1 }
+const CONTAINER: ViewStyle = {
+  backgroundColor: color.transparent,
+  paddingHorizontal: spacing[4],
+}
+const DEMO: ViewStyle = {
+  paddingVertical: spacing[4],
+  paddingHorizontal: spacing[4],
+  backgroundColor: color.palette.deepPurple,
+}
+const BOLD: TextStyle = { fontWeight: "bold" }
+const DEMO_TEXT: TextStyle = {
+  ...BOLD,
+  fontSize: 13,
+  letterSpacing: 2,
+}
+const HEADER: TextStyle = {
+  paddingTop: spacing[3],
+  paddingBottom: spacing[5] - 1,
+  paddingHorizontal: 0,
+}
+const HEADER_TITLE: TextStyle = {
+  ...BOLD,
+  fontSize: 12,
+  lineHeight: 15,
+  textAlign: "center",
+  letterSpacing: 1.5,
+}
+const TITLE: TextStyle = {
+  ...BOLD,
+  fontSize: 28,
+  lineHeight: 38,
+  textAlign: "center",
+  marginBottom: spacing[5],
+}
+const TAGLINE: TextStyle = {
+  color: "#BAB6C8",
+  fontSize: 15,
+  lineHeight: 22,
+  marginBottom: spacing[4] + spacing[1],
+}
+const IGNITE: ImageStyle = {
+  marginVertical: spacing[6],
+  alignSelf: "center",
+  width: 180,
+  height: 100,
+}
+const LOVE_WRAPPER: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "center",
+}
+const LOVE: TextStyle = {
+  color: "#BAB6C8",
+  fontSize: 15,
+  lineHeight: 22,
+}
+const HEART: ImageStyle = {
+  marginHorizontal: spacing[2],
+  width: 10,
+  height: 10,
+  resizeMode: "contain",
+}
+const HINT: TextStyle = {
+  color: "#BAB6C8",
+  fontSize: 12,
+  lineHeight: 15,
+  marginVertical: spacing[2],
+}
+
+const platformCommand = Platform.select({
+  ios: "Cmd + D",
+  android: "Cmd/Ctrl + M",
+})
+
+export const DemoScreen = observer(function DemoScreen() {
+  const navigation = useNavigation()
+  const goBack = () => navigation.goBack()
+
+  const demoReactotron = React.useMemo(
+    () => async () => {
+      console.tron.log("Your Friendly tron log message")
+      console.tron.logImportant("I am important")
+      console.tron.display({
+        name: "DISPLAY",
+        value: {
+          numbers: 1,
+          strings: "strings",
+          booleans: true,
+          arrays: [1, 2, 3],
+          objects: {
+            deeper: {
+              deeper: {
+                yay: "👾",
+              },
+            },
+          },
+          functionNames: function hello() {
+            /* dummy function */
+          },
+        },
+        preview: "More control with display()",
+        important: true,
+        image: {
+          uri:
+            "https://avatars2.githubusercontent.com/u/3902527?s=200&u=a0d16b13ed719f35d95ca0f4440f5d07c32c349a&v=4",
+        },
+      })
+      // make an API call for the demo
+      // Don't do API like this, use store's API
+      const demo = new Api()
+      demo.setup()
+      demo.getUser("1")
+      // Let's do some async storage stuff
+      await save("Cool Name", "Boaty McBoatface")
+    },
+    [],
+  )
+
+  return (
+    <View testID="DemoScreen" style={FULL}>
+      <Wallpaper />
+      <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}>
+        <Header
+          headerTx="demoScreen.howTo"
+          leftIcon="back"
+          onLeftPress={goBack}
+          style={HEADER}
+          titleStyle={HEADER_TITLE}
+        />
+        <Text style={TITLE} preset="header" tx="demoScreen.title" />
+        <Text style={TAGLINE} tx="demoScreen.tagLine" />
+        <BulletItem text="Integrated here, Navigation with State, TypeScript, Storybook, Solidarity, and i18n." />
+        <BulletItem
+          text={`To run Storybook, press ${platformCommand} or shake the device to show the developer menu, then select "Toggle Storybook"`}
+        />
+        <BulletItem text="Load up Reactotron!  You can inspect your app, view the events, interact, and so much more!" />
+        <View>
+          <Button
+            style={DEMO}
+            textStyle={DEMO_TEXT}
+            tx="demoScreen.reactotron"
+            onPress={demoReactotron}
+          />
+          <Text style={HINT} tx={`demoScreen.${Platform.OS}ReactotronHint` as const} />
+        </View>
+        <Button
+          style={DEMO}
+          textStyle={DEMO_TEXT}
+          tx="demoScreen.demoList"
+          onPress={() => navigation.navigate("demoList")}
+        />
+        <Image source={logoIgnite} style={IGNITE} />
+        <View style={LOVE_WRAPPER}>
+          <Text style={LOVE} text="Made with" />
+          <Image source={heart} style={HEART} />
+          <Text style={LOVE} text="by Infinite Red" />
+        </View>
+      </Screen>
+    </View>
+  )
+})