Apply Prettier

49 files changed, 955 insertions, 702 deletions

diff --git a/app/components/auto-image/auto-image.story.tsx b/app/components/auto-image/auto-image.story.tsx
index f7ecc86..76e9dab 100644
--- a/app/components/auto-image/auto-image.story.tsx
+++ b/app/components/auto-image/auto-image.story.tsx
@@ -1,31 +1,37 @@
 /* eslint-disable */
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { AutoImage } from "./auto-image"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { AutoImage } from './auto-image'
 
 declare let module
 
-const bowser = require("../../screens/welcome/bowser.png")
-const morty = { uri: "https://rickandmortyapi.com/api/character/avatar/2.jpeg" }
+const bowser = require('../../screens/welcome/bowser.png')
+const morty = { uri: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg' }
 
-storiesOf("AutoImage", module)
+storiesOf('AutoImage', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="With require()">
         <AutoImage source={bowser} />
         <AutoImage source={bowser} style={{ width: 150 }} />
         <AutoImage source={bowser} style={{ width: 150, height: 150 }} />
         <AutoImage source={bowser} style={{ height: 150 }} />
-        <AutoImage source={bowser} style={{ height: 150, resizeMode: "contain" }} />
+        <AutoImage
+          source={bowser}
+          style={{ height: 150, resizeMode: 'contain' }}
+        />
       </UseCase>
       <UseCase text="With URL">
         <AutoImage source={morty} />
         <AutoImage source={morty} style={{ width: 150 }} />
         <AutoImage source={morty} style={{ width: 150, height: 150 }} />
         <AutoImage source={morty} style={{ height: 150 }} />
-        <AutoImage source={morty} style={{ height: 150, resizeMode: "contain" }} />
+        <AutoImage
+          source={morty}
+          style={{ height: 150, resizeMode: 'contain' }}
+        />
       </UseCase>
     </Story>
   ))
