1 files changed, 42 insertions, 35 deletions

diff --git a/app/screens/demo/demo-screen.tsx b/app/screens/demo/demo-screen.tsx
index 40e3830..7ec8ff6 100644
--- a/app/screens/demo/demo-screen.tsx
+++ b/app/screens/demo/demo-screen.tsx
@@ -1,7 +1,7 @@
-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 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,
@@ -10,12 +10,12 @@ import {
   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")
+} 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 = {
@@ -27,7 +27,7 @@ const DEMO: ViewStyle = {
   paddingHorizontal: spacing[4],
   backgroundColor: color.palette.deepPurple,
 }
-const BOLD: TextStyle = { fontWeight: "bold" }
+const BOLD: TextStyle = { fontWeight: 'bold' }
 const DEMO_TEXT: TextStyle = {
   ...BOLD,
   fontSize: 13,
@@ -42,35 +42,35 @@ const HEADER_TITLE: TextStyle = {
   ...BOLD,
   fontSize: 12,
   lineHeight: 15,
-  textAlign: "center",
+  textAlign: 'center',
   letterSpacing: 1.5,
 }
 const TITLE: TextStyle = {
   ...BOLD,
   fontSize: 28,
   lineHeight: 38,
-  textAlign: "center",
+  textAlign: 'center',
   marginBottom: spacing[5],
 }
 const TAGLINE: TextStyle = {
-  color: "#BAB6C8",
+  color: '#BAB6C8',
   fontSize: 15,
   lineHeight: 22,
   marginBottom: spacing[4] + spacing[1],
 }
 const IGNITE: ImageStyle = {
   marginVertical: spacing[6],
-  alignSelf: "center",
+  alignSelf: 'center',
   width: 180,
   height: 100,
 }
 const LOVE_WRAPPER: ViewStyle = {
-  flexDirection: "row",
-  alignItems: "center",
-  alignSelf: "center",
+  flexDirection: 'row',
+  alignItems: 'center',
+  alignSelf: 'center',
 }
 const LOVE: TextStyle = {
-  color: "#BAB6C8",
+  color: '#BAB6C8',
   fontSize: 15,
   lineHeight: 22,
 }
@@ -78,18 +78,18 @@ const HEART: ImageStyle = {
   marginHorizontal: spacing[2],
   width: 10,
   height: 10,
-  resizeMode: "contain",
+  resizeMode: 'contain',
 }
 const HINT: TextStyle = {
-  color: "#BAB6C8",
+  color: '#BAB6C8',
   fontSize: 12,
   lineHeight: 15,
   marginVertical: spacing[2],
 }
 
 const platformCommand = Platform.select({
-  ios: "Cmd + D",
-  android: "Cmd/Ctrl + M",
+  ios: 'Cmd + D',
+  android: 'Cmd/Ctrl + M',
 })
 
 export const DemoScreen = observer(function DemoScreen() {
@@ -98,19 +98,19 @@ export const DemoScreen = observer(function DemoScreen() {
 
   const demoReactotron = React.useMemo(
     () => async () => {
-      console.tron.log("Your Friendly tron log message")
-      console.tron.logImportant("I am important")
+      console.tron.log('Your Friendly tron log message')
+      console.tron.logImportant('I am important')
       console.tron.display({
-        name: "DISPLAY",
+        name: 'DISPLAY',
         value: {
           numbers: 1,
-          strings: "strings",
+          strings: 'strings',
           booleans: true,
           arrays: [1, 2, 3],
           objects: {
             deeper: {
               deeper: {
-                yay: "👾",
+                yay: '👾',
               },
             },
           },
@@ -118,20 +118,20 @@ export const DemoScreen = observer(function DemoScreen() {
             /* dummy function */
           },
         },
-        preview: "More control with display()",
+        preview: 'More control with display()',
         important: true,
         image: {
           uri:
-            "https://avatars2.githubusercontent.com/u/3902527?s=200&u=a0d16b13ed719f35d95ca0f4440f5d07c32c349a&v=4",
+            '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")
+      demo.getUser('1')
       // Let's do some async storage stuff
-      await save("Cool Name", "Boaty McBoatface")
+      await save('Cool Name', 'Boaty McBoatface')
     },
     [],
   )
@@ -139,7 +139,11 @@ export const DemoScreen = observer(function DemoScreen() {
   return (
     <View testID="DemoScreen" style={FULL}>
       <Wallpaper />
-      <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}>
+      <Screen
+        style={CONTAINER}
+        preset="scroll"
+        backgroundColor={color.transparent}
+      >
         <Header
           headerTx="demoScreen.howTo"
           leftIcon="back"
@@ -161,13 +165,16 @@ export const DemoScreen = observer(function DemoScreen() {
             tx="demoScreen.reactotron"
             onPress={demoReactotron}
           />
-          <Text style={HINT} tx={`demoScreen.${Platform.OS}ReactotronHint` as const} />
+          <Text
+            style={HINT}
+            tx={`demoScreen.${Platform.OS}ReactotronHint` as const}
+          />
         </View>
         <Button
           style={DEMO}
           textStyle={DEMO_TEXT}
           tx="demoScreen.demoList"
-          onPress={() => navigation.navigate("demoList")}
+          onPress={() => navigation.navigate('demoList')}
         />
         <Image source={logoIgnite} style={IGNITE} />
         <View style={LOVE_WRAPPER}>