Upgrade to Expo SDK 38 (#170)

* SDK updates

* Update to expo-linking

* Update AsyncStorage to react-native-community

* Update Notifications to expo-notifications

* Update to functional components

* Upgrade package

* Add vibration permissions for Android

app.json

@@ -3,7 +3,7 @@
     "name": "Healthy Corners",
     "slug": "healthy-corners",
     "privacy": "public",
-    "sdkVersion": "37.0.0",
+    "sdkVersion": "38.0.0",
     "platforms": ["ios", "android", "web"],
     "version": "1.4.0",
     "primaryColor": "#008550",
@@ -45,7 +45,11 @@
           "apiKey": "AIzaSyD_-M-Tjp0-QN2exYtlNZk3eMBnQPPkxWk"
         }
       },
-      "permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION"],
+      "permissions": [
+        "ACCESS_COARSE_LOCATION",
+        "ACCESS_FINE_LOCATION",
+        "VIBRATE"
+      ],
       "versionCode": 6
     },
     "hooks": {

components/resources/ResourceCard.js

@@ -2,7 +2,7 @@ import { FontAwesome5 } from '@expo/vector-icons';
 import * as Analytics from 'expo-firebase-analytics';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Linking } from 'react-native';
+import * as Linking from 'expo-linking';
 import Colors from '../../constants/Colors';
 import {
   ContentContainer,

components/rewards/RewardsFooter.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { FontAwesome5 } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-community/async-storage';
 import React from 'react';
-import { AsyncStorage, View } from 'react-native';
+import { View } from 'react-native';
 import Colors from '../../constants/Colors';
 import RecordIds from '../../constants/RecordIds';
 import { rewardPointValue } from '../../constants/Rewards';

components/store/AcceptedPrograms.js

@@ -1,5 +1,5 @@
 import { FontAwesome5 } from '@expo/vector-icons';
-import { Linking } from 'expo';
+import * as Linking from 'expo-linking';
 import * as Analytics from 'expo-firebase-analytics';
 import PropTypes from 'prop-types';
 import React from 'react';

components/store/StoreCard.js

@@ -3,7 +3,7 @@ import { useNavigation } from '@react-navigation/native';
 import * as Analytics from 'expo-firebase-analytics';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Linking } from 'react-native';