diff --git a/app/components/auto-image/auto-image.tsx b/app/components/auto-image/auto-image.tsx
index 39d71ca..a8bfe37 100644
--- a/app/components/auto-image/auto-image.tsx
+++ b/app/components/auto-image/auto-image.tsx
@@ -1,10 +1,10 @@
-import React, { useLayoutEffect, useState } from "react"
+import React, { useLayoutEffect, useState } from 'react'
 import {
   Image as RNImage,
   ImageProps as DefaultImageProps,
   ImageURISource,
   Platform,
-} from "react-native"
+} from 'react-native'
 
 type ImageProps = DefaultImageProps & {
   source: ImageURISource
@@ -31,7 +31,7 @@ export function AutoImage(props: ImageProps) {
       RNImage.getSize(props.source.uri as any, (width, height) => {
         setImageSize({ width, height })
       })
-    } else if (Platform.OS === "web") {
+    } else if (Platform.OS === 'web') {
       // web requires a different method to get it's size
       RNImage.getSize(props.source as any, (width, height) => {
         setImageSize({ width, height })
diff --git a/app/components/bullet-item/bullet-item.tsx b/app/components/bullet-item/bullet-item.tsx
index d999e10..f6b2f17 100644
--- a/app/components/bullet-item/bullet-item.tsx
+++ b/app/components/bullet-item/bullet-item.tsx
@@ -1,15 +1,15 @@
-import * as React from "react"
-import { View, ViewStyle, ImageStyle, TextStyle } from "react-native"
-import { Text } from "../text/text"
-import { Icon } from "../icon/icon"
-import { spacing, typography } from "../../theme"
+import * as React from 'react'
+import { View, ViewStyle, ImageStyle, TextStyle } from 'react-native'
+import { Text } from '../text/text'
+import { Icon } from '../icon/icon'
+import { spacing, typography } from '../../theme'
 
 const BULLET_ITEM: ViewStyle = {
-  flexDirection: "row",
+  flexDirection: 'row',
   marginTop: spacing[4],
   paddingBottom: spacing[4],
   borderBottomWidth: 1,
-  borderBottomColor: "#3A3048",
+  borderBottomColor: '#3A3048',
 }
 const BULLET_CONTAINER: ViewStyle = {
   marginRight: spacing[4] - 1,
@@ -22,7 +22,7 @@ const BULLET: ImageStyle = {
 const BULLET_TEXT: TextStyle = {
   flex: 1,
   fontFamily: typography.primary,
-  color: "#BAB6C8",
+  color: '#BAB6C8',
   fontSize: 15,
   lineHeight: 22,
 }
diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts
index b140fd2..bc0ad3f 100644
--- a/app/components/button/button.presets.ts
+++ b/app/components/button/button.presets.ts
@@ -1,5 +1,5 @@
-import { ViewStyle, TextStyle } from "react-native"
-import { color, spacing } from "../../theme"
+import { ViewStyle, TextStyle } from 'react-native'
+import { color, spacing } from '../../theme'
 
 /**
  * All text will start off looking like this.
@@ -8,8 +8,8 @@ const BASE_VIEW: ViewStyle = {
   paddingVertical: spacing[2],
   paddingHorizontal: spacing[2],
   borderRadius: 4,
-  justifyContent: "center",
-  alignItems: "center",
+  justifyContent: 'center',
+  alignItems: 'center',
 }
 
 const BASE_TEXT: TextStyle = {
@@ -34,12 +34,16 @@ export const viewPresets: Record<string, ViewStyle> = {
     ...BASE_VIEW,
     paddingHorizontal: 0,
     paddingVertical: 0,
-    alignItems: "flex-start",
+    alignItems: 'flex-start',
   } as ViewStyle,
 }
 
 export const textPresets: Record<ButtonPresetNames, TextStyle> = {
-  primary: { ...BASE_TEXT, fontSize: 9, color: color.palette.white } as TextStyle,
+  primary: {
+    ...BASE_TEXT,
+    fontSize: 9,
+    color: color.palette.white,
+  } as TextStyle,
   link: {
     ...BASE_TEXT,
     color: color.text,
diff --git a/app/components/button/button.props.ts b/app/components/button/button.props.ts
index 1377a7e..5f26136 100644
--- a/app/components/button/button.props.ts
+++ b/app/components/button/button.props.ts
@@ -1,6 +1,11 @@
-import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native"
-import { ButtonPresetNames } from "./button.presets"
-import { TxKeyPath } from "../../i18n"
+import {
+  StyleProp,
+  TextStyle,
+  TouchableOpacityProps,
+  ViewStyle,
+} from 'react-native'
+import { ButtonPresetNames } from './button.presets'
+import { TxKeyPath } from '../../i18n'
 
 export interface ButtonProps extends TouchableOpacityProps {
   /**
diff --git a/app/components/button/button.story.tsx b/app/components/button/button.story.tsx
index 4861772..5dc21c1 100644
--- a/app/components/button/button.story.tsx
+++ b/app/components/button/button.story.tsx
@@ -1,30 +1,48 @@
-import * as React from "react"
-import { ViewStyle, TextStyle, Alert } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Button } from "./button"
+import * as React from 'react'
+import { ViewStyle, TextStyle, Alert } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Button } from './button'
 
 declare let module
 
-const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }]
+const buttonStyleArray: ViewStyle[] = [
+  { paddingVertical: 100 },
+  { borderRadius: 0 },
+]
 
-const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: "#a511dc" }]
+const buttonTextStyleArray: TextStyle[] = [
+  { fontSize: 20 },
+  { color: '#a511dc' },
+]
 
-storiesOf("Button", module)
+storiesOf('Button', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="Primary" usage="The primary button.">
-        <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} />
+        <Button
+          text="Click It"
+          preset="primary"
+          onPress={() => Alert.alert('pressed')}
+        />
       </UseCase>
-      <UseCase text="Disabled" usage="The disabled behaviour of the primary button.">
-        <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} disabled />
+      <UseCase
+        text="Disabled"
+        usage="The disabled behaviour of the primary button."
+      >
+        <Button
+          text="Click It"
+          preset="primary"
+          onPress={() => Alert.alert('pressed')}
+          disabled
+        />
       </UseCase>
       <UseCase text="Array Style" usage="Button with array style">
         <Button
           text="Click It"
           preset="primary"
-          onPress={() => Alert.alert("pressed")}
+          onPress={() => Alert.alert('pressed')}
           style={buttonStyleArray}
           textStyle={buttonTextStyleArray}
         />
diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx
index a5662ff..03b8f85 100644
--- a/app/components/button/button.tsx
+++ b/app/components/button/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { TouchableOpacity } from "react-native"
-import { Text } from "../text/text"
-import { viewPresets, textPresets } from "./button.presets"
-import { ButtonProps } from "./button.props"
+import * as React from 'react'
+import { TouchableOpacity } from 'react-native'
+import { Text } from '../text/text'
+import { viewPresets, textPresets } from './button.presets'
+import { ButtonProps } from './button.props'
 
 /**
  * For your text displaying needs.
@@ -12,7 +12,7 @@ import { ButtonProps } from "./button.props"
 export function Button(props: ButtonProps) {
   // grab the props
   const {
-    preset = "primary",
+    preset = 'primary',
     tx,
     text,
     style: styleOverride,
diff --git a/app/components/checkbox/checkbox.props.ts b/app/components/checkbox/checkbox.props.ts
index 01a13d0..4a212e3 100644
--- a/app/components/checkbox/checkbox.props.ts
+++ b/app/components/checkbox/checkbox.props.ts
@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle } from "react-native"
-import { TxKeyPath } from "../../i18n"
+import { StyleProp, ViewStyle } from 'react-native'
+import { TxKeyPath } from '../../i18n'
 
 export interface CheckboxProps {
   /**
diff --git a/app/components/checkbox/checkbox.story.tsx b/app/components/checkbox/checkbox.story.tsx
index f8d80d8..9d1429a 100644
--- a/app/components/checkbox/checkbox.story.tsx
+++ b/app/components/checkbox/checkbox.story.tsx
@@ -1,26 +1,37 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 
-import * as React from "react"
-import { View, ViewStyle } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Checkbox } from "./checkbox"
-import { Toggle } from "react-powerplug"
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Checkbox } from './checkbox'
+import { Toggle } from 'react-powerplug'
 
 declare let module
 
-const arrayStyle: ViewStyle[] = [{ paddingVertical: 40 }, { alignSelf: "flex-end" }]
-const arrayOutlineStyle: ViewStyle[] = [{ borderColor: "#b443c9" }, { borderWidth: 25 }]
-const arrayFillStyle: ViewStyle[] = [{ backgroundColor: "#55e0ff" }]
+const arrayStyle: ViewStyle[] = [
+  { paddingVertical: 40 },
+  { alignSelf: 'flex-end' },
+]
+const arrayOutlineStyle: ViewStyle[] = [
+  { borderColor: '#b443c9' },
+  { borderWidth: 25 },
+]
+const arrayFillStyle: ViewStyle[] = [{ backgroundColor: '#55e0ff' }]
 
-storiesOf("Checkbox", module)
+storiesOf('Checkbox', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Behaviour", () => (
+  .add('Behaviour', () => (
     <Story>
-      <UseCase text="The Checkbox" usage="Use the checkbox to represent on/off states.">
+      <UseCase
+        text="The Checkbox"
+        usage="Use the checkbox to represent on/off states."
+      >
         <Toggle initial={false}>
-          {({ on, toggle }) => <Checkbox value={on} onToggle={toggle} text="Toggle me" />}
+          {({ on, toggle }) => (
+            <Checkbox value={on} onToggle={toggle} text="Toggle me" />
+          )}
         </Toggle>
       </UseCase>
       <UseCase text="value = true" usage="This is permanently on.">
@@ -31,7 +42,7 @@ storiesOf("Checkbox", module)
       </UseCase>
     </Story>
   ))
-  .add("Styling", () => (
+  .add('Styling', () => (
     <Story>
       <UseCase text="multiline = true" usage="For really really long text">
         <Toggle initial={false}>
@@ -55,7 +66,7 @@ storiesOf("Checkbox", module)
                 text="Hello there!"
                 value={on}
                 style={{
-                  backgroundColor: "purple",
+                  backgroundColor: 'purple',
                   marginLeft: 40,
                   paddingVertical: 30,
                   paddingLeft: 60,
@@ -74,7 +85,7 @@ storiesOf("Checkbox", module)
                 text="Outline is the box frame"
                 value={on}
                 outlineStyle={{
-                  borderColor: "green",
+                  borderColor: 'green',
                   borderRadius: 10,
                   borderWidth: 4,
                   width: 60,
@@ -93,7 +104,7 @@ storiesOf("Checkbox", module)
               <Checkbox
                 text="Fill er up"
                 value={on}
-                fillStyle={{ backgroundColor: "red", borderRadius: 8 }}
+                fillStyle={{ backgroundColor: 'red', borderRadius: 8 }}
                 onToggle={toggle}
               />
             </View>
diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx
index fc3992a..d788114 100644
--- a/app/components/checkbox/checkbox.tsx
+++ b/app/components/checkbox/checkbox.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { TextStyle, TouchableOpacity, View, ViewStyle } from "react-native"
-import { Text } from "../text/text"
-import { color, spacing } from "../../theme"
-import { CheckboxProps } from "./checkbox.props"
+import * as React from 'react'
+import { TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { Text } from '../text/text'
+import { color, spacing } from '../../theme'
+import { CheckboxProps } from './checkbox.props'
 
 const ROOT: ViewStyle = {
-  flexDirection: "row",
+  flexDirection: 'row',
   paddingVertical: spacing[1],
-  alignSelf: "flex-start",
+  alignSelf: 'flex-start',
 }
 
 const DIMENSIONS = { width: 16, height: 16 }
@@ -15,8 +15,8 @@ const DIMENSIONS = { width: 16, height: 16 }
 const OUTLINE: ViewStyle = {
   ...DIMENSIONS,
   marginTop: 2, // finicky and will depend on font/line-height/baseline/weather
-  justifyContent: "center",
-  alignItems: "center",
+  justifyContent: 'center',
+  alignItems: 'center',
   borderWidth: 1,
   borderColor: color.primaryDarker,
   borderRadius: 1,
@@ -37,7 +37,9 @@ export function Checkbox(props: CheckboxProps) {
   const outlineStyle = [OUTLINE, props.outlineStyle]
   const fillStyle = [FILL, props.fillStyle]
 
-  const onPress = props.onToggle ? () => props.onToggle && props.onToggle(!props.value) : null
+  const onPress = props.onToggle
+    ? () => props.onToggle && props.onToggle(!props.value)
+    : null
 
   return (
     <TouchableOpacity
@@ -46,8 +48,15 @@ export function Checkbox(props: CheckboxProps) {
       onPress={onPress}
       style={rootStyle}
     >
-      <View style={outlineStyle}>{props.value && <View style={fillStyle} />}</View>
-      <Text text={props.text} tx={props.tx} numberOfLines={numberOfLines} style={LABEL} />
+      <View style={outlineStyle}>
+        {props.value && <View style={fillStyle} />}
+      </View>
+      <Text
+        text={props.text}
+        tx={props.tx}
+        numberOfLines={numberOfLines}
+        style={LABEL}
+      />
     </TouchableOpacity>
   )
 }
diff --git a/app/components/form-row/form-row.presets.ts b/app/components/form-row/form-row.presets.ts
index 7c10294..0c796c2 100644
--- a/app/components/form-row/form-row.presets.ts
+++ b/app/components/form-row/form-row.presets.ts
@@ -1,5 +1,5 @@
-import { ViewStyle } from "react-native"
-import { color, spacing } from "../../theme"
+import { ViewStyle } from 'react-native'
+import { color, spacing } from '../../theme'
 
 /**
  * The size of the border radius.
diff --git a/app/components/form-row/form-row.props.tsx b/app/components/form-row/form-row.props.tsx
index f010206..55b632e 100644
--- a/app/components/form-row/form-row.props.tsx
+++ b/app/components/form-row/form-row.props.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import { StyleProp, ViewStyle } from "react-native"
-import { FormRowPresets } from "./form-row.presets"
+import * as React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { FormRowPresets } from './form-row.presets'
 
 /**
  * The properties you can pass to FormRow.
diff --git a/app/components/form-row/form-row.story.tsx b/app/components/form-row/form-row.story.tsx
index 509afbb..97e43a2 100644
--- a/app/components/form-row/form-row.story.tsx
+++ b/app/components/form-row/form-row.story.tsx
@@ -1,23 +1,23 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Text, FormRow } from "../"
-import { color } from "../../theme/color"
-import { ViewStyle } from "react-native"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Text, FormRow } from '../'
+import { color } from '../../theme/color'
+import { ViewStyle } from 'react-native'
 
 declare let module
 
 const TEXT_STYLE_OVERRIDE = {
   color: color.storybookTextColor,
 }
-const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: "#32cd32" }]
+const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: '#32cd32' }]
 
-storiesOf("FormRow", module)
+storiesOf('FormRow', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Assembled", () => (
+  .add('Assembled', () => (
     <Story>
       <UseCase
         text="Fully Assembled"
@@ -30,9 +30,10 @@ storiesOf("FormRow", module)
         </FormRow>
         <FormRow preset="middle">
           <Text style={TEXT_STYLE_OVERRIDE}>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi officia quo rerum
-            impedit asperiores hic ex quae, quam dolores vel odit doloribus, tempore atque deserunt
-            possimus incidunt, obcaecati numquam officiis.
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
+            officia quo rerum impedit asperiores hic ex quae, quam dolores vel
+            odit doloribus, tempore atque deserunt possimus incidunt, obcaecati
+            numquam officiis.
           </Text>
         </FormRow>
         <FormRow preset="middle">
@@ -47,20 +48,25 @@ storiesOf("FormRow", module)
       <UseCase text="Alternatives" usage="Less commonly used presets.">
         <FormRow preset="clear">
           <Text style={TEXT_STYLE_OVERRIDE}>
-            My borders are still there, but they are clear. This causes the text to still align
-            properly due to the box model of flexbox.
+            My borders are still there, but they are clear. This causes the text
+            to still align properly due to the box model of flexbox.
           </Text>
         </FormRow>
         <FormRow preset="soloRound">
           <Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text>
         </FormRow>
-        <FormRow preset="soloStraight" style={{ marginTop: 10, backgroundColor: "#ffe" }}>
-          <Text style={TEXT_STYLE_OVERRIDE}>I'm square and have a custom style.</Text>
+        <FormRow
+          preset="soloStraight"
+          style={{ marginTop: 10, backgroundColor: '#ffe' }}
+        >
+          <Text style={TEXT_STYLE_OVERRIDE}>
+            I'm square and have a custom style.
+          </Text>
         </FormRow>
       </UseCase>
     </Story>
   ))
-  .add("Presets", () => (
+  .add('Presets', () => (
     <Story>
       <UseCase text="top" usage="The top of a form.">
         <FormRow preset="top">
@@ -70,7 +76,9 @@ storiesOf("FormRow", module)
       </UseCase>
       <UseCase text="middle" usage="A row in the middle of a form.">
         <FormRow preset="middle">
-          <Text style={TEXT_STYLE_OVERRIDE}>No curves and empty at the bottom.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>
+            No curves and empty at the bottom.
+          </Text>
         </FormRow>
       </UseCase>
       <UseCase text="bottom" usage="The bottom of a form.">
@@ -96,7 +104,7 @@ storiesOf("FormRow", module)
       </UseCase>
     </Story>
   ))
-  .add("Styling", () => (
+  .add('Styling', () => (
     <Story>
       <UseCase text="Style array" usage="Form row with an array of styles">
         <FormRow preset="soloStraight" style={arrayStyle}>
diff --git a/app/components/form-row/form-row.tsx b/app/components/form-row/form-row.tsx
index 2045336..c6453bc 100644
--- a/app/components/form-row/form-row.tsx
+++ b/app/components/form-row/form-row.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { View } from "react-native"
-import { PRESETS } from "./form-row.presets"
-import { FormRowProps } from "./form-row.props"
+import * as React from 'react'
+import { View } from 'react-native'
+import { PRESETS } from './form-row.presets'
+import { FormRowProps } from './form-row.props'
 
 /**
  * A horizontal container component used to hold a row of a form.
diff --git a/app/components/graph-ui/graph-ui.story.tsx b/app/components/graph-ui/graph-ui.story.tsx
index 71151c8..7564c93 100644
--- a/app/components/graph-ui/graph-ui.story.tsx
+++ b/app/components/graph-ui/graph-ui.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { GraphUi } from "./graph-ui"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { GraphUi } from './graph-ui'
 
-storiesOf("GraphUi", module)
+storiesOf('GraphUi', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="Primary" usage="The primary.">
         <GraphUi style={{ backgroundColor: color.error }} />
diff --git a/app/components/graph-ui/graph-ui.tsx b/app/components/graph-ui/graph-ui.tsx
index 9ea792a..36a675a 100644
--- a/app/components/graph-ui/graph-ui.tsx
+++ b/app/components/graph-ui/graph-ui.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { LocalButton, Text, Tweaks } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { LocalButton, Text, Tweaks } from '../'
+import { flatten } from 'ramda'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -20,8 +20,8 @@ export interface GraphUiProps {
    * An optional style override useful for padding & margin.
    */
   style?: StyleProp<ViewStyle>
-    physics
-    setPhysics
+  physics
+  setPhysics
 }
 
 /**
@@ -32,9 +32,17 @@ export const GraphUi = observer(function GraphUi(props: GraphUiProps) {
   const styles = flatten([CONTAINER, style])
 
   return (
-      <View style={{height: "100%", width: "100%", borderStyle: "solid", borderWidth: 5,position:"relative"}}>
-        <Tweaks physics={physics} setPhysics={setPhysics} />
-        <LocalButton physics={physics} setPhysics={setPhysics}/>
+    <View
+      style={{
+        height: '100%',
+        width: '100%',
+        borderStyle: 'solid',
+        borderWidth: 5,
+        position: 'relative',
+      }}
+    >
+      <Tweaks physics={physics} setPhysics={setPhysics} />
+      <LocalButton physics={physics} setPhysics={setPhysics} />
     </View>
   )
 })
diff --git a/app/components/graph/graph.story.tsx b/app/components/graph/graph.story.tsx
index e5385e6..3b094d9 100644
--- a/app/components/graph/graph.story.tsx
+++ b/app/components/graph/graph.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Graph } from "./graph"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Graph } from './graph'
 
-storiesOf("Graph", module)
+storiesOf('Graph', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="Primary" usage="The primary.">
         <Graph style={{ backgroundColor: color.error }} />
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 5e68c3f..7b175a1 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -1,22 +1,27 @@
-import * as React from "react"
-import { useState, useEffect, useRef, useMemo, useCallback } from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
 
 //import data from "../../data/miserables.json"
 //import genRandomTree from "../../data/randomdata";
 //import gData from "../../data/rando.json"
 
-import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
-import * as d3 from "d3-force-3d"
+import {
+  ForceGraph2D,
+  ForceGraph3D,
+  ForceGraphVR,
+  ForceGraphAR,
+} from 'react-force-graph'
+import * as d3 from 'd3-force-3d'
 //import * as three from "three"
-import SpriteText from "three-spritetext"
+import SpriteText from 'three-spritetext'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -35,16 +40,25 @@ export interface GraphProps {
   setPhysics
   nodeIds: string[]
   threeDim
-    setThreeDim
-    local
-    setLocal
+  setThreeDim
+  local
+  setLocal
 }
 
 /**
  * Describe your component here
  */
 export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
-  const { style, physics, setPhysics, gData, threeDim, setThreeDim, local, setLocal } = props
+  const {
+    style,
+    physics,
+    setPhysics,
+    gData,
+    threeDim,
+    setThreeDim,
+    local,
+    setLocal,
+  } = props
   const styles = flatten([CONTAINER, style])
 
   const fgRef = useRef()
@@ -60,30 +74,30 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
     const fg = fgRef.current
     //fg.d3Force('center').strength(0.05);
     if (physics.gravityOn) {
-      fg.d3Force("x", d3.forceX().strength(physics.gravity))
-      fg.d3Force("y", d3.forceY().strength(physics.gravity))
+      fg.d3Force('x', d3.forceX().strength(physics.gravity))
+      fg.d3Force('y', d3.forceY().strength(physics.gravity))
       if (threeDim) {
         if (physics.galaxy) {
-          fg.d3Force("x", d3.forceX().strength(physics.gravity / 5))
-          fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5))
+          fg.d3Force('x', d3.forceX().strength(physics.gravity / 5))
+          fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
         } else {
-          fg.d3Force("x", d3.forceX().strength(physics.gravity))
-          fg.d3Force("z", d3.forceZ().strength(physics.gravity))
+          fg.d3Force('x', d3.forceX().strength(physics.gravity))
+          fg.d3Force('z', d3.forceZ().strength(physics.gravity))
         }
       } else {
-        fg.d3Force("z", null)
+        fg.d3Force('z', null)
       }
     } else {
-      fg.d3Force("x", null)
-      fg.d3Force("y", null)
-      threeDim ? fg.d3Force("z", null) : null
+      fg.d3Force('x', null)
+      fg.d3Force('y', null)
+      threeDim ? fg.d3Force('z', null) : null
     }
-    fg.d3Force("link").strength(physics.linkStrength)
-    fg.d3Force("link").iterations(physics.linkIts)
+    fg.d3Force('link').strength(physics.linkStrength)
+    fg.d3Force('link').iterations(physics.linkIts)
     physics.collision
-      ? fg.d3Force("collide", d3.forceCollide().radius(20))
-      : fg.d3Force("collide", null)
-    fg.d3Force("charge").strength(physics.charge)
+      ? fg.d3Force('collide', d3.forceCollide().radius(20))
+      : fg.d3Force('collide', null)
+    fg.d3Force('charge').strength(physics.charge)
   })
 
   // For the expandable version of the graph
@@ -143,7 +157,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   }
 
   const handleNodeHover = (node) => {
-    console.log("hover")
+    console.log('hover')
     if (!selectedNode) {
       highlightNodes.clear()
       highlightLinks.clear()
@@ -211,19 +225,21 @@ onLinkHover={handleLinkHover}
 
   const getLocalGraphData = (node) => {
     console.log(localGraphData)
-    localGraphData.nodes.length ? setLocalGraphData({ nodes: [], links: [] }) : null
+    localGraphData.nodes.length
+      ? setLocalGraphData({ nodes: [], links: [] })
+      : null
     let g = localGraphData
     console.log(g.nodes)
     if (!node.local) {
       g = { nodes: [], links: [] }
-      console.log("length is 0")
+      console.log('length is 0')
       node.local = true //keep track of these boys
       g.nodes.push(node) //only add the clicked node if its the first
     }
     node.links.length &&
       node.links.forEach((neighborLink) => {
         if (!neighborLink.local) {
-          console.log("0")
+          console.log('0')
           neighborLink.local = true
           g.links.push(neighborLink)
           console.log(neighborLink)
@@ -231,23 +247,23 @@ onLinkHover={handleLinkHover}
           const sourceNode = gData.nodes[neighborLink.sourceIndex]
           if (targetNode.id !== sourceNode.id) {
             if (targetNode.id === node.id) {
-              console.log("1. I am the target, the source is ")
+              console.log('1. I am the target, the source is ')
               console.log(sourceNode)
               if (!sourceNode.local) {
-                console.log("2. The source is not local")
+                console.log('2. The source is not local')
                 sourceNode.local = true
                 g.nodes.push(sourceNode)
               } else {
-                console.log("2.5 The source is already local")
+                console.log('2.5 The source is already local')
               }
             } else {
-              console.log("3. I am the source")
+              console.log('3. I am the source')
               if (!targetNode.local) {
-                console.log("4. The target is not local.")
+                console.log('4. The target is not local.')
                 targetNode.local = true
                 g.nodes.push(targetNode)
               } else {
-                console.log("The target is already local")
+                console.log('The target is already local')
               }
             }
           }
@@ -257,7 +273,7 @@ onLinkHover={handleLinkHover}
   }
 
   const selectClick = (node, event) => {
-      window.open('org-protocol://roam-node?node=' + node.id, '_self');
+    window.open('org-protocol://roam-node?node=' + node.id, '_self')
     highlightNodes.clear()
     highlightLinks.clear()
     console.log(localGraphData)
@@ -275,11 +291,11 @@ onLinkHover={handleLinkHover}
     setDoubleClick(event.timeStamp)
   }
 
-    useEffect(()=>{
-       if(local && selectedNode) {
-         getLocalGraphData(selectedNode)
-       }
-    }, [local])
+  useEffect(() => {
+    if (local && selectedNode) {
+      getLocalGraphData(selectedNode)
+    }
+  }, [local])
   return (
     <View style={style}>
       {!threeDim ? (
@@ -293,39 +309,44 @@ onLinkHover={handleLinkHover}
             !physics.colorful
               ? (node) => {
                   if (highlightNodes.size === 0) {
-                    return "rgb(100, 100, 100, 1)"
+                    return 'rgb(100, 100, 100, 1)'
                   } else {
-                    return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)"
+                    return highlightNodes.has(node)
+                      ? '#a991f1'
+                      : 'rgb(50, 50, 50, 0.5)'
                   }
                 }
               : (node) => {
-                  if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+                  if (
+                    node.neighbors.length === 1 ||
+                    node.neighbors.length === 2
+                  ) {
                     return [
-                      "#ff665c",
-                      "#e69055",
-                      "#7bc275",
-                      "#4db5bd",
-                      "#FCCE7B",
-                      "#51afef",
-                      "#1f5582",
-                      "#C57BDB",
-                      "#a991f1",
-                      "#5cEfFF",
-                      "#6A8FBF",
+                      '#ff665c',
+                      '#e69055',
+                      '#7bc275',
+                      '#4db5bd',
+                      '#FCCE7B',
+                      '#51afef',
+                      '#1f5582',
+                      '#C57BDB',
+                      '#a991f1',
+                      '#5cEfFF',
+                      '#6A8FBF',
                     ][node.neighbors[0].index % 11]
                   } else {
                     return [
-                      "#ff665c",
-                      "#e69055",
-                      "#7bc275",
-                      "#4db5bd",
-                      "#FCCE7B",
-                      "#51afef",
-                      "#1f5582",
-                      "#C57BDB",
-                      "#a991f1",
-                      "#5cEfFF",
-                      "#6A8FBF",
+                      '#ff665c',
+                      '#e69055',
+                      '#7bc275',
+                      '#4db5bd',
+                      '#FCCE7B',
+                      '#51afef',
+                      '#1f5582',
+                      '#C57BDB',
+                      '#a991f1',
+                      '#5cEfFF',
+                      '#6A8FBF',
                     ][node.index % 11]
                   }
                 }
@@ -335,24 +356,26 @@ onLinkHover={handleLinkHover}
             !physics.colorful
               ? (link) => {
                   if (highlightLinks.size === 0) {
-                    return "rgb(50, 50, 50, 0.8)"
+                    return 'rgb(50, 50, 50, 0.8)'
                   } else {
-                    return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link)
+                      ? '#a991f1'
+                      : 'rgb(50, 50, 50, 0.2)'
                   }
                 }
               : (link) =>
                   [
-                    "#ff665c",
-                    "#e69055",
-                    "#7bc275",
-                    "#4db5bd",
-                    "#FCCE7B",
-                    "#51afef",
-                    "#1f5582",
-                    "#C57BDB",
-                    "#a991f1",
-                    "#5cEfFF",
-                    "#6A8FBF",
+                    '#ff665c',
+                    '#e69055',
+                    '#7bc275',
+                    '#4db5bd',
+                    '#FCCE7B',
+                    '#51afef',
+                    '#1f5582',
+                    '#C57BDB',
+                    '#a991f1',
+                    '#5cEfFF',
+                    '#6A8FBF',
                   ][gData.nodes[link.sourceIndex].index % 11]
           }
           linkDirectionalParticles={physics.particles}
@@ -364,60 +387,70 @@ onLinkHover={handleLinkHover}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={(node) => {
-            return highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+            return highlightNodes.has(node)
+              ? node.neighbors.length + 5
+              : node.neighbors.length + 3
           }}
           linkDirectionalParticleWidth={physics.particleWidth}
           nodeCanvasObject={(node, ctx, globalScale) => {
             if (physics.labels) {
-              if (globalScale > physics.labelScale || highlightNodes.has(node)) {
-                const label = node.title.substring(0, Math.min(node.title.length, 30))
+              if (
+                globalScale > physics.labelScale ||
+                highlightNodes.has(node)
+              ) {
+                const label = node.title.substring(
+                  0,
+                  Math.min(node.title.length, 30),
+                )
                 const fontSize = 12 / globalScale
                 ctx.font = `${fontSize}px Sans-Serif`
                 const textWidth = ctx.measureText(label).width
-                const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding
+                const bckgDimensions = [textWidth * 1.1, fontSize].map(
+                  (n) => n + fontSize * 0.5,
+                ) // some padding
                 const fadeFactor = Math.min(
                   (3 * (globalScale - physics.labelScale)) / physics.labelScale,
                   1,
                 )
 
                 ctx.fillStyle =
-                  "rgba(20, 20, 20, " +
+                  'rgba(20, 20, 20, ' +
                   (highlightNodes.size === 0
                     ? 0.5 * fadeFactor
                     : highlightNodes.has(node)
                     ? 0.5
                     : 0.15 * fadeFactor) +
-                  ")"
+                  ')'
                 ctx.fillRect(
                   node.x - bckgDimensions[0] / 2,
                   node.y - bckgDimensions[1] / 2,
                   ...bckgDimensions,
                 )
 
-                ctx.textAlign = "center"
-                ctx.textBaseline = "middle"
+                ctx.textAlign = 'center'
+                ctx.textBaseline = 'middle'
                 ctx.fillStyle =
-                  "rgb(255, 255, 255, " +
+                  'rgb(255, 255, 255, ' +
                   (highlightNodes.size === 0
                     ? fadeFactor
                     : highlightNodes.has(node)
                     ? 1
                     : 0.3 * fadeFactor) +
-                  ")"
+                  ')'
                 ctx.fillText(label, node.x, node.y)
 
                 node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint
               }
             }
           }}
-          nodeCanvasObjectMode={() => "after"}
+          nodeCanvasObjectMode={() => 'after'}
           onNodeHover={physics.hover ? handleNodeHover : null}
           //onLinkHover={physics.hover ? handleLinkHover : null}
           d3AlphaDecay={physics.alphaDecay}
           d3AlphaMin={physics.alphaTarget}
           d3VelocityDecay={physics.velocityDecay}
           onBackgroundClick={handleBackgroundClick}
-          backgroundColor={"#242730"}
+          backgroundColor={'#242730'}
         />
       ) : (
         <ForceGraph3D
@@ -428,39 +461,44 @@ onLinkHover={handleLinkHover}
             !physics.colorful
               ? (node) => {
                   if (highlightNodes.size === 0) {
-                    return "rgb(100, 100, 100, 1)"
+                    return 'rgb(100, 100, 100, 1)'
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    return highlightNodes.has(node)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.5)'
                   }
                 }
               : (node) => {
-                  if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+                  if (
+                    node.neighbors.length === 1 ||
+                    node.neighbors.length === 2
+                  ) {
                     return [
-                      "#ff665c",
-                      "#e69055",
-                      "#7bc275",
-                      "#4db5bd",
-                      "#FCCE7B",
-                      "#51afef",
-                      "#1f5582",
-                      "#C57BDB",
-                      "#a991f1",
-                      "#5cEfFF",
-                      "#6A8FBF",
+                      '#ff665c',
+                      '#e69055',
+                      '#7bc275',
+                      '#4db5bd',
+                      '#FCCE7B',
+                      '#51afef',
+                      '#1f5582',
+                      '#C57BDB',
+                      '#a991f1',
+                      '#5cEfFF',
+                      '#6A8FBF',
                     ][node.neighbors[0].index % 11]
                   } else {
                     return [
-                      "#ff665c",
-                      "#e69055",
-                      "#7bc275",
-                      "#4db5bd",
-                      "#FCCE7B",
-                      "#51afef",
-                      "#1f5582",
-                      "#C57BDB",
-                      "#a991f1",
-                      "#5cEfFF",
-                      "#6A8FBF",
+                      '#ff665c',
+                      '#e69055',
+                      '#7bc275',
+                      '#4db5bd',
+                      '#FCCE7B',
+                      '#51afef',
+                      '#1f5582',
+                      '#C57BDB',
+                      '#a991f1',
+                      '#5cEfFF',
+                      '#6A8FBF',
                     ][node.index % 11]
                   }
                 }
@@ -470,24 +508,26 @@ onLinkHover={handleLinkHover}
             !physics.colorful
               ? (link) => {
                   if (highlightLinks.size === 0) {
-                    return "rgb(50, 50, 50, 0.8)"
+                    return 'rgb(50, 50, 50, 0.8)'
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.2)'
                   }
                 }
               : (link) =>
                   [
-                    "#ff665c",
-                    "#e69055",
-                    "#7bc275",
-                    "#4db5bd",
-                    "#FCCE7B",
-                    "#51afef",
-                    "#1f5582",
-                    "#C57BDB",
-                    "#a991f1",
-                    "#5cEfFF",
-                    "#6A8FBF",
+                    '#ff665c',
+                    '#e69055',
+                    '#7bc275',
+                    '#4db5bd',
+                    '#FCCE7B',
+                    '#51afef',
+                    '#1f5582',
+                    '#C57BDB',
+                    '#a991f1',
+                    '#5cEfFF',
+                    '#6A8FBF',
                   ][gData.nodes[link.sourceIndex].index % 11]
           }
           linkDirectionalParticles={physics.particles}
@@ -498,7 +538,9 @@ onLinkHover={handleLinkHover}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={(node) =>
-            highlightNodes.has(node) ? node.neighbors.length * 3 : node.neighbors.length * 2
+            highlightNodes.has(node)
+              ? node.neighbors.length * 3
+              : node.neighbors.length * 2
           }
           linkDirectionalParticleWidth={physics.particleWidth}
           onNodeHover={physics.hover ? handleNodeHover : null}
@@ -512,8 +554,8 @@ onLinkHover={handleLinkHover}
                   if (highlightNodes.has(node)) {
                     console.log(node.title)
                     const sprite = new SpriteText(node.title.substring(0, 30))
-                    console.log("didnt crash here 2")
-                    sprite.color = "#ffffff"
+                    console.log('didnt crash here 2')
+                    sprite.color = '#ffffff'
                     sprite.textHeight = 8
                     return sprite
                   } else {
@@ -524,7 +566,7 @@ onLinkHover={handleLinkHover}
           nodeThreeObjectExtend={true}
           onNodeClick={selectClick}
           onBackgroundClick={handleBackgroundClick}
-          backgroundColor={"#242730"}
+          backgroundColor={'#242730'}
         />
       )}
     </View>
diff --git a/app/components/graph/graphgood.tsx b/app/components/graph/graphgood.tsx
index f273a66..b204176 100644
--- a/app/components/graph/graphgood.tsx
+++ b/app/components/graph/graphgood.tsx
@@ -1,22 +1,27 @@
-import * as React from "react"
-import { useState, useEffect, useRef, useMemo, useCallback } from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
 
 //import data from "../../data/miserables.json"
 //import genRandomTree from "../../data/randomdata";
 //import rando from "../../data/rando.json"
 
-import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
-import * as d3 from "d3-force-3d"
-import * as three from "three"
-import SpriteText from "three-spritetext"
+import {
+  ForceGraph2D,
+  ForceGraph3D,
+  ForceGraphVR,
+  ForceGraphAR,
+} from 'react-force-graph'
+import * as d3 from 'd3-force-3d'
+import * as three from 'three'
+import SpriteText from 'three-spritetext'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -56,45 +61,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
     const fg = fgRef.current
     //fg.d3Force('center').strength(0.05);
     if (physics.gravityOn) {
-      fg.d3Force("x", d3.forceX().strength(physics.gravity))
-      fg.d3Force("y", d3.forceY().strength(physics.gravity))
+      fg.d3Force('x', d3.forceX().strength(physics.gravity))
+      fg.d3Force('y', d3.forceY().strength(physics.gravity))
       if (physics.threedim) {
         if (physics.galaxy) {
-          fg.d3Force("y", d3.forceY().strength(physics.gravity / 5))
-          fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5))
+          fg.d3Force('y', d3.forceY().strength(physics.gravity / 5))
+          fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
         } else {
-          fg.d3Force("y", d3.forceY().strength(physics.gravity))
-          fg.d3Force("z", d3.forceZ().strength(physics.gravity))
+          fg.d3Force('y', d3.forceY().strength(physics.gravity))
+          fg.d3Force('z', d3.forceZ().strength(physics.gravity))
         }
       } else {
-        fg.d3Force("z", null)
+        fg.d3Force('z', null)
       }
     } else {
-      fg.d3Force("x", null)
-      fg.d3Force("y", null)
-      physics.threedim ? fg.d3Force("z", null) : null
+      fg.d3Force('x', null)
+      fg.d3Force('y', null)
+      physics.threedim ? fg.d3Force('z', null) : null
     }
