Fix: Upgrade to Expo SDK 46

.gitignore

@@ -720,8 +720,6 @@ fastlane/screenshots
 
 .pnp.js
 
-app.json
-
 firebase-config.prod.js
 firebase-config.qa.js
 firebase-config.dev.js

.node_version

@@ -0,0 +1 @@
+16.19.1

App.js

@@ -1,56 +1,60 @@
 // @flow
 import React, { useState } from "react";
-import AppLoading from "expo-app-loading";
 import { Asset } from "expo-asset";
 import * as Font from "expo-font";
+import AppLoading from "./components/app-loading";
 import AppState from "./components/app-state";
 import Session from "./components/session";
 import { Ionicons } from "@expo/vector-icons";
 import AppNavigator from "./navigation/app-navigator";
 import { LogBox } from "react-native";
 // This and the following two lines account for missing base64 support in some versions of Node
-import {decode, encode} from 'base-64'
-if (!global.btoa) { global.btoa = encode }
-if (!global.atob) { global.atob = decode }
+import { decode, encode } from "base-64";
+if (!global.btoa) {
+    global.btoa = encode;
+}
+if (!global.atob) {
+    global.atob = decode;
+}
 // Some versions of Firebase assume access to a Window object that react-native does not have
 window.addEventListener = x => x;
 
 // Stop annoying Android users with useless warnings.
 LogBox.ignoreLogs(["Setting a timer for a long period of time", "getNode"]);
