init before upgrade

.eslintrc.json

@@ -21,9 +21,6 @@
     "prettier/prettier": [
       "error",
       {
-        "singleQuote": true,
-        "trailingComma": "all",
-        "arrowParens": "avoid",
         "endOfLine": "auto"
       }
     ],

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -1,4 +1,7 @@
 {
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+  "ec72f44c26176596b3f8f4ff2733f1c6a0f87fe6224a117439a1caea409505fd": true,
+  "24272cdaeff82cc5facdaccd982a6f05b60c4504704bbf94c19a6388659880bb": true,
+  "5193b4ad8735090dcbfaf0e070e7354ee4bc3b7951faf1edbe2757aa21757f96": true,
+  "4c27b7466a8169ab063b6150f65d7c75c2919ff2c1e5572f55d537c6ca04ff9e": true,
+  "5deb055be550b37ca358a297078e0b7f15f2a3f95c0c5cfb6db9c9e376cc7900": true
 }

.gitignore

@@ -1,5 +1,5 @@
-node_modules/**/*
-.expo/*
+node_modules/
+.expo
 npm-debug.*
 *.jks
 *.p8

App.tsx

@@ -1,22 +1,89 @@
-/* eslint-disable react/style-prop-object */
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React from "react";
+import {
+  StyleSheet,
+  Button,
+  View,
+  SafeAreaView,
+  Text,
+  Alert,
+} from "react-native";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: "center",
+    marginHorizontal: 16,
+  },
+  title: {
+    textAlign: "center",
+    marginVertical: 8,
+  },
+  fixToText: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  separator: {
+    marginVertical: 8,
+    borderBottomColor: "#737373",
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
 });
 
+const Separator = () => <View style={styles.separator} />;
+
 export default function App(): JSX.Element {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          The title and onPress handler are required. It is recommended to set
+          accessibilityLabel to help make your app usable by everyone. :)
+        </Text>
+        <Button
+          title="Press me"
+          onPress={() => Alert.alert("Simple Button pressed")}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          Adjust the color in a way that looks standard on each platform. On
+          iOS, the color prop controls the color of the text. On Android, the
+          color adjusts the background color of the button.
+        </Text>
+        <Button
+          title="Press me"
+          color="#f194ff"
+          onPress={() => Alert.alert("Button with adjusted color pressed")}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          All interaction for the component are disabled.
+        </Text>
+        <Button
+          title="Press me"
+          disabled
+          onPress={() => Alert.alert("Cannot press this one")}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          This layout strategy lets the title define the width of the button.
+        </Text>
+        <View style={styles.fixToText}>
+          <Button
+            title="Left button"
+            onPress={() => Alert.alert("Left button pressed")}
+          />
+          <Button
+            title="Right button"
+            onPress={() => Alert.alert("Right button pressed")}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
   );
 }

app.json

@@ -1,24 +1,36 @@
 {
   "expo": {
-    "name": "typescript-app",
-    "slug": "typescript-app",
+    "name": "Leaving Cert CAO Points Calculator",
+    "description": "Helps calculate how many CAO points you need to qualify for a course",
+    "slug": "cao-calculator",
     "version": "1.0.0",
     "orientation": "portrait",
+    "backgroundColor": "#164E63",
+    "primaryColor": "#0E7490",
+    "androidStatusBar": {
+      "backgroundColor": "#164E63"
+    },
+    "androidNavigationBar": {
+      "barStyle": "light-content"
+    },
     "icon": "./assets/icon.png",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#164E63"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#164E63"
+      }
+    },
     "assetBundlePatterns": [
       "**/*"
     ],
-    "ios": {
-      "supportsTablet": true
-    },
     "web": {
       "favicon": "./assets/favicon.png"
     }