-    fg.d3Force("link").strength(physics.linkStrength)
-    fg.d3Force("link").iterations(physics.linkIts)
+    fg.d3Force('link').strength(physics.linkStrength)
+    fg.d3Force('link').iterations(physics.linkIts)
     physics.collision
-      ? fg.d3Force("collide", d3.forceCollide().radius(20))
-      : fg.d3Force("collide", null)
-    fg.d3Force("charge").strength(physics.charge)
+      ? fg.d3Force('collide', d3.forceCollide().radius(20))
+      : fg.d3Force('collide', null)
+    fg.d3Force('charge').strength(physics.charge)
   })
 
   // For the expandable version of the graph
 
   const nodesById = useMemo(() => {
-    const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node]))
+    const nodesById = Object.fromEntries(
+      gData.nodes.map((node) => [node.index, node]),
+    )
     console.log(nodesById)
     // link parent/children
     gData.nodes.forEach((node) => {
-      typeof physics.rootId === "number"
+      typeof physics.rootId === 'number'
         ? (node.collapsed = node.index !== physics.rootId)
         : (node.collapsed = node.id !== physics.rootId)
       node.childLinks = []
     })
-    gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link))
+    gData.links.forEach((link) =>
+      nodesById[link.sourceIndex].childLinks.push(link),
+    )
     return nodesById
   }, [gData])
   const getPrunedTree = useCallback(() => {
@@ -106,7 +115,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
       visibleLinks.push(...node.childLinks)
       node.childLinks
         .map((link) =>
-          typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex],
+          typeof link.targetIndex === 'object'
+            ? link.targetIndex
+            : nodesById[link.targetIndex],
         ) // get child node
         .forEach(traverseTree)
     })()