-//LogBox.ignoreAllLogs();
+// LogBox.ignoreAllLogs();
 
 type PropsType = { skipLoadingScreen: boolean };
 // Bootstrapping the app
 const App = ({ skipLoadingScreen }: PropsType): React$Element<any> => {
-
     const [isLoadingComplete, setIsLoadingComplete] = useState(false);
 
-    const loadResourcesAsync = async (): Promise<any> => Promise.all([
-        Asset.loadAsync([
-            require("./assets/images/circle-turquoise.png"),
-            require("./assets/images/circle-blue.png"),
-            require("./assets/images/circle-red.png"),
-            require("./assets/images/circle-yellow.png"),
-            require("./assets/images/circle-green.png"),
-            require("./assets/images/circle-purple.png"),
-            require("./assets/images/circle-orange.png"),
-            require("./assets/images/green-up-logo.png")
-        ]),
-        Font.loadAsync({
-            // This is the font that we are using for our tab bar
-            ...Ionicons.font,
-            "Rubik-Regular": require("./assets/fonts/Rubik/Rubik-Regular.ttf"),
-            "Rubik-Medium": require("./assets/fonts/Rubik/Rubik-Medium.ttf"),
-            "Rubik-MediumItalic": require("./assets/fonts/Rubik/Rubik-MediumItalic.ttf"),
-            "Rubik-Bold": require("./assets/fonts/Rubik/Rubik-Bold.ttf"),
-            "Rubik-BoldItalic": require("./assets/fonts/Rubik/Rubik-BoldItalic.ttf"),
-            "Rubik-Black": require("./assets/fonts/Rubik/Rubik-Black.ttf"),
-            "Rubik-BlackItalic": require("./assets/fonts/Rubik/Rubik-BlackItalic.ttf"),
-            "Rubik-Light": require("./assets/fonts/Rubik/Rubik-Light.ttf"),
-            "Rubik-LightItalic": require("./assets/fonts/Rubik/Rubik-LightItalic.ttf"),
-            "rubicon-icon-font": require("./assets/fonts/Rubik/rubicon-icon-font.ttf")
-        })
-    ]);
+    const loadResourcesAsync = async (): Promise<any> =>
+        Promise.all([
+            Asset.loadAsync([
+                require("./assets/images/circle-turquoise.png"),
+                require("./assets/images/circle-blue.png"),
+                require("./assets/images/circle-red.png"),
+                require("./assets/images/circle-yellow.png"),
+                require("./assets/images/circle-green.png"),
+                require("./assets/images/circle-purple.png"),
+                require("./assets/images/circle-orange.png"),
+                require("./assets/images/green-up-logo.png")
+            ]),
+            Font.loadAsync({
+                // This is the font that we are using for our tab bar
+                ...Ionicons.font,
+                "Rubik-Regular": require("./assets/fonts/Rubik/Rubik-Regular.ttf"),
+                "Rubik-Medium": require("./assets/fonts/Rubik/Rubik-Medium.ttf"),
+                "Rubik-MediumItalic": require("./assets/fonts/Rubik/Rubik-MediumItalic.ttf"),
+                "Rubik-Bold": require("./assets/fonts/Rubik/Rubik-Bold.ttf"),
+                "Rubik-BoldItalic": require("./assets/fonts/Rubik/Rubik-BoldItalic.ttf"),
+                "Rubik-Black": require("./assets/fonts/Rubik/Rubik-Black.ttf"),
+                "Rubik-BlackItalic": require("./assets/fonts/Rubik/Rubik-BlackItalic.ttf"),
+                "Rubik-Light": require("./assets/fonts/Rubik/Rubik-Light.ttf"),
+                "Rubik-LightItalic": require("./assets/fonts/Rubik/Rubik-LightItalic.ttf"),
+                "rubicon-icon-font": require("./assets/fonts/Rubik/rubicon-icon-font.ttf")
+            })
+        ]);
 
     const handleLoadingError = (error: Error) => {
         // In this case, you might want to report the error to your error
@@ -59,35 +63,28 @@ const App = ({ skipLoadingScreen }: PropsType): React$Element<any> => {
     };
 
     const handleFinishLoading = () => {
-            // This pause lets a user see the loading screen longer,
-            // which is good because it has a winning poster picture on it.
-            // The pause is long enough that people can see the poster,
-            // and short enough it shouldn't bother anyone.
-            setTimeout(() => {
-                setIsLoadingComplete(true);
-            },
-            4000
-        );
+        // This pause lets a user see the loading screen longer,
+        // which is good because it has a winning poster picture on it.
+        // The pause is long enough that people can see the poster,
+        // and short enough it shouldn't bother anyone.
+        setTimeout(() => {
+            setIsLoadingComplete(true);
+        }, 4000);
     };
 
     const load = (
-        <AppLoading
-            onError={ handleLoadingError }
-            onFinish={ handleFinishLoading }
-            startAsync={ loadResourcesAsync }
-        />
+        <AppLoading onError={handleLoadingError} onFinish={handleFinishLoading} startAsync={loadResourcesAsync} />
     );
 
     const mainApp = (
         <AppState>
             <Session>
-                <AppNavigator/>
+                <AppNavigator />
             </Session>
         </AppState>
     );
 
-    return (!isLoadingComplete && !skipLoadingScreen ? load : mainApp);
-
+    return !isLoadingComplete && !skipLoadingScreen ? load : mainApp;
 };
 
 export default App;

CONTRIBUTING.md

@@ -26,11 +26,11 @@ Get your own Firebase database here (https://firebase.google.com/) or, if you wa
 
 3) **Install Project Dependencies**:
 ```bash
-nvm install v12.6.1
-nvm use v12.6.1
-# optional nvm alias green-up v12.6.1
-npm install
-npm install -g expo-cli #Currently using version , but the latest version is ok
+nvm install v16.19.1
+nvm use v16.19.1
+# optional nvm alias green-up v16.19.1
+npm install --legacy-peer-deps
+npm install -g expo-cli
 npm install -g flow
 ```
 
@@ -41,7 +41,7 @@ npm install -g flow
 5) **Start the Application**: Run the project in the root folder.
 
 ```bash
-expo start
+expo-cli start
 ```
 
 6) **Profit!** When the giant QR code appears in the editor...
@@ -50,20 +50,6 @@ expo start
 
     This will open the app on your phone. Now create an account and begin exploring!
 
