Upgrade expo to sdk 40 (#325)

[Expo released new sdk 40](https://blog.expo.io/expo-sdk-40-is-now-available-d4d73e67da33). Did migration to update sdk and apis.
hyochan · Dec 12, 2020 · a534ab9 · a534ab9
1 parent d138554
commit a534ab9
Show file tree

Hide file tree

Showing 17 changed files with 1,821 additions and 1,590 deletions.
diff --git a/client/.env.sample b/client/.env.sample
@@ -10,5 +10,5 @@ googleIOSClientId=xxxx
 
 sentryAuthToken=xxx
 
-appVersion=1.1.1
-androidVersionCode=5
+appVersion=1.4.0
+androidVersionCode=11
diff --git a/client/.eslintignore b/client/.eslintignore
@@ -1,2 +1,3 @@
 graphql.ts
-**/*/__tests__/**/*
+**/*.js
+# **/*/__tests__/**/*
diff --git a/client/metro.config.js b/client/metro.config.js
@@ -1,19 +1,14 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { getDefaultConfig } = require('metro-config');
+const { getDefaultConfig } = require('@expo/metro-config');
 
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
+const defaultConfig = getDefaultConfig(__dirname);
 
-  return {
-    transformer: {
-      babelTransformerPath: require.resolve('react-native-svg-transformer'),
-      assetPlugins: ['expo-asset/tools/hashAssetFiles'],
-    },
-    resolver: {
-      assetExts: assetExts.filter((ext) => ext !== 'svg'),
-      sourceExts: [...sourceExts, 'svg'],
-    },
-  };
-})();
+module.exports = {
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
+  },
+  resolver: {
+    assetExts: defaultConfig.resolver.assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
+  },
+};
diff --git a/client/package.json b/client/package.json
@@ -6,8 +6,8 @@
   "description": "Opensource chat app",
   "author": "dooboolab",
   "license": "GPL-3.0-only",