@@ -140,7 +151,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   }
 
   const handleNodeHover = (node) => {
-    console.log("hover")
+    console.log('hover')
     if (!selectedNode) {
       highlightNodes.clear()
       highlightLinks.clear()
@@ -264,29 +275,39 @@ onLinkHover={handleLinkHover}
           ref={fgRef}
           autoPauseRedraw={false}
           //graphData={gData}
-          graphData={physics.local ? localGraphData : physics.collapse ? prunedTree : gData}
-          nodeAutoColorBy={physics.colorful ? "id" : undefined}
+          graphData={
+            physics.local
+              ? localGraphData
+              : physics.collapse
+              ? prunedTree
+              : gData
+          }
+          nodeAutoColorBy={physics.colorful ? 'id' : undefined}
           nodeColor={
             !physics.colorful
               ? (node) => {
                   if (highlightNodes.size === 0) {
-                    return "rgb(100, 100, 100, 1)"
+                    return 'rgb(100, 100, 100, 1)'
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    return highlightNodes.has(node)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.5)'
                   }
                   //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
                 }
               : undefined
           }
-          linkAutoColorBy={physics.colorful ? "target" : undefined}
+          linkAutoColorBy={physics.colorful ? 'target' : undefined}
           //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
           linkColor={
             !physics.colorful
               ? (link) => {
                   if (highlightLinks.size === 0) {
-                    return "rgb(50, 50, 50, 0.8)"
+                    return 'rgb(50, 50, 50, 0.8)'
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.2)'
                   }
                   //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
                 }
@@ -305,53 +326,63 @@ onLinkHover={handleLinkHover}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={(node) =>
-            highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+            highlightNodes.has(node)
+              ? node.neighbors.length + 5
+              : node.neighbors.length + 3
           }
           linkDirectionalParticleWidth={physics.particleWidth}
           nodeCanvasObject={(node, ctx, globalScale) => {
             if (physics.labels) {
-              if (globalScale > physics.labelScale || highlightNodes.has(node)) {
-                const label = node.title.substring(0, Math.min(node.title.length, 30))
+              if (
+                globalScale > physics.labelScale ||
+                highlightNodes.has(node)
+              ) {
+                const label = node.title.substring(
+                  0,
+                  Math.min(node.title.length, 30),
+                )
                 const fontSize = 12 / globalScale
                 ctx.font = `${fontSize}px Sans-Serif`
                 const textWidth = ctx.measureText(label).width
-                const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding
+                const bckgDimensions = [textWidth * 1.1, fontSize].map(
+                  (n) => n + fontSize * 0.5,
+                ) // some padding
                 const fadeFactor = Math.min(
                   (3 * (globalScale - physics.labelScale)) / physics.labelScale,
                   1,
                 )
 
                 ctx.fillStyle =
-                  "rgba(20, 20, 20, " +
+                  'rgba(20, 20, 20, ' +
                   (highlightNodes.size === 0
                     ? 0.5 * fadeFactor
                     : highlightNodes.has(node)
                     ? 0.5
                     : 0.15 * fadeFactor) +
-                  ")"
+                  ')'
                 ctx.fillRect(
                   node.x - bckgDimensions[0] / 2,
                   node.y - bckgDimensions[1] / 2,
                   ...bckgDimensions,
                 )
 
-                ctx.textAlign = "center"
-                ctx.textBaseline = "middle"
+                ctx.textAlign = 'center'
+                ctx.textBaseline = 'middle'
                 ctx.fillStyle =
-                  "rgb(255, 255, 255, " +
+                  'rgb(255, 255, 255, ' +
                   (highlightNodes.size === 0
                     ? fadeFactor
                     : highlightNodes.has(node)
                     ? 1
                     : 0.3 * fadeFactor) +
-                  ")"
+                  ')'
                 ctx.fillText(label, node.x, node.y)
 
                 node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint
               }
             }
           }}
-          nodeCanvasObjectMode={() => "after"}
+          nodeCanvasObjectMode={() => 'after'}
           onNodeHover={physics.hover ? handleNodeHover : null}
           //onLinkHover={physics.hover ? handleLinkHover : null}
           d3AlphaDecay={physics.alphaDecay}
@@ -365,28 +396,32 @@ onLinkHover={handleLinkHover}
           autoPauseRedraw={false}
           graphData={gData}
           //graphData={physics.collapse ? prunedTree : gData}
-          nodeAutoColorBy={physics.colorful ? "id" : undefined}
+          nodeAutoColorBy={physics.colorful ? 'id' : undefined}
           nodeColor={
             !physics.colorful
               ? (node) => {
                   if (highlightNodes.size === 0) {
-                    return "rgb(100, 100, 100, 1)"
+                    return 'rgb(100, 100, 100, 1)'
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    return highlightNodes.has(node)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.5)'
                   }
                   //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
                 }
               : undefined
           }
-          linkAutoColorBy={physics.colorful ? "target" : undefined}
+          linkAutoColorBy={physics.colorful ? 'target' : undefined}
           //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
           linkColor={
             !physics.colorful
               ? (link) => {
                   if (highlightLinks.size === 0) {
-                    return "rgb(50, 50, 50, 0.8)"
+                    return 'rgb(50, 50, 50, 0.8)'
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.2)'
                   }
                   //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
                 }
@@ -405,7 +440,9 @@ onLinkHover={handleLinkHover}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={(node) =>
-            highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+            highlightNodes.has(node)
+              ? node.neighbors.length + 5
+              : node.neighbors.length + 3
           }
           linkDirectionalParticleWidth={physics.particleWidth}
           onNodeHover={physics.hover ? handleNodeHover : null}
@@ -420,8 +457,8 @@ onLinkHover={handleLinkHover}
                   if (highlightNodes.has(node)) {
                     console.log(node.title)
                     const sprite = new SpriteText(node.title.substring(0, 30))
-                    console.log("didnt crash here 2")
-                    sprite.color = "#ffffff"
+                    console.log('didnt crash here 2')
+                    sprite.color = '#ffffff'
                     sprite.textHeight = 8
                     return sprite
                   } else {
diff --git a/app/components/header/header.props.ts b/app/components/header/header.props.ts
index 07f2c4d..f142656 100644
--- a/app/components/header/header.props.ts
+++ b/app/components/header/header.props.ts
@@ -1,6 +1,6 @@
-import { StyleProp, TextStyle, ViewStyle } from "react-native"
-import { IconTypes } from "../icon/icons"
-import { TxKeyPath } from "../../i18n"
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { IconTypes } from '../icon/icons'
+import { TxKeyPath } from '../../i18n'
 
 export interface HeaderProps {
   /**
diff --git a/app/components/header/header.story.tsx b/app/components/header/header.story.tsx
index 05093b3..db87b89 100644
--- a/app/components/header/header.story.tsx
+++ b/app/components/header/header.story.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import { View, Alert } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Header } from "./header"
-import { color } from "../../theme"
+import * as React from 'react'
+import { View, Alert } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Header } from './header'
+import { color } from '../../theme'
 
 declare let module
 
@@ -12,9 +12,9 @@ const VIEWSTYLE = {
   backgroundColor: color.storybookDarkBg,
 }
 
-storiesOf("Header", module)
+storiesOf('Header', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Behavior", () => (
+  .add('Behavior', () => (
     <Story>
       <UseCase noPad text="default" usage="The default usage">
         <View style={VIEWSTYLE}>
@@ -26,7 +26,7 @@ storiesOf("Header", module)
           <Header
             headerTx="demoScreen.howTo"
             leftIcon="back"
-            onLeftPress={() => Alert.alert("left nav")}
+            onLeftPress={() => Alert.alert('left nav')}
           />
         </View>
       </UseCase>
@@ -35,7 +35,7 @@ storiesOf("Header", module)
           <Header
             headerTx="demoScreen.howTo"
             rightIcon="bullet"
-            onRightPress={() => Alert.alert("right nav")}
+            onRightPress={() => Alert.alert('right nav')}
           />
         </View>
       </UseCase>
diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx
index b4a6634..25e0914 100644
--- a/app/components/header/header.tsx
+++ b/app/components/header/header.tsx
@@ -1,23 +1,23 @@
-import React from "react"
-import { View, ViewStyle, TextStyle } from "react-native"
-import { HeaderProps } from "./header.props"
-import { Button } from "../button/button"
-import { Text } from "../text/text"
-import { Icon } from "../icon/icon"
-import { spacing } from "../../theme"
-import { translate } from "../../i18n/"
+import React from 'react'
+import { View, ViewStyle, TextStyle } from 'react-native'
+import { HeaderProps } from './header.props'
+import { Button } from '../button/button'
+import { Text } from '../text/text'
+import { Icon } from '../icon/icon'
+import { spacing } from '../../theme'
+import { translate } from '../../i18n/'
 
 // static styles
 const ROOT: ViewStyle = {
-  flexDirection: "row",
+  flexDirection: 'row',
   paddingHorizontal: spacing[4],
-  alignItems: "center",
+  alignItems: 'center',
   paddingTop: spacing[5],
   paddingBottom: spacing[5],
-  justifyContent: "flex-start",
+  justifyContent: 'flex-start',
 }
-const TITLE: TextStyle = { textAlign: "center" }
-const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: "center" }
+const TITLE: TextStyle = { textAlign: 'center' }
+const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: 'center' }
 const LEFT: ViewStyle = { width: 32 }
 const RIGHT: ViewStyle = { width: 32 }
 
@@ -35,7 +35,7 @@ export function Header(props: HeaderProps) {
     style,
     titleStyle,
   } = props
-  const header = headerText || (headerTx && translate(headerTx)) || ""
+  const header = headerText || (headerTx && translate(headerTx)) || ''
 
   return (
     <View style={[ROOT, style]}>
diff --git a/app/components/icon/icon.props.ts b/app/components/icon/icon.props.ts
index 71ce0b7..1f3ed2e 100644
--- a/app/components/icon/icon.props.ts
+++ b/app/components/icon/icon.props.ts
@@ -1,5 +1,5 @@
-import { ImageStyle, StyleProp, ViewStyle } from "react-native"
-import { IconTypes } from "./icons"
+import { ImageStyle, StyleProp, ViewStyle } from 'react-native'
+import { IconTypes } from './icons'
 
 export interface IconProps {
   /**
diff --git a/app/components/icon/icon.story.tsx b/app/components/icon/icon.story.tsx
index d119ed4..31c8499 100644
--- a/app/components/icon/icon.story.tsx
+++ b/app/components/icon/icon.story.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Icon } from "./icon"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Icon } from './icon'
 
 declare let module
 
-storiesOf("Icon", module)
+storiesOf('Icon', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Names", () => (
+  .add('Names', () => (
     <Story>
       <UseCase text="back" usage="The icon for going back">
         <Icon icon="back" />
diff --git a/app/components/icon/icon.tsx b/app/components/icon/icon.tsx
index 4735e13..f596bb2 100644
--- a/app/components/icon/icon.tsx
+++ b/app/components/icon/icon.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { View, ImageStyle } from "react-native"
-import { AutoImage as Image } from "../auto-image/auto-image"
-import { IconProps } from "./icon.props"
-import { icons } from "./icons"
+import * as React from 'react'
+import { View, ImageStyle } from 'react-native'
+import { AutoImage as Image } from '../auto-image/auto-image'
+import { IconProps } from './icon.props'
+import { icons } from './icons'
 
 const ROOT: ImageStyle = {
-  resizeMode: "contain",
+  resizeMode: 'contain',
 }
 
 export function Icon(props: IconProps) {
diff --git a/app/components/icon/icons/index.ts b/app/components/icon/icons/index.ts
index 00e8a59..792e408 100644
--- a/app/components/icon/icons/index.ts
+++ b/app/components/icon/icons/index.ts
@@ -1,6 +1,6 @@
 export const icons = {
-  back: require("./arrow-left.png"),
-  bullet: require("./bullet.png"),
+  back: require('./arrow-left.png'),
+  bullet: require('./bullet.png'),
 }
 
 export type IconTypes = keyof typeof icons
diff --git a/app/components/index.ts b/app/components/index.ts
index 8858b2f..d93e972 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -1,16 +1,16 @@
-export * from "./bullet-item/bullet-item"
-export * from "./button/button"
-export * from "./checkbox/checkbox"
-export * from "./form-row/form-row"
-export * from "./header/header"
-export * from "./icon/icon"
-export * from "./screen/screen"
-export * from "./switch/switch"
-export * from "./text/text"
-export * from "./text-field/text-field"
-export * from "./wallpaper/wallpaper"
-export * from "./auto-image/auto-image"
-export * from "./graph/graph"
-export * from "./tweaks/tweaks"
-export * from "./local-button/local-button"
-export * from "./graph-ui/graph-ui"
+export * from './bullet-item/bullet-item'
+export * from './button/button'
+export * from './checkbox/checkbox'
+export * from './form-row/form-row'
+export * from './header/header'
+export * from './icon/icon'
+export * from './screen/screen'
+export * from './switch/switch'
+export * from './text/text'
+export * from './text-field/text-field'
+export * from './wallpaper/wallpaper'
+export * from './auto-image/auto-image'
+export * from './graph/graph'
+export * from './tweaks/tweaks'
+export * from './local-button/local-button'
+export * from './graph-ui/graph-ui'
diff --git a/app/components/local-button/local-button.story.tsx b/app/components/local-button/local-button.story.tsx
index 22b2f0e..0d35ab2 100644
--- a/app/components/local-button/local-button.story.tsx
+++ b/app/components/local-button/local-button.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { LocalButton } from "./local-button"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { LocalButton } from './local-button'
 
-storiesOf("LocalButton", module)
+storiesOf('LocalButton', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="Primary" usage="The primary.">
         <LocalButton style={{ backgroundColor: color.error }} />
diff --git a/app/components/local-button/local-button.tsx b/app/components/local-button/local-button.tsx
index 6507b76..27b514b 100644
--- a/app/components/local-button/local-button.tsx
+++ b/app/components/local-button/local-button.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
-import Icon from "react-native-vector-icons/MaterialCommunityIcons"
+import * as React from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -21,25 +21,32 @@ export interface LocalButtonProps {
    * An optional style override useful for padding & margin.
    */
   style?: StyleProp<ViewStyle>
-    local
-    setLocal
+  local
+  setLocal
 }
 
 /**
  * Describe your component here
  */
-export const LocalButton = observer(function LocalButton(props: LocalButtonProps) {
+export const LocalButton = observer(function LocalButton(
+  props: LocalButtonProps,
+) {
   const { style, local, setLocal } = props
   const styles = flatten([CONTAINER, style])
 
   return (
-    <View style={[style, { height: 50, width: 150}]}>
-        <Icon.Button name={!local ? "graph-outline": "graph"} backgroundColor="#a991f1"
-                     onPress={()=>{setLocal(!local)}}
-                     size={30}
-        style={{textAlign: 'center'}}>
-            {!local ? "Global Graph" : "Local Graph"}
-        </Icon.Button>
+    <View style={[style, { height: 50, width: 150 }]}>
+      <Icon.Button
+        name={!local ? 'graph-outline' : 'graph'}
+        backgroundColor="#a991f1"
+        onPress={() => {
+          setLocal(!local)
+        }}
+        size={30}
+        style={{ textAlign: 'center' }}
+      >
+        {!local ? 'Global Graph' : 'Local Graph'}
+      </Icon.Button>
     </View>
   )
 })
diff --git a/app/components/local/local.story.tsx b/app/components/local/local.story.tsx
index b161f0e..2bfa065 100644
--- a/app/components/local/local.story.tsx
+++ b/app/components/local/local.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Local } from "./local"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Local } from './local'
 
-storiesOf("Local", module)
+storiesOf('Local', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="Primary" usage="The primary.">
         <Local style={{ backgroundColor: color.error }} />
diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx
index e6984fc..200ec01 100644
--- a/app/components/local/local.tsx
+++ b/app/components/local/local.tsx
@@ -1,13 +1,19 @@
-import * as React from "react"
-import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
-import Icon from "react-native-vector-icons/MaterialCommunityIcons"
+import * as React from 'react'
+import {
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -26,13 +32,17 @@ export interface LocalProps {
 /**
  * Describe your component here
  */
-export const LocalButton = observer(function LocalButton(props: LocalProps): boolean {
+export const LocalButton = observer(function LocalButton(
+  props: LocalProps,
+): boolean {
   const { style } = props
   const styles = flatten([CONTAINER, style])
 
   return (
-      <Icon color="#a99f1f" name="graph"
-          style={{position:"absolute", zIndex: 100, width: 500}}
-      />
+    <Icon
+      color="#a99f1f"
+      name="graph"
+      style={{ position: 'absolute', zIndex: 100, width: 500 }}
+    />
   )
 })
diff --git a/app/components/screen/screen.presets.ts b/app/components/screen/screen.presets.ts
index a016b77..aa8d8cf 100644
--- a/app/components/screen/screen.presets.ts
+++ b/app/components/screen/screen.presets.ts
@@ -1,5 +1,5 @@
-import { ViewStyle } from "react-native"
-import { color } from "../../theme"
+import { ViewStyle } from 'react-native'
+import { color } from '../../theme'
 
 /**
  * All screen keyboard offsets.
@@ -25,13 +25,13 @@ export const presets = {
     outer: {
       backgroundColor: color.background,
       flex: 1,
-      height: "100%",
+      height: '100%',
     } as ViewStyle,
     inner: {
-      justifyContent: "flex-start",
-      alignItems: "stretch",
-      height: "100%",
-      width: "100%",
+      justifyContent: 'flex-start',
+      alignItems: 'stretch',
+      height: '100%',
+      width: '100%',
     } as ViewStyle,
   },
 
@@ -44,9 +44,9 @@ export const presets = {
     outer: {
       backgroundColor: color.background,
       flex: 1,
-      height: "100%",
+      height: '100%',
     } as ViewStyle,
-    inner: { justifyContent: "flex-start", alignItems: "stretch" } as ViewStyle,
+    inner: { justifyContent: 'flex-start', alignItems: 'stretch' } as ViewStyle,
   },
 }
 
@@ -62,5 +62,5 @@ export type ScreenPresets = keyof typeof presets
  */
 export function isNonScrolling(preset?: ScreenPresets) {
   // any of these things will make you scroll
-  return !preset || !presets[preset] || preset === "fixed"
+  return !preset || !presets[preset] || preset === 'fixed'
 }
diff --git a/app/components/screen/screen.props.ts b/app/components/screen/screen.props.ts
index 0326fd7..1371c64 100644
--- a/app/components/screen/screen.props.ts
+++ b/app/components/screen/screen.props.ts
@@ -1,6 +1,6 @@
-import React from "react"
-import { StyleProp, ViewStyle } from "react-native"
-import { KeyboardOffsets, ScreenPresets } from "./screen.presets"
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { KeyboardOffsets, ScreenPresets } from './screen.presets'
 
 export interface ScreenProps {
   /**
@@ -26,7 +26,7 @@ export interface ScreenProps {
   /**
    * An optional status bar setting. Defaults to light-content.
    */
-  statusBar?: "light-content" | "dark-content"
+  statusBar?: 'light-content' | 'dark-content'
 
   /**
    * Should we not wrap in SafeAreaView? Defaults to false.
@@ -42,5 +42,5 @@ export interface ScreenProps {
    * Should keyboard persist on screen tap. Defaults to handled.
    * Only applies to scroll preset.
    */
-  keyboardShouldPersistTaps?: "handled" | "always" | "never"
+  keyboardShouldPersistTaps?: 'handled' | 'always' | 'never'
 }
diff --git a/app/components/screen/screen.tsx b/app/components/screen/screen.tsx
index ba84547..e593dde 100644
--- a/app/components/screen/screen.tsx
+++ b/app/components/screen/screen.tsx
@@ -1,25 +1,33 @@
-import * as React from "react"
-import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native"
-import { useSafeAreaInsets } from "react-native-safe-area-context"
-import { ScreenProps } from "./screen.props"
-import { isNonScrolling, offsets, presets } from "./screen.presets"
+import * as React from 'react'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StatusBar,
+  View,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ScreenProps } from './screen.props'
+import { isNonScrolling, offsets, presets } from './screen.presets'
 
-const isIos = Platform.OS === "ios"
+const isIos = Platform.OS === 'ios'
 
 function ScreenWithoutScrolling(props: ScreenProps) {
   const insets = useSafeAreaInsets()
   const preset = presets.fixed
   const style = props.style || {}
-  const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}
+  const backgroundStyle = props.backgroundColor
+    ? { backgroundColor: props.backgroundColor }
+    : {}
   const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top }
 
   return (
     <KeyboardAvoidingView
       style={[preset.outer, backgroundStyle]}
-      behavior={isIos ? "padding" : undefined}
-      keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]}
+      behavior={isIos ? 'padding' : undefined}
+      keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']}
     >
-      <StatusBar barStyle={props.statusBar || "light-content"} />
+      <StatusBar barStyle={props.statusBar || 'light-content'} />
       <View style={[preset.inner, style, insetStyle]}>{props.children}</View>
     </KeyboardAvoidingView>
   )
@@ -29,21 +37,25 @@ function ScreenWithScrolling(props: ScreenProps) {
   const insets = useSafeAreaInsets()
   const preset = presets.scroll
   const style = props.style || {}
-  const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}
+  const backgroundStyle = props.backgroundColor
+    ? { backgroundColor: props.backgroundColor }
+    : {}
   const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top }
 
   return (
     <KeyboardAvoidingView
       style={[preset.outer, backgroundStyle]}
-      behavior={isIos ? "padding" : undefined}
-      keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]}
+      behavior={isIos ? 'padding' : undefined}
+      keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']}
     >
-      <StatusBar barStyle={props.statusBar || "light-content"} />
+      <StatusBar barStyle={props.statusBar || 'light-content'} />
       <View style={[preset.outer, backgroundStyle, insetStyle]}>
         <ScrollView
           style={[preset.outer, backgroundStyle]}
           contentContainerStyle={[preset.inner, style]}
-          keyboardShouldPersistTaps={props.keyboardShouldPersistTaps || "handled"}
+          keyboardShouldPersistTaps={
+            props.keyboardShouldPersistTaps || 'handled'
+          }
         >
           {props.children}
         </ScrollView>
diff --git a/app/components/switch/switch.props.ts b/app/components/switch/switch.props.ts
index 8235457..2549a95 100644
--- a/app/components/switch/switch.props.ts
+++ b/app/components/switch/switch.props.ts
@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from "react-native"
+import { StyleProp, ViewStyle } from 'react-native'
 
 export interface SwitchProps {
   /**
diff --git a/app/components/switch/switch.story.tsx b/app/components/switch/switch.story.tsx
index 998d1df..bbd29ee 100644
--- a/app/components/switch/switch.story.tsx
+++ b/app/components/switch/switch.story.tsx
@@ -1,19 +1,19 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 
-import * as React from "react"
-import { View, ViewStyle } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Toggle } from "react-powerplug"
-import { Switch } from "./switch"
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Toggle } from 'react-powerplug'
+import { Switch } from './switch'
 
 declare let module
 
-const styleArray: ViewStyle[] = [{ borderColor: "#686868" }]
+const styleArray: ViewStyle[] = [{ borderColor: '#686868' }]
 
 const trackOffStyle: ViewStyle[] = [
-  { backgroundColor: "#686868" },
+  { backgroundColor: '#686868' },
   {
     height: 80,
     borderRadius: 0,
@@ -21,8 +21,8 @@ const trackOffStyle: ViewStyle[] = [
 ]
 const trackOnStyle: ViewStyle[] = [
   {
-    backgroundColor: "#b1008e",
-    borderColor: "#686868",
+    backgroundColor: '#b1008e',
+    borderColor: '#686868',
   },
   {
     height: 80,
@@ -31,8 +31,8 @@ const trackOnStyle: ViewStyle[] = [
 ]
 const thumbOffStyle: ViewStyle[] = [
   {
-    backgroundColor: "#b1008e",
-    borderColor: "#686868",
+    backgroundColor: '#b1008e',
+    borderColor: '#686868',
   },
   {
     height: 80,
@@ -40,19 +40,22 @@ const thumbOffStyle: ViewStyle[] = [
   },
 ]
 const thumbOnStyle: ViewStyle[] = [
-  { backgroundColor: "#f0c" },
+  { backgroundColor: '#f0c' },
   {
     height: 80,
     borderRadius: 0,
-    borderColor: "#686868",
+    borderColor: '#686868',
   },
 ]
 
-storiesOf("Switch", module)
+storiesOf('Switch', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Behaviour", () => (
+  .add('Behaviour', () => (
     <Story>
-      <UseCase text="The Toggle Switch" usage="Use the switch to represent on/off states.">
+      <UseCase
+        text="The Toggle Switch"
+        usage="Use the switch to represent on/off states."
+      >
         <Toggle initial={false}>
           {({ on, toggle }) => <Switch value={on} onToggle={toggle} />}
         </Toggle>
@@ -65,17 +68,23 @@ storiesOf("Switch", module)
       </UseCase>
     </Story>
   ))
-  .add("Styling", () => (
+  .add('Styling', () => (
     <Story>
       <UseCase text="Custom Styling" usage="Promise me this won't happen.">
         <Toggle initial={false}>
           {({ on, toggle }) => (
             <View>
               <Switch
-                trackOnStyle={{ backgroundColor: "green", borderColor: "black" }}
-                trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }}
-                thumbOnStyle={{ backgroundColor: "cyan" }}
-                thumbOffStyle={{ backgroundColor: "pink" }}
+                trackOnStyle={{
+                  backgroundColor: 'green',
+                  borderColor: 'black',
+                }}
+                trackOffStyle={{
+                  backgroundColor: 'red',
+                  borderColor: 'maroon',
+                }}
+                thumbOnStyle={{ backgroundColor: 'cyan' }}
+                thumbOffStyle={{ backgroundColor: 'pink' }}
                 value={on}
                 onToggle={toggle}
               />
diff --git a/app/components/switch/switch.tsx b/app/components/switch/switch.tsx
index 0813747..bad81fc 100644
--- a/app/components/switch/switch.tsx
+++ b/app/components/switch/switch.tsx
@@ -1,7 +1,12 @@
-import React from "react"
-import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from "react-native"
-import { color } from "../../theme"
-import { SwitchProps } from "./switch.props"
+import React from 'react'
+import {
+  ViewStyle,
+  Animated,
+  Easing,
+  TouchableWithoutFeedback,
+} from 'react-native'
+import { color } from '../../theme'
+import { SwitchProps } from './switch.props'
 
 // dimensions
 const THUMB_SIZE = 30
@@ -15,7 +20,7 @@ const BORDER_RADIUS = (THUMB_SIZE * 3) / 4
 const ON_COLOR = color.primary
 const OFF_COLOR = color.palette.offWhite
 const BORDER_ON_COLOR = ON_COLOR
-const BORDER_OFF_COLOR = "rgba(0, 0, 0, 0.1)"
+const BORDER_OFF_COLOR = 'rgba(0, 0, 0, 0.1)'
 
 // animation
 const DURATION = 250
@@ -31,7 +36,7 @@ const TRACK = {
 
 // the thumb always has these props
 const THUMB: ViewStyle = {
-  position: "absolute",
+  position: 'absolute',
   width: THUMB_SIZE,
   height: THUMB_SIZE,
   borderColor: BORDER_OFF_COLOR,
@@ -71,10 +76,10 @@ export function Switch(props: SwitchProps) {
     }
   }, [props.value])
 
-  const handlePress = React.useMemo(() => () => props.onToggle && props.onToggle(!props.value), [
-    props.onToggle,
-    props.value,
-  ])
+  const handlePress = React.useMemo(
+    () => () => props.onToggle && props.onToggle(!props.value),
+    [props.onToggle, props.value],
+  )
 
   if (!timer) {
     return null
diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx
index 74a4da0..20c73a4 100644
--- a/app/components/text-field/text-field.story.tsx
+++ b/app/components/text-field/text-field.story.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Text, TextField } from "../"
-import { State } from "react-powerplug"
-import { ViewStyle, TextStyle, Alert } from "react-native"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { Text, TextField } from '../'
+import { State } from 'react-powerplug'
+import { ViewStyle, TextStyle, Alert } from 'react-native'
 
 declare let module
 
@@ -14,24 +14,27 @@ const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }]
 
 const inputStyleArray: TextStyle[] = [
   {
-    backgroundColor: "rebeccapurple",
-    color: "white",
+    backgroundColor: 'rebeccapurple',
+    color: 'white',
     padding: 40,
   },
   {
     borderWidth: 10,
     borderRadius: 4,
-    borderColor: "#7fff00",
+    borderColor: '#7fff00',
   },
 ]
 let alertWhenFocused = true
 
-storiesOf("TextField", module)
+storiesOf('TextField', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Labelling", () => (
+  .add('Labelling', () => (
     <Story>
-      <UseCase text="Normal text" usage="Use placeholder and label to set the text.">
-        <State initial={{ value: "" }}>
+      <UseCase
+        text="Normal text"
+        usage="Use placeholder and label to set the text."
+      >
+        <State initial={{ value: '' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
@@ -43,8 +46,11 @@ storiesOf("TextField", module)
         </State>
       </UseCase>
 
-      <UseCase text="i18n text" usage="Use placeholderTx and labelTx for i18n lookups">
-        <State initial={{ value: "" }}>
+      <UseCase
+        text="i18n text"
+        usage="Use placeholderTx and labelTx for i18n lookups"
+      >
+        <State initial={{ value: '' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
@@ -57,14 +63,14 @@ storiesOf("TextField", module)
       </UseCase>
     </Story>
   ))
-  .add("Style Overrides", () => (
+  .add('Style Overrides', () => (
     <Story>
       <UseCase
         noPad
         text="Container Styles"
         usage="Useful for applying margins when laying out a form to remove padding if the form brings its own."
       >
-        <State initial={{ value: "Inigo" }}>
+        <State initial={{ value: 'Inigo' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
@@ -74,7 +80,7 @@ storiesOf("TextField", module)
             />
           )}
         </State>
-        <State initial={{ value: "Montoya" }}>
+        <State initial={{ value: 'Montoya' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
@@ -89,19 +95,19 @@ storiesOf("TextField", module)
         text="Input Styles"
         usage="Useful for 1-off exceptions.  Try to steer towards presets for this kind of thing."
       >
-        <State initial={{ value: "fancy colour" }}>
+        <State initial={{ value: 'fancy colour' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
               value={state.value}
               label="Name"
               inputStyle={{
-                backgroundColor: "rebeccapurple",
-                color: "white",
+                backgroundColor: 'rebeccapurple',
+                color: 'white',
                 padding: 40,
                 borderWidth: 10,
                 borderRadius: 4,
-                borderColor: "hotpink",
+                borderColor: 'hotpink',
               }}
             />
           )}
@@ -109,8 +115,11 @@ storiesOf("TextField", module)
         <Text text="* attention designers:  i am so sorry" preset="secondary" />
       </UseCase>
 
-      <UseCase text="Style array" usage="Useful for 1-off exceptions, but using style arrays.">
-        <State initial={{ value: "fancy colour" }}>
+      <UseCase
+        text="Style array"
+        usage="Useful for 1-off exceptions, but using style arrays."
+      >
+        <State initial={{ value: 'fancy colour' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
@@ -125,29 +134,29 @@ storiesOf("TextField", module)
       </UseCase>
     </Story>
   ))
-  .add("Ref Forwarding", () => (
+  .add('Ref Forwarding', () => (
     <Story>
       <UseCase text="Ref Forwarding" usage="">
-        <State initial={{ value: "fancy colour" }}>
+        <State initial={{ value: 'fancy colour' }}>
           {({ state, setState }) => (
             <TextField
               onChangeText={(value) => setState({ value })}
               value={state.value}
               label="Name"
               inputStyle={{
-                backgroundColor: "rebeccapurple",
-                color: "white",
+                backgroundColor: 'rebeccapurple',
+                color: 'white',
                 padding: 40,
                 borderWidth: 10,
                 borderRadius: 4,
-                borderColor: "hotpink",
+                borderColor: 'hotpink',
               }}
               forwardedRef={(ref) => ref}
               onFocus={() => {
                 if (alertWhenFocused) {
                   // Prevent text field focus from being repeatedly triggering alert
                   alertWhenFocused = false
-                  Alert.alert("Text field focuesed with forwarded ref!")
+                  Alert.alert('Text field focuesed with forwarded ref!')
                 }
               }}
             />
diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx
index eea1a70..4da1591 100644
--- a/app/components/text-field/text-field.tsx
+++ b/app/components/text-field/text-field.tsx
@@ -1,8 +1,15 @@
-import React from "react"
-import { StyleProp, TextInput, TextInputProps, TextStyle, View, ViewStyle } from "react-native"
-import { color, spacing, typography } from "../../theme"
-import { translate, TxKeyPath } from "../../i18n"
-import { Text } from "../text/text"
+import React from 'react'
+import {
+  StyleProp,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import { color, spacing, typography } from '../../theme'
+import { translate, TxKeyPath } from '../../i18n'
+import { Text } from '../text/text'
 
 // the base styling for the container
 const CONTAINER: ViewStyle = {
@@ -71,7 +78,7 @@ export function TextField(props: TextFieldProps) {
     placeholder,
     labelTx,
     label,
-    preset = "default",
+    preset = 'default',
     style: styleOverride,
     inputStyle: inputStyleOverride,
     forwardedRef,
@@ -80,7 +87,9 @@ export function TextField(props: TextFieldProps) {
 
   const containerStyles = [CONTAINER, PRESETS[preset], styleOverride]
   const inputStyles = [INPUT, inputStyleOverride]
-  const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder
+  const actualPlaceholder = placeholderTx
+    ? translate(placeholderTx)
+    : placeholder
 
   return (
     <View style={containerStyles}>
diff --git a/app/components/text/text.presets.ts b/app/components/text/text.presets.ts
index 9622268..4693417 100644
--- a/app/components/text/text.presets.ts
+++ b/app/components/text/text.presets.ts
@@ -1,5 +1,5 @@
-import { TextStyle } from "react-native"
-import { color, typography } from "../../theme"
+import { TextStyle } from 'react-native'
+import { color, typography } from '../../theme'
 
 /**
  * All text will start off looking like this.
@@ -24,12 +24,12 @@ export const presets = {
   /**
    * A bold version of the default text.
    */
-  bold: { ...BASE, fontWeight: "bold" } as TextStyle,
+  bold: { ...BASE, fontWeight: 'bold' } as TextStyle,
 
   /**
    * Large headers.
    */
-  header: { ...BASE, fontSize: 24, fontWeight: "bold" } as TextStyle,
+  header: { ...BASE, fontSize: 24, fontWeight: 'bold' } as TextStyle,
 
   /**
    * Field labels that appear on forms above the inputs.
diff --git a/app/components/text/text.props.ts b/app/components/text/text.props.ts
index d2c55dc..79ee12c 100644
--- a/app/components/text/text.props.ts
+++ b/app/components/text/text.props.ts
@@ -1,7 +1,7 @@
-import { StyleProp, TextProps as TextProperties, TextStyle } from "react-native"
-import i18n from "i18n-js"
-import { TextPresets } from "./text.presets"
-import { TxKeyPath } from "../../i18n"
+import { StyleProp, TextProps as TextProperties, TextStyle } from 'react-native'
+import i18n from 'i18n-js'
+import { TextPresets } from './text.presets'
+import { TxKeyPath } from '../../i18n'
 
 export interface TextProps extends TextProperties {
   /**
diff --git a/app/components/text/text.story.tsx b/app/components/text/text.story.tsx
index 5582c1b..4535194 100644
--- a/app/components/text/text.story.tsx
+++ b/app/components/text/text.story.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 
-import * as React from "react"
-import { View, ViewStyle } from "react-native"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Text } from "./text"
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Text } from './text'
 
 declare let module
 
@@ -14,21 +14,23 @@ const VIEWSTYLE = {
   flex: 1,
   backgroundColor: color.storybookDarkBg,
 }
-const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: "#7fff00" }]
+const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: '#7fff00' }]
 
-storiesOf("Text", module)
+storiesOf('Text', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="default" usage="Used for normal body text.">
         <View style={VIEWSTYLE}>
           <Text>Hello!</Text>
           <Text style={{ paddingTop: 10 }}>
-            Check out{"\n"}
-            my{"\n"}
+            Check out{'\n'}
+            my{'\n'}
             line height
           </Text>
-          <Text style={{ paddingTop: 10 }}>The quick brown fox jumped over the slow lazy dog.</Text>
+          <Text style={{ paddingTop: 10 }}>
+            The quick brown fox jumped over the slow lazy dog.
+          </Text>
           <Text>$123,456,789.00</Text>
         </View>
       </UseCase>
@@ -44,7 +46,7 @@ storiesOf("Text", module)
       </UseCase>
     </Story>
   ))
-  .add("Passing Content", () => (
+  .add('Passing Content', () => (
     <Story>
       <UseCase
         text="text"
@@ -68,22 +70,25 @@ storiesOf("Text", module)
           <Text>Passing strings as children.</Text>
         </View>
       </UseCase>
-      <UseCase text="nested children" usage="You can embed them and change styles too.">
+      <UseCase
+        text="nested children"
+        usage="You can embed them and change styles too."
+      >
         <View style={VIEWSTYLE}>
           <Text>
-            {" "}
+            {' '}
             Hello <Text preset="bold">bolded</Text> World.
           </Text>
         </View>
       </UseCase>
     </Story>
   ))
-  .add("Styling", () => (
+  .add('Styling', () => (
     <Story>
       <UseCase text="Style array" usage="Text with style array">
         <View style={viewStyleArray}>
           <Text>
-            {" "}
+            {' '}
             Hello <Text preset="bold">bolded</Text> World.
           </Text>
         </View>
diff --git a/app/components/text/text.tsx b/app/components/text/text.tsx
index 3ea613b..b04b654 100644
--- a/app/components/text/text.tsx
+++ b/app/components/text/text.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Text as ReactNativeText } from "react-native"
-import { presets } from "./text.presets"
-import { TextProps } from "./text.props"
-import { translate } from "../../i18n"
+import * as React from 'react'
+import { Text as ReactNativeText } from 'react-native'
+import { presets } from './text.presets'
+import { TextProps } from './text.props'
+import { translate } from '../../i18n'
 
 /**
  * For your text displaying needs.
@@ -11,7 +11,15 @@ import { translate } from "../../i18n"
  */
 export function Text(props: TextProps) {
   // grab the props
-  const { preset = "default", tx, txOptions, text, children, style: styleOverride, ...rest } = props
+  const {
+    preset = 'default',
+    tx,
+    txOptions,
+    text,
+    children,
+    style: styleOverride,
+    ...rest
+  } = props
 
   // figure out which content to use
   const i18nText = tx && translate(tx, txOptions)
diff --git a/app/components/tweaks/tweaks.story.tsx b/app/components/tweaks/tweaks.story.tsx
index 7ff70d6..770d50f 100644
--- a/app/components/tweaks/tweaks.story.tsx
+++ b/app/components/tweaks/tweaks.story.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { color } from "../../theme"
-import { Tweaks } from "./tweaks"
+import * as React from 'react'
+import { storiesOf } from '@storybook/react-native'
+import { StoryScreen, Story, UseCase } from '../../../storybook/views'
+import { color } from '../../theme'
+import { Tweaks } from './tweaks'
 
-storiesOf("Tweaks", module)
+storiesOf('Tweaks', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="Primary" usage="The primary.">
         <Tweaks style={{ backgroundColor: color.error }} />
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index d6f4d8c..1985174 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from 'react'
 import {
   ScrollView,
   StyleProp,
@@ -8,20 +8,20 @@ import {
   ViewStyle,
   StyleSheet,
   Button,
-} from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
-import Slider from "@react-native-community/slider"
-import { useState } from "react"
-import Accordion from "react-native-collapsible/Accordion"
-import * as Animatable from "react-native-animatable"
-import Icon from "react-native-vector-icons/MaterialCommunityIcons"
-import {Switch} from "react-native-elements"
+} from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
+import Slider from '@react-native-community/slider'
+import { useState } from 'react'
+import Accordion from 'react-native-collapsible/Accordion'
+import * as Animatable from 'react-native-animatable'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { Switch } from 'react-native-elements'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -42,21 +42,23 @@ export interface TweaksProps {
 /**
  * Describe your component here
  */
-export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
+export const Tweaks = observer(function Tweaks(
+  props: TweaksProps,
+): JSX.Element {
   const { style, physics, setPhysics } = props
   //    const styles = flatten([CONTAINER, style])
 
   const content = [
     {
-      title: "Physics",
+      title: 'Physics',
       content: (
         <View>
           <Text preset="fieldLabel" text="Gravity" />
           <Switch
             color="#a991f1"
             trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
+              false: '#62686E',
+              true: '#a991f1',
             }}
             style={styles.switch}
             value={physics.gravityOn}
@@ -64,7 +66,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
               setPhysics({ ...physics, gravityOn: !physics.gravityOn })
             }}
           />
-          <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} />
+          <Text preset="fieldLabel" text={'Gravity: ' + physics.gravity} />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -78,7 +80,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.gravity}
             step={0.01}
           />
-          <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+          <Text
+            preset="fieldLabel"
+            text={'Repulsive force: ' + physics.charge}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -92,7 +97,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.charge}
             step={1}
           />
-          <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+          <Text
+            preset="fieldLabel"
+            text={'Link Force: ' + physics.linkStrength}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -106,7 +114,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.linkStrength}
             step={0.01}
           />
-          <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+          <Text
+            preset="fieldLabel"
+            text={"'Link Iterations': " + physics.linkIts}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -121,11 +132,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             step={1}
           />
           <Text preset="fieldLabel" text="Collision" />
-                    <Switch
+          <Switch
             color="#a991f1"
             trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
+              false: '#62686E',
+              true: '#a991f1',
             }}
             style={styles.switch}
             value={physics.collision}