-### ~Alternative Quickstart: using GitPod~ DEPRECATED
-> :warning: This setup is currently unmaintained. Use at your own risk.
-
-1) ~**Launch a Gitpod Workspace**: The easiest way to start contributing is by skipping the setup process and using GitPod in your browser by clicking [here](https://gitpod.io/#https://github.com/codeforbtv/green-up-app). It always takes a few minutes, so do this step first.~
-2) ~**Get a Config File**: You won't be able to run the code without a firebase-config.js file. The fastest approach is to use our shared dev environment (..which we share, so please treat it kindly). There is one pinned to the [#green-up Slack channel][3] for our dev environment. If you have trouble finding it, just ask anyone in the channel. Save your firebase-config.js in the root of the project.~
-~3) **Download the Expo App**: The Green Up app is configured to be run on your physical phone inside the Expo mobile app (aka the "Expo Client"). Expo is a shell that runs the unpublished mobile app.~
-    * ~[Download for iPhones][1]~
-    * ~[Download for Android][2]~
-4) ~**Restart Expo**: When the GitPod workspace starts a config file in the project instructs it to install the Green Up app, and then it opens a terminal in the editor, runs the `expo start` command to launch the expo cli. Use `ctrl+c` to kill the cli tool, and type `expo start --host tunnel` to restart it with the new config information.~
-5) ~**Profit!** When the giant QR code appears in the editor...~
-    * ~**iPhones**: point your camera at the QR code and the app will launch in expo~
-    * ~**Android**: open the Expo mobile app and click "Scan QR Code"~
-    ~This will open the app on your phone. Now create an account and begin exploring!~
-
 ## How to Contribute Your Work
 
 To contribute, send us a pull request. Our team will do our best to review it on time and merge it to master.

app.json

@@ -0,0 +1,55 @@
+{
+  "expo": {
+    "name": "Green Up",
+    "description": "The Official App for Vermont's Green Up Day",
+    "slug": "Green-Up-Vermont",
+    "privacy": "public",
+    "sdkVersion": "46.0.0",
+    "platforms": ["ios", "android"],
+    "owner": "c4btv",
+    "githubUrl": "https://github.com/codeforbtv/green-up-app",
+    "version": "5.0.37",
+    "orientation": "portrait",
+    "icon": "./assets/images/green-up-icon-1024-NO-ALPHA.png",
+    "splash": {
+      "image": "./assets/images/loading-poster.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "buildNumber": "32",
+      "supportsTablet": false,
+      "bundleIdentifier": "org.greenupvermont.app",
+      "config": {
+        "googleSignIn": {
+          "reservedClientId": "com.googleusercontent.apps.439621369113-n8qpls93d89p46dg8rlbkt09k3dnk44s"
+        }
+      },
+      "infoPlist": {
+        "NSLocationWhenInUseUsageDescription": "We use your location to mark where you leave your trash bags"
+      }
+    },
+    "android": {
+      "package": "org.greenupvermont.app",
+      "versionCode": 33,
+      "permissions": ["READ_CONTACTS", "ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION", "ACCESS_NETWORK_STATE"],
+      "config": {
+        "googleSignIn": {
+          "apiKey": "AIzaSyCOrCzO_pJ3_OVw3ScpwP2Fl6-h4wJ8IOA",
+          "certificateHash": "DB62BE57BA941E929F0FBD9FA394EA18D25A6C35"
+        },
+        "googleMaps": {
+          "apiKey": "AIzaSyCOrCzO_pJ3_OVw3ScpwP2Fl6-h4wJ8IOA"
+        }
+      }
+    },
+    "androidStatusBar": {
+      "barStyle": "dark-content",
+      "backgroundColor": "#EEEEEE"
+    }
+  }
+}

babel.config.js

@@ -1,6 +1,7 @@
 module.exports = function(api) {
     api.cache(true);
     return {
-        presets: ["babel-preset-expo"]
+        presets: ["babel-preset-expo"],
+        plugins: [["react-native-reanimated/plugin", { relativeSourceLocation: true }]]
     };
 };