-  "postinstall": "npx jetify",
   "scripts": {
+    "postinstall": "patch-package",
     "dev": "node node_modules/react-native/local-cli/cli.js start",
     "tsc": "tsc",
     "cp:config": "cp .env.sample .env",
@@ -34,9 +34,10 @@
   "dependencies": {
     "@dooboo-ui/theme": "^0.0.3",
     "@expo/match-media": "^0.0.0-beta.2",
+    "@expo/metro-config": "^0.1.46",
     "@expo/react-native-action-sheet": "^3.8.0",
-    "@expo/vector-icons": "^10.2.1",
-    "@react-native-community/async-storage": "~1.12.1",
+    "@expo/vector-icons": "^12.0.2",
+    "@react-native-async-storage/async-storage": "^1.13.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.2",
     "@react-navigation/core": "^5.14.4",
@@ -45,110 +46,113 @@
     "@react-navigation/stack": "^5.12.8",
     "date-fns": "^2.16.1",
     "dooboo-ui": "^0.0.25",
-    "expo": "^39.0.5",
-    "expo-ads-admob": "~8.3.0",
-    "expo-apple-authentication": "~2.2.1",
-    "expo-asset": "~8.2.0",
-    "expo-auth-session": "~2.0.0",
-    "expo-constants": "~9.2.0",
-    "expo-crypto": "~8.3.0",
-    "expo-device": "~2.3.0",
-    "expo-image-manipulator": "~8.3.0",
-    "expo-image-picker": "~9.1.1",
-    "expo-linear-gradient": "~8.3.1",
-    "expo-localization": "~9.0.0",
-    "expo-notifications": "~0.7.2",
-    "expo-permissions": "~9.3.0",
-    "expo-screen-orientation": "~2.0.0",
-    "expo-splash-screen": "~0.6.2",
-    "expo-updates": "~0.3.5",
-    "expo-web-browser": "~8.5.0",
+    "expo": "^40.0.0",
+    "expo-ads-admob": "~8.4.0",
+    "expo-apple-authentication": "~2.2.2",
+    "expo-asset": "~8.2.1",
+    "expo-auth-session": "~3.0.0",
+    "expo-constants": "~9.3.5",
+    "expo-crypto": "~8.4.0",
+    "expo-device": "~2.4.0",
+    "expo-image-manipulator": "~8.4.0",
+    "expo-image-picker": "~9.2.1",
+    "expo-linear-gradient": "~8.4.0",
+    "expo-localization": "~9.1.0",
+    "expo-notifications": "~0.8.2",
+    "expo-permissions": "~10.0.0",
+    "expo-random": "~10.0.0",
+    "expo-screen-orientation": "~2.1.0",
+    "expo-splash-screen": "~0.8.1",
+    "expo-updates": "~0.4.1",
+    "expo-web-browser": "~8.6.0",
     "graphql": "^15.4.0",
     "i18n-js": "^3.8.0",
     "immer": "^8.0.0",
     "mime": "^2.4.6",
     "moment": "^2.29.1",
     "react": "^0.0.0-experimental-4ead6b530",
     "react-dom": "^0.0.0-experimental-4ead6b530",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
     "react-native-appearance": "~0.3.4",
-    "react-native-gesture-handler": "~1.7.0",
+    "react-native-gesture-handler": "~1.8.0",
     "react-native-modalbox": "^2.0.2",
     "react-native-reanimated": "~1.13.0",
     "react-native-redash": "^14.2.4",
-    "react-native-safe-area-context": "3.1.4",
+    "react-native-safe-area-context": "3.1.9",
     "react-native-scalable-image": "^1.0.0",
-    "react-native-screens": "~2.10.1",
+    "react-native-screens": "~2.15.0",
     "react-native-svg": "12.1.0",
     "react-native-tab-view": "^2.15.2",
-    "react-native-web": "~0.14.8",
+    "react-native-web": "~0.14.9",
     "react-native-webview": "11.0.0",
     "react-navigation-stack": "^2.10.2",
-    "react-relay": "^0.0.0-experimental-c818bac3",
-    "react-responsive": "^8.1.1",
-    "sentry-expo": "^3.0.3",
+    "react-relay": "^0.0.0-experimental-4ebe0514",
+    "react-responsive": "^8.2.0",
+    "sentry-expo": "^3.0.4",
     "styled-components": "^5.2.1",
     "subscriptions-transport-ws": "^0.9.18"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.12.9",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "~7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-transform-runtime": "7.12.1",
+    "@babel/plugin-transform-runtime": "7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
     "@bam.tech/react-native-make": "^3.0.0",
     "@dooboo/eslint-config": "^0.5.6",
-    "@expo/webpack-config": "^0.12.44",
-    "@graphql-codegen/cli": "^1.19.2",
-    "@graphql-codegen/core": "^1.17.8",
-    "@graphql-codegen/typescript": "^1.18.0",
-    "@graphql-codegen/typescript-operations": "^1.17.11",
+    "@expo/webpack-config": "~0.12.51",
+    "@graphql-codegen/cli": "^1.19.4",
+    "@graphql-codegen/core": "^1.17.9",
+    "@graphql-codegen/typescript": "^1.19.0",
+    "@graphql-codegen/typescript-operations": "^1.17.12",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-native": "^3.4.3",
-    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/react-hooks": "^3.7.0",
     "@testing-library/react-native": "^7",
     "@types/expo": "^33.0.1",
     "@types/i18n-js": "^3.0.3",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^26.0.19",
     "@types/mime": "^2.0.3",
     "@types/react": "~17.0.0",
-    "@types/react-native": "~0.63.2",
+    "@types/react-native": "^0.63.37",
     "@types/react-native-modalbox": "^1.4.8",
     "@types/react-relay": "^7.0.17",
     "@types/react-responsive": "^8.0.2",
     "@types/react-test-renderer": "^17.0",
     "@types/relay-test-utils": "^6.0.3",
-    "@types/styled-components": "^5.1.4",
+    "@types/styled-components": "^5.1.5",
     "abort-controller": "^3.0.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-inline-dotenv": "^1.6.0",
-    "babel-plugin-relay": "^10.1.0",
+    "babel-plugin-relay": "^10.1.1",
     "babel-plugin-styled-components": "^1.12.0",
-    "babel-preset-expo": "^8.3.0",
+    "babel-preset-expo": "8.3.0",
     "codecov": "^3.8.1",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "get-graphql-schema": "^2.1.2",
     "import-sort-style-eslint": "^6.0.0",
     "jest": "^26.6.3",
     "jest-environment-node": "^26.6.2",
-    "jest-expo": "^39.0.0",
+    "jest-expo": "^40.0.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^7.0.3",
     "jetifier": "^1.6.6",
-    "prettier": "^2.2.0",
+    "patch-package": "^6.2.2",
+    "postinstall-postinstall": "^2.1.0",
+    "prettier": "^2.2.1",
     "prettier-plugin-import-sort": "^0.0.6",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "0.0.0-fec00a869",
-    "relay-compiler": "^10.1.0",
+    "relay-compiler": "^10.1.1",
     "relay-compiler-language-typescript": "^13.0.2",
-    "relay-config": "^10.1.0",
-    "relay-test-utils": "^10.1.0",
+    "relay-config": "^10.1.1",
+    "relay-test-utils": "^10.1.1",
     "sharp-cli": "^1.14.1",
     "ts-jest": "^26.4.4",
-    "typescript": "~4.1.2"
+    "typescript": "~4.1.3"
   },
   "importSort": {
     ".js, .jsx": {

diff --git a/client/schema.graphql b/client/schema.graphql
@@ -1,3 +1,9 @@
+"""Exposes a URL that specifies the behaviour of this scalar."""
+directive @specifiedBy(
+  """The URL that specifies the behaviour of this scalar."""
+  url: String!
+) on SCALAR
+
 scalar AlertMode
 
 scalar Auth

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -20,7 +20,7 @@ import type {
   AppUserQuery,
 } from './__generated__/AppUserQuery.graphql';
 import { Asset } from 'expo-asset';
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import ComponentWrapper from './utils/ComponentWrapper';
 import Icons from './utils/Icons';
 import { LoadingIndicator } from 'dooboo-ui';

diff --git a/client/src/apis/upload.ts b/client/src/apis/upload.ts
@@ -1,6 +1,6 @@
 import * as Config from '../../config';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import mime from 'mime';
 
 export const uploadImageAsync = async (

diff --git a/client/src/components/screen/LicenseAgreement.tsx b/client/src/components/screen/LicenseAgreement.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactElement } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { RootStackNavigationProps } from '../navigation/RootStackNavigator';
 import { getString } from '../../../STRINGS';
 import styled from 'styled-components/native';

diff --git a/client/src/components/screen/Settings.tsx b/client/src/components/screen/Settings.tsx
@@ -4,7 +4,7 @@ import { SvgApple, SvgFacebook, SvgGoogle } from '../../utils/Icons';
 import { graphql, useMutation } from 'react-relay/hooks';
 import styled, { DefaultTheme } from 'styled-components/native';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { AuthType } from '../../types/graphql';
 import { Button } from 'dooboo-ui';
 import { FontAwesome } from '@expo/vector-icons';

diff --git a/client/src/components/screen/SignIn.tsx b/client/src/components/screen/SignIn.tsx
@@ -22,7 +22,7 @@ import { graphql, useMutation } from 'react-relay/hooks';
 import { showAlertForError, validateEmail } from '../../utils/common';
 import styled, { css } from 'styled-components/native';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { AuthStackNavigationProps } from '../navigation/AuthStackNavigator';
 import { EditTextInputType } from 'dooboo-ui/EditText';
 import type {

diff --git a/client/src/components/screen/__tests__/SignIn.test.tsx b/client/src/components/screen/__tests__/SignIn.test.tsx
@@ -11,7 +11,7 @@ import {
 } from '@testing-library/react-native';
 import { createTestElement, createTestProps } from '../../../../test/testUtils';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import AuthContext from '../../../providers/AuthProvider';
 import { FetchMock } from 'jest-fetch-mock';
 import { MockPayloadGenerator } from 'relay-test-utils';

diff --git a/client/src/components/shared/SocialSignInButton.tsx b/client/src/components/shared/SocialSignInButton.tsx
@@ -17,7 +17,7 @@ import type {
 } from '../../__generated__/SocialSignInButtonGoogleSignInMutation.graphql';
 import { graphql, useMutation } from 'react-relay/hooks';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Button } from 'dooboo-ui';
 import { getString } from '../../../STRINGS';
 import { showAlertForError } from '../../utils/common';

diff --git a/client/src/components/shared/UserListItem.tsx b/client/src/components/shared/UserListItem.tsx
@@ -127,7 +127,7 @@ function Shared({
                 : null
             }
           </ImageWrapper>
-          <StyledText numberOfLines={1}>{nickname ?? name ?? getString('NO_NAME')}</StyledText>
+          <StyledText numberOfLines={1}>{nickname || name || getString('NO_NAME')}</StyledText>
           {
             showCheckBox
               ? <CheckBox

diff --git a/client/src/relay/fetch.ts b/client/src/relay/fetch.ts
@@ -1,6 +1,6 @@
 import * as Config from '../../config';
 
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { FetchFunction } from 'relay-runtime';
 
 const { GRAPHQL_URL } = Config;

diff --git a/client/test/jestSetup.ts b/client/test/jestSetup.ts
@@ -1,8 +1,8 @@
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
 // @ts-ignore
-import mockAsyncStorage from '@react-native-community/async-storage/jest/async-storage-mock';
+import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
 
-jest.mock('@react-native-community/async-storage', () => mockAsyncStorage);
+jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
 
 const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock & typeof globalThis;