@@ -133,7 +144,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
               setPhysics({ ...physics, collision: !physics.collision })
             }}
           />
-          <Text preset="fieldLabel" text={"Alpha Decay: " + physics.alphaDecay} />
+          <Text
+            preset="fieldLabel"
+            text={'Alpha Decay: ' + physics.alphaDecay}
+          />
           <Slider
             style={styles.slider}
             minimumTrackTintColor="#a991f1"
@@ -147,7 +161,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.alphaDecay}
             step={0.01}
           />
-          <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} />
+          <Text
+            preset="fieldLabel"
+            text={'Alhpa Target: ' + physics.alphaTarget}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -161,7 +178,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.alphaTarget}
             step={0.1}
           />
-          <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} />
+          <Text
+            preset="fieldLabel"
+            text={'Viscosity: ' + physics.velocityDecay}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -175,12 +195,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.velocityDecay}
             step={0.01}
           />
-          <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
-                    <Switch
+          <Text preset="fieldLabel" text={'Galaxy Mode (3D-only)'} />
+          <Switch
             color="#a991f1"
             trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
+              false: '#62686E',
+              true: '#a991f1',
             }}
             style={styles.switch}
             value={physics.galaxy}
@@ -192,15 +212,15 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
       ),
     },
     {
-      title: "Visual",
+      title: 'Visual',
       content: (
         <View>
           <Text preset="fieldLabel" text="Colorful" />
-                    <Switch
+          <Switch
             color="#a991f1"
             trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
+              false: '#62686E',
+              true: '#a991f1',
             }}
             style={styles.switch}
             value={physics.colorful}