+import * as Linking from 'expo-linking';
 import Colors from '../../constants/Colors';
 import Window from '../../constants/Layout';
 import {

navigation/DrawerContent.js

@@ -1,16 +1,12 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import { DrawerItemList } from '@react-navigation/drawer';
 import { useFocusEffect } from '@react-navigation/native';
 import { Updates } from 'expo';
 import * as Analytics from 'expo-firebase-analytics';
+import * as Linking from 'expo-linking';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  ActivityIndicator,
-  Alert,
-  AsyncStorage,
-  Linking,
-  View,
-} from 'react-native';
+import { ActivityIndicator, Alert, View } from 'react-native';
 import * as Sentry from 'sentry-expo';
 import {
   BigTitle,

package.json

@@ -52,58 +52,61 @@
   "dependencies": {
     "@babel/core": "^7.0.0",
     "@expo/samples": "~3.0.3",
-    "@expo/vector-icons": "^10.0.3",
-    "@react-native-community/masked-view": "0.1.6",
+    "@expo/vector-icons": "^10.0.0",
+    "@react-native-community/async-storage": "^1.11.0",
+    "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/core": "^3.0.0-alpha.13",
     "@react-navigation/drawer": "^5.3.4",
     "@react-navigation/native": "^5.1.3",
     "@react-navigation/stack": "^5.2.8",
     "airtable": "^0.7.1",
-    "expo": "^37.0.0",
-    "expo-asset": "~8.1.4",
-    "expo-camera": "~8.2.0",
+    "expo": "^38.0.0",
+    "expo-asset": "~8.1.7",
+    "expo-camera": "~8.3.1",
     "expo-cli": "^3.18.0",
-    "expo-constants": "~9.0.0",
-    "expo-crypto": "^8.1.0",
-    "expo-firebase-analytics": "~2.1.2",
-    "expo-firebase-core": "~1.0.0",
+    "expo-constants": "~9.1.1",
+    "expo-crypto": "~8.2.1",
+    "expo-firebase-analytics": "~2.4.1",
+    "expo-firebase-core": "~1.1.1",
     "expo-firebase-recaptcha": "^1.1.0",
-    "expo-font": "~8.1.0",
-    "expo-haptics": "~8.1.0",
-    "expo-location": "~8.1.0",
-    "expo-permissions": "~8.1.0",
+    "expo-font": "~8.2.1",
+    "expo-haptics": "~8.2.1",
+    "expo-linking": "^1.0.3",
+    "expo-location": "~8.2.1",
+    "expo-notifications": "~0.3.3",
+    "expo-permissions": "~9.0.1",
     "expo-status-bar": "^1.0.0",
-    "expo-web-browser": "~8.2.0",
+    "expo-web-browser": "~8.3.1",
     "firebase": "7.9.0",
     "geolib": "^3.1.0",
     "global": "^4.4.0",
     "install": "^0.13.0",
     "libphonenumber-js": "^1.7.52",
     "npm": "^6.13.4",
     "prop-types": "^15.0",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
     "react-geocode": "^0.2.0",
     "react-is": "^16.12.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
     "react-native-alert-async": "^1.0.5",
     "react-native-elements": "^1.2.6",
     "react-native-firebase": "^5.6.0",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-global-props": "^1.1.5",
     "react-native-map-link": "^2.7.5",
-    "react-native-maps": "0.26.1",
+    "react-native-maps": "0.27.1",
     "react-native-materialui-textfield": "^0.13.2",
     "react-native-paper": "^3.6.0",
     "react-native-phone-input": "^0.2.4",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "~2.2.0",
+    "react-native-reanimated": "~1.9.0",
+    "react-native-safe-area-context": "~3.0.7",
+    "react-native-screens": "~2.9.0",
     "react-native-snap-carousel": "^3.9.0",
     "react-native-tab-view": "^2.11.0",
     "react-native-vector-icons": "^6.6.0",
-    "react-native-web": "^0.11.7",
-    "react-native-webview": "8.1.1",
+    "react-native-web": "~0.11.7",
+    "react-native-webview": "9.4.0",
     "react-phone-number-input": "^2.3.24",
     "reanimated-bottom-sheet": "^1.0.0-alpha.15",
     "sentry-expo": "^2.0.3",
@@ -113,7 +116,7 @@
   "devDependencies": {
     "airtable-schema-generator": "^1.3.4",
     "babel-eslint": "^10.0.3",
-    "babel-preset-expo": "^8.1.0",
+    "babel-preset-expo": "^8.2.3",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.9.0",
@@ -124,7 +127,7 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "eslint-plugin-react-native": "^3.8.1",
     "husky": "^4.2.1",
-    "jest-expo": "^37.0.0",
+    "jest-expo": "^38.0.0",
     "lint-staged": "^10.0.6",
     "prettier": "^1.18.2",
     "surge": "^0.21.3",

screens/auth/AuthLoadingScreen.js

@@ -1,6 +1,6 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AsyncStorage } from 'react-native';
 
 // TODO: combine with AuthLoading?
 export default class AuthLoadingScreen extends React.Component {

screens/auth/LogInScreen.js

@@ -1,12 +1,13 @@
 import { FontAwesome5 } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-community/async-storage';
 import { StackActions } from '@react-navigation/native';
-import { Notifications } from 'expo';
 import Constants from 'expo-constants';
 import * as Analytics from 'expo-firebase-analytics';
+import * as Notifications from 'expo-notifications';
 import * as Permissions from 'expo-permissions';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, AsyncStorage, Keyboard } from 'react-native';
+import { Alert, Keyboard } from 'react-native';
 import * as Sentry from 'sentry-expo';
 import AuthTextField from '../../components/AuthTextField';
 import {

screens/auth/SignUpScreen.js

@@ -1,14 +1,15 @@
 import { FontAwesome5 } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-community/async-storage';
 import { StackActions } from '@react-navigation/native';
-import { Notifications } from 'expo';
 import Constants from 'expo-constants';
 import * as Analytics from 'expo-firebase-analytics';
 import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
+import * as Notifications from 'expo-notifications';
 import * as Permissions from 'expo-permissions';
 import * as firebase from 'firebase';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, AsyncStorage, Button, Keyboard } from 'react-native';
+import { Alert, Button, Keyboard } from 'react-native';
 import * as Sentry from 'sentry-expo';
 import AuthTextField from '../../components/AuthTextField';
 import {

screens/auth/WelcomeScreen.js

@@ -1,8 +1,9 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import Constants from 'expo-constants';
 import * as Analytics from 'expo-firebase-analytics';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { AsyncStorage, Image, View } from 'react-native';
+import { Image, View } from 'react-native';
 import {
   Body,
   ButtonContainer,

screens/map/ProductDetailsScreen.js

@@ -10,36 +10,30 @@ import {
 import ProductInfo from '../../components/product/ProductInfo';
 import { SpaceBetweenRowContainer } from '../../styled/shared';
 
-export default class ProductDetailsScreen extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+export default function ProductDetailsScreen(props) {
+  const { currentProduct } = props.route.params;
 
-  render() {
-    const { currentProduct } = this.props.route.params;
-    return (
-      <View>
-        <NavHeaderContainer withMargin backgroundColor="transparent" noShadow>
-          <NavButtonContainer onPress={() => this.props.navigation.goBack()}>
-            <FontAwesome5 name="times" solid size={24} />
-          </NavButtonContainer>
-          <NavTitle />
-        </NavHeaderContainer>
-        <SpaceBetweenRowContainer
-          style={{
-            marginLeft: 20,
-            marginRight: 8,
-          }}>
-          <ProductInfo style={{ flexShrink: 2 }} product={currentProduct} />
-          <Image
-            source={{ uri: currentProduct.imageUrl }}
-            style={{ width: 80, height: 80 }}
-          />
-        </SpaceBetweenRowContainer>
-      </View>
-    );
-  }
+  return (
+    <View>
+      <NavHeaderContainer withMargin backgroundColor="transparent" noShadow>
+        <NavButtonContainer onPress={() => props.navigation.goBack()}>
+          <FontAwesome5 name="times" solid size={24} />
+        </NavButtonContainer>
+        <NavTitle />
+      </NavHeaderContainer>
+      <SpaceBetweenRowContainer
+        style={{
+          marginLeft: 20,
+          marginRight: 8,
+        }}>
+        <ProductInfo style={{ flexShrink: 2 }} product={currentProduct} />
+        <Image
+          source={{ uri: currentProduct.imageUrl }}
+          style={{ width: 80, height: 80 }}
+        />
+      </SpaceBetweenRowContainer>
+    </View>
+  );
 }
 
 ProductDetailsScreen.propTypes = {

screens/map/ProductsScreen.js

@@ -12,53 +12,47 @@ import ProductCard from '../../components/product/ProductCard';
 import { ProductListContainer } from '../../styled/product';
 import { ColumnContainer } from '../../styled/shared';
 
-export default class ProductsScreen extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+export default function ProductsScreen(props) {
+  const { products, store } = props.route.params;
 
-  render() {
-    const { products, store } = this.props.route.params;
-    return (
-      <View>
-        <NavHeaderContainer withMargin>
-          <NavButtonContainer onPress={() => this.props.navigation.goBack()}>
-            <FontAwesome5 name="arrow-left" solid size={24} />
-          </NavButtonContainer>
-          <NavTitle>{store.storeName}</NavTitle>
-        </NavHeaderContainer>
-        <ProductListContainer>
-          <FlatList
-            showsVerticalScrollIndicator={false}
-            columnWrapperStyle={{ flex: 1, justifyContent: 'space-between' }}
-            numColumns={2}
-            data={products}
-            renderItem={({ item }) => (
-              <ProductCard
-                key={item.id}
-                product={item}
-                navigation={this.props.navigation}
-                store={store}
-                displayPoints
-                productsScreen
-              />
-            )}
-            keyExtractor={(item) => item.id}
-            ItemSeparatorComponent={() => (
-              <View style={{ width: 20, height: 20 }} />
-            )}
-            ListHeaderComponent={
-              <ColumnContainer style={{ marginBottom: 20 }}>
-                <Title>{`Products (${products.length})`}</Title>
-              </ColumnContainer>
-            }
-            ListFooterComponent={<View style={{ height: 400 }} />}
-          />
-        </ProductListContainer>
-      </View>
-    );
-  }
+  return (
+    <View>
+      <NavHeaderContainer withMargin>
+        <NavButtonContainer onPress={() => props.navigation.goBack()}>
+          <FontAwesome5 name="arrow-left" solid size={24} />
+        </NavButtonContainer>
+        <NavTitle>{store.storeName}</NavTitle>
+      </NavHeaderContainer>
+      <ProductListContainer>
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          columnWrapperStyle={{ flex: 1, justifyContent: 'space-between' }}
+          numColumns={2}
+          data={products}
+          renderItem={({ item }) => (
+            <ProductCard
+              key={item.id}
+              product={item}
+              navigation={props.navigation}
+              store={store}
+              displayPoints
+              productsScreen
+            />
+          )}
+          keyExtractor={(item) => item.id}
+          ItemSeparatorComponent={() => (
+            <View style={{ width: 20, height: 20 }} />
+          )}
+          ListHeaderComponent={
+            <ColumnContainer style={{ marginBottom: 20 }}>
+              <Title>{`Products (${products.length})`}</Title>
+            </ColumnContainer>
+          }
+          ListFooterComponent={<View style={{ height: 400 }} />}
+        />
+      </ProductListContainer>
+    </View>
+  );
 }
 
 ProductsScreen.propTypes = {