components/app-loading/app-loading-native-wrapper.js

@@ -0,0 +1,31 @@
+import React from "react";
+import * as SplashScreen from "expo-splash-screen";
+
+export default class AppLoading extends React.Component {
+    static defaultProps = {
+        autoHideSplash: true
+    };
+
+    constructor(props) {
+        super(props);
+        SplashScreen.preventAutoHideAsync();
+    }
+
+    componentWillUnmount() {
+        // eslint-disable-next-line react/prop-types
+        if (this.props.autoHideSplash === false) {
+            return;
+        }
+        // @ts-ignore
+        if (global.__E2E__) {
+            // Hide immediately in E2E tests
+            SplashScreen.hideAsync();
+        } else {
+            setTimeout(SplashScreen.hideAsync, 200);
+        }
+    }
+
+    render() {
+        return null;
+    }
+}

components/app-loading/app-loading.js

@@ -0,0 +1,54 @@
+import React from "react";
+
+import NativeAppLoading from "./app-loading-native-wrapper";
+
+class AppLoading extends React.Component {
+    _isMounted = false;
+
+    componentDidMount() {
+        this._isMounted = true;
+
+        this.startLoadingAppResourcesAsync().catch(error => {
+            console.error(`AppLoading threw an unexpected error when loading:\n${error}`);
+        });
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
+    async startLoadingAppResourcesAsync() {
+        if (!("startAsync" in this.props)) {
+            return;
+        }
+
+        if (!("onFinish" in this.props)) {
+            throw new Error("AppLoading onFinish prop is required if startAsync is provided");
+        }
+
+        if (!("onError" in this.props)) {
+            throw new Error("AppLoading onError prop is required if startAsync is provided");
+        }
+
+        try {
+            await this.props.startAsync();
+        } catch (e) {
+            if (!this._isMounted) {
+                return;
+            }
+            this.props.onError(e);
+        } finally {
+            if (!this._isMounted) {
+                return;
+            }
+            // If we get to this point then we know that either there was no error, or the error was handled.
+            this.props.onFinish();
+        }
+    }
+
+    render() {
+        return <NativeAppLoading {...this.props} />;
+    }
+}
+
+export default AppLoading;

components/app-loading/index.js

@@ -0,0 +1,9 @@
+/**
+ * NOTE: (justinpchang)
+ * expo-app-loading was deprecated in expo v45.0.0.
+ * This component comes from the expo-app-loading source code.
+ * It is just a thin wrapper around expo-splash-screen that allows us to keep using it.
+ */
+import AppLoading from "./app-loading";
+
+export default AppLoading;

navigation/app-navigator.js

@@ -3,6 +3,8 @@ import { createAppContainer, createSwitchNavigator } from "react-navigation";
 
 import MainTabNavigator from "./main-tab-navigator";
 
-export default createAppContainer<any, any>(createSwitchNavigator({
-    Main: MainTabNavigator
-}));
+export default createAppContainer<any, any>(
+    createSwitchNavigator({
+        Main: MainTabNavigator
+    })
+);

navigation/home-stack.js

@@ -1,5 +1,6 @@
 // @flow
-import { createStackNavigator, createAppContainer } from "react-navigation";
+import { createAppContainer } from "react-navigation";
+import { createStackNavigator } from "react-navigation-stack";
 import HomeScreen from "../screens/home-screen";
 import FindTeamScreen from "../screens/find-team-screen";
 import NewTeamScreen from "../screens/new-team-screen";

navigation/leaderboard-stack.js

@@ -1,5 +1,6 @@
 // @flow
-import { createStackNavigator, createAppContainer } from "react-navigation";
+import { createAppContainer } from "react-navigation";
+import { createStackNavigator } from "react-navigation-stack";
 import LeaderboardScreen from "../screens/leaderboard-screen";
 
 const LeaderboardStack = createStackNavigator({