@@ -209,11 +229,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             }}
           />
           <Text preset="fieldLabel" text="Hover highlight" />
-                    <Switch
+          <Switch
             color="#a991f1"
             trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
+              false: '#62686E',
+              true: '#a991f1',
             }}
             style={styles.switch}
             value={physics.hover}
@@ -221,7 +241,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
               setPhysics({ ...physics, hover: !physics.hover })
             }}
           />
-          <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
+          <Text
+            preset="fieldLabel"
+            text={'Line Opacity: ' + physics.linkOpacity}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -235,7 +258,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.linkOpacity}
             step={0.01}
           />
-          <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
+          <Text preset="fieldLabel" text={'Line width: ' + physics.linkWidth} />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -249,7 +272,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.linkWidth}
             step={0.1}
           />
-          <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
+          <Text preset="fieldLabel" text={'Node size: ' + physics.nodeRel} />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -263,7 +286,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.nodeRel}
             step={0.01}
           />
-          <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+          <Text preset="fieldLabel" text={'Particles: ' + physics.particles} />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -277,7 +300,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             value={physics.particles}
             step={1}
           />
-          <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
+          <Text
+            preset="fieldLabel"
+            text={'Particle Size: ' + physics.particleWidth}
+          />
           <Slider
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
@@ -292,11 +318,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             step={0.1}
           />
           <Text preset="fieldLabel" text="Labels" />
-                    <Switch
+          <Switch
             color="#a991f1"
             trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
+              false: '#62686E',
+              true: '#a991f1',
             }}
             style={styles.switch}
             value={physics.labels}
@@ -306,7 +332,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
           />
           <Text
             preset="fieldLabel"
-            text={"Scale when labels become visible: " + physics.labelScale}
+            text={'Scale when labels become visible: ' + physics.labelScale}
           />
           <Slider
             minimumTrackTintColor="#a991f1"
@@ -325,11 +351,8 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
       ),
     },
     {
-      title: "Modes",
-      content: (
-        <View>
-        </View>
-      ),
+      title: 'Modes',
+      content: <View></View>,
     },
   ]
 
@@ -367,13 +390,15 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
     if (tweaks) {
       return (
         <View style={styles.container}>
-          <View style={{ height: 30, width: "100%", backgroundColor: "#2a2e38" }}>
+          <View
+            style={{ height: 30, width: '100%', backgroundColor: '#2a2e38' }}
+          >
             <TouchableOpacity
               style={{
                 width: 30,
-                color: "#a991f1",
-                textAlign: "center",
-                marginLeft: "auto",
+                color: '#a991f1',
+                textAlign: 'center',
+                marginLeft: 'auto',
                 padding: 5,
               }}
               onPress={() => {
@@ -405,11 +430,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
             setTweaks(true)
           }}
           style={{
-            position: "absolute",
+            position: 'absolute',
             top: 50,
             left: 50,
             width: 30,
-            color: "#ffffff",
+            color: '#ffffff',
             zIndex: 100,
           }}
         >
@@ -421,17 +446,17 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
     return (
       <View
         style={{
-          position: "absolute",
-          top: "5%",
-          left: "5%",
+          position: 'absolute',
+          top: '5%',
+          left: '5%',
           zIndex: 100,
           width: 300,
-          backgroundColor: "#000000",
+          backgroundColor: '#000000',
           padding: 20,
         }}
       >
         <Text preset="bold" text="Physics" />
-        <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+        <Text preset="fieldLabel" text={'Repulsive force: ' + physics.charge} />
         <Slider
           minimumTrackTintColor="#a991f1"
           maximumTrackTintColor="#242730"
@@ -445,7 +470,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
           value={physics.charge}
           step={1}
         />
-        <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+        <Text
+          preset="fieldLabel"
+          text={'Link Force: ' + physics.linkStrength}
+        />
         <Slider
           minimumTrackTintColor="#a991f1"
           maximumTrackTintColor="#242730"
@@ -459,7 +487,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
           value={physics.linkStrength}
           step={0.1}
         />
-        <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+        <Text
+          preset="fieldLabel"
+          text={"'Link Iterations': " + physics.linkIts}
+        />
         <Slider
           minimumTrackTintColor="#a991f1"
           maximumTrackTintColor="#242730"
@@ -474,12 +505,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
           step={1}
         />
         <Text preset="fieldLabel" text="Collision" />
-                  <Switch
-            color="#a991f1"
-            trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
-            }}
+        <Switch
+          color="#a991f1"
+          trackColor={{
+            false: '#62686E',
+            true: '#a991f1',
+          }}
           style={styles.switch}
           value={physics.collision}
           onValueChange={() => {
@@ -487,7 +518,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
           }}
         />
         <Text preset="bold" text="Visual" />
-        <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+        <Text preset="fieldLabel" text={'Particles: ' + physics.particles} />
         <Slider
           minimumTrackTintColor="#a991f1"
           maximumTrackTintColor="#242730"
@@ -503,12 +534,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
         />
         <Text preset="bold" text="Modes" />
         <Text preset="fieldLabel" text="Expandable Graph" />
-                  <Switch
-            color="#a991f1"
-            trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
-            }}
+        <Switch
+          color="#a991f1"
+          trackColor={{
+            false: '#62686E',
+            true: '#a991f1',
+          }}
           style={styles.switch}
           value={physics.collapse}
           onValueChange={() => {
@@ -516,12 +547,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
           }}
         />
         <Text preset="fieldLabel" text="3D" />
-                  <Switch
-            color="#a991f1"
-            trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
-            }}
+        <Switch
+          color="#a991f1"
+          trackColor={{
+            false: '#62686E',
+            true: '#a991f1',
+          }}
           style={styles.switch}
           value={physics.threedim}
           onValueChange={() => {
@@ -535,85 +566,85 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
 
 const styles = StyleSheet.create({
   container: {
-    display: "flex",
-    backgroundColor: "#2a2e38",
-    position: "absolute",
+    display: 'flex',
+    backgroundColor: '#2a2e38',
+    position: 'absolute',
     zIndex: 5,
-    marginLeft: "2%",
-    marginTop: "2%",
+    marginLeft: '2%',
+    marginTop: '2%',
     maxWidth: 275,
     borderRadius: 10,
-    borderStyle: "solid",
+    borderStyle: 'solid',
     borderWidth: 10,
-    borderColor: "#2a2e38",
-      maxHeight: "80%",
+    borderColor: '#2a2e38',
+    maxHeight: '80%',
     paddingBottom: 20,
   },
   title: {
-    textAlign: "left",
+    textAlign: 'left',
     fontSize: 22,
-    fontWeight: "300",
+    fontWeight: '300',
     marginBottom: 20,
     paddingLeft: 10,
   },
   header: {
-    backgroundColor: "#2a2e38",
+    backgroundColor: '#2a2e38',
     padding: 10,
     paddingBottom: 20,
-    textAlign: "left",
+    textAlign: 'left',
   },
   headerText: {
-    textAlign: "left",
+    textAlign: 'left',
     paddingLeft: 30,
     fontSize: 16,
-    fontWeight: "500",
+    fontWeight: '500',
   },
   content: {
     padding: 20,
     paddingLeft: 60,
-    backgroundColor: "#000000",
+    backgroundColor: '#000000',
   },
   active: {
-    backgroundColor: "#2a2e38",
+    backgroundColor: '#2a2e38',
   },
   inactive: {
-    backgroundColor: "#2a2e38",
+    backgroundColor: '#2a2e38',
   },
   selectors: {
     marginBottom: 10,
-    flexDirection: "row",
-    justifyContent: "center",
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
   selector: {
-    backgroundColor: "#2a2e38",
+    backgroundColor: '#2a2e38',
     padding: 10,
   },
   activeSelector: {
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
   selectTitle: {
     fontSize: 14,
-    fontWeight: "500",
+    fontWeight: '500',
     padding: 10,
   },
   multipleToggle: {
-    flexDirection: "row",
-    justifyContent: "center",
+    flexDirection: 'row',
+    justifyContent: 'center',
     marginVertical: 30,
-    alignItems: "center",
+    alignItems: 'center',
   },
   multipleToggle__title: {
     fontSize: 16,
     marginRight: 8,
   },
   slider: {
-    minimumTrackTintColor: "#a991f1",
-    thumbTintColor: "#a991f1",
+    minimumTrackTintColor: '#a991f1',
+    thumbTintColor: '#a991f1',
     height: 40,
-    width: "90%",
+    width: '90%',
   },
   switch: {
-    width: "5",
+    width: '5',
     height: 20,
     marginVertical: 10,
   },
diff --git a/app/components/wallpaper/wallpaper.presets.ts b/app/components/wallpaper/wallpaper.presets.ts
index 3885b8f..148ad5c 100644
--- a/app/components/wallpaper/wallpaper.presets.ts
+++ b/app/components/wallpaper/wallpaper.presets.ts
@@ -1,10 +1,10 @@
-import { ImageStyle } from "react-native"
+import { ImageStyle } from 'react-native'
 
 /**
  * All wallpaper will start off looking like this.
  */
 const BASE: ImageStyle = {
-  position: "absolute",
+  position: 'absolute',
   top: 0,
   left: 0,
   bottom: 0,
@@ -22,7 +22,7 @@ export const presets = {
    */
   stretch: {
     ...BASE,
-    resizeMode: "stretch",
+    resizeMode: 'stretch',
     width: null, // Have to set these to null because android ¯\_(ツ)_/¯
     height: null,
   } as ImageStyle,
diff --git a/app/components/wallpaper/wallpaper.props.ts b/app/components/wallpaper/wallpaper.props.ts
index 592bac9..9d97f12 100644
--- a/app/components/wallpaper/wallpaper.props.ts
+++ b/app/components/wallpaper/wallpaper.props.ts
@@ -1,5 +1,5 @@
-import { ImageStyle, StyleProp } from "react-native"
-import { WallpaperPresets } from "./wallpaper.presets"
+import { ImageStyle, StyleProp } from 'react-native'
+import { WallpaperPresets } from './wallpaper.presets'
 
 export interface WallpaperProps {
   /**
diff --git a/app/components/wallpaper/wallpaper.story.tsx b/app/components/wallpaper/wallpaper.story.tsx
index 8f5488a..14a5f62 100644
--- a/app/components/wallpaper/wallpaper.story.tsx
+++ b/app/components/wallpaper/wallpaper.story.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import { storiesOf } from "@storybook/react-native"
-import { StoryScreen, Story, UseCase } from "../../../storybook/views"
-import { Wallpaper } from "./wallpaper"
+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)
+storiesOf('Wallpaper', module)
   .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add("Style Presets", () => (
+  .add('Style Presets', () => (
     <Story>
       <UseCase text="default/stretch" usage="Full screen wallpaper image.">
         <Wallpaper />
diff --git a/app/components/wallpaper/wallpaper.tsx b/app/components/wallpaper/wallpaper.tsx
index 7aaad37..f5e24f1 100644
--- a/app/components/wallpaper/wallpaper.tsx
+++ b/app/components/wallpaper/wallpaper.tsx
@@ -1,7 +1,7 @@
-import React from "react"
-import { AutoImage as Image } from "../auto-image/auto-image"
-import { presets } from "./wallpaper.presets"
-import { WallpaperProps } from "./wallpaper.props"
+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")
 
@@ -12,7 +12,7 @@ import { WallpaperProps } from "./wallpaper.props"
  */
 export function Wallpaper(props: WallpaperProps) {
   // grab the props
-  const { preset = "stretch", style: styleOverride, backgroundImage } = props
+  const { preset = 'stretch', style: styleOverride, backgroundImage } = props
 
   // assemble the style
   const presetToUse = presets[preset] || presets.stretch
@@ -21,5 +21,5 @@ export function Wallpaper(props: WallpaperProps) {
   // figure out which image to use
   //const source = backgroundImage || defaultImage
 
-  return null//<Image source={source} style={styles} />
+  return null //<Image source={source} style={styles} />
 }