Migrate expo SDK 45

client/app.config.ts

@@ -4,7 +4,7 @@ import {ConfigContext, ExpoConfig} from '@expo/config';
 
 import {version} from './package.json';
 
-const androidVersionCode = 35;
+const androidVersionCode = 40;
 
 export default ({config}: ConfigContext): ExpoConfig => ({
   ...config,

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hackatalk",
   "private": true,
-  "version": "1.15.0",
+  "version": "2.0.1",
   "main": "node_modules/expo/AppEntry.js",
   "description": "Opensource chat app",
   "author": "dooboolab",
@@ -31,136 +31,137 @@
     "deploy-hosting": "npm run predeploy && firebase deploy --only hosting"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.10",
+    "@apollo/client": "^3.6.2",
     "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.8.2",
+    "@emotion/react": "^11.9.0",
     "@expo/match-media": "^0.3.0",
     "@expo/react-native-action-sheet": "^3.13.0",
-    "@expo/vector-icons": "^12.0.5",
-    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@expo/vector-icons": "^13.0.0",
+    "@react-native-async-storage/async-storage": "~1.17.4",
     "@react-native-masked-view/masked-view": "0.2.6",
-    "@react-navigation/bottom-tabs": "^6.2.0",
-    "@react-navigation/core": "^6.1.1",
-    "@react-navigation/material-top-tabs": "^6.1.1",
-    "@react-navigation/native": "^6.0.8",
-    "@react-navigation/stack": "^6.1.1",
+    "@react-navigation/bottom-tabs": "^6.3.1",
+    "@react-navigation/core": "^6.2.1",
+    "@react-navigation/material-top-tabs": "^6.2.1",
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/stack": "^6.2.1",
     "apollo-upload-client": "^17.0.0",
-    "dooboo-ui": "^0.1.62",
-    "expo": "^44.0.6",
-    "expo-ads-admob": "~12.0.0",
-    "expo-app-loading": "~1.3.0",
-    "expo-apple-authentication": "~4.1.0",
-    "expo-asset": "~8.4.6",
-    "expo-auth-session": "~3.5.0",
-    "expo-av": "~10.2.0",
-    "expo-constants": "~13.0.1",
-    "expo-crypto": "~10.1.1",
-    "expo-device": "~4.1.0",
-    "expo-image-manipulator": "~10.2.0",
-    "expo-image-picker": "~12.0.1",
-    "expo-linear-gradient": "~11.0.3",
-    "expo-localization": "~12.0.0",
-    "expo-notifications": "~0.14.0",
-    "expo-random": "~12.1.1",
-    "expo-screen-orientation": "~4.1.1",
-    "expo-splash-screen": "~0.14.1",
-    "expo-updates": "~0.11.6",
-    "expo-video-thumbnails": "~6.1.0",
-    "expo-web-browser": "~10.1.0",
-    "graphql": "^16.3.0",
-    "i18n-js": "^3.8.0",
-    "immer": "^9.0.12",
+    "dooboo-ui": "^0.1.65",
+    "expo": "^45.0.4",
+    "expo-ads-admob": "~13.0.0",
+    "expo-app-loading": "~2.0.0",
+    "expo-apple-authentication": "~4.2.1",
+    "expo-asset": "~8.5.0",
+    "expo-auth-session": "~3.6.1",
+    "expo-av": "~11.2.3",
+    "expo-constants": "~13.1.1",
+    "expo-crypto": "~10.2.0",
+    "expo-device": "~4.2.0",
+    "expo-image-manipulator": "~10.3.1",
+    "expo-image-picker": "~13.1.1",
+    "expo-linear-gradient": "~11.3.0",
+    "expo-localization": "~13.0.0",
+    "expo-notifications": "~0.15.2",
+    "expo-random": "~12.2.0",
+    "expo-screen-orientation": "~4.2.0",
+    "expo-splash-screen": "~0.15.1",
+    "expo-updates": "~0.13.1",
+    "expo-video-thumbnails": "~6.3.0",
+    "expo-web-browser": "~10.2.0",
+    "graphql": "^16.5.0",
+    "i18n-js": "^3.9.2",
+    "immer": "^9.0.14",
     "mime": "^3.0.0",
-    "moment": "^2.29.2",
-    "nanoid": "^3.3.2",
+    "moment": "^2.29.3",
+    "nanoid": "^3.3.4",
     "react": "17.0.2",
-    "react-native": "0.64.3",
-    "react-native-appearance": "~0.3.4",
-    "react-native-error-boundary": "^1.1.12",
-    "react-native-gesture-handler": "~2.1.0",
-    "react-native-get-random-values": "~1.7.2",
+    "react-native": "0.68.2",
+    "react-native-error-boundary": "^1.1.13",
+    "react-native-gesture-handler": "~2.2.1",
+    "react-native-get-random-values": "~1.8.0",
     "react-native-modalbox": "^2.0.2",
-    "react-native-pager-view": "5.4.9",
+    "react-native-pager-view": "5.4.15",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-reanimated": "~2.3.1",
-    "react-native-safe-area-context": "3.3.2",
+    "react-native-reanimated": "~2.8.0",
+    "react-native-safe-area-context": "4.2.4",
     "react-native-scalable-image": "^1.1.0",
-    "react-native-screens": "~3.10.1",
-    "react-native-svg": "12.1.1",
+    "react-native-screens": "~3.11.1",
+    "react-native-svg": "12.3.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-web": "0.17.7",
-    "react-native-webview": "11.15.0",
+    "react-native-webview": "11.18.1",
     "react-navigation-stack": "^2.10.4",
     "react-relay": "^13.2.0",
     "react-responsive": "^8.2.0",
     "relay-runtime": "^13.2.0",
-    "sentry-expo": "^4.1.0",
+    "sentry-expo": "^4.1.1",
     "subscriptions-transport-ws": "^0.11.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.8",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "7.17.8",
+    "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
     "@babel/plugin-transform-block-scoping": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/plugin-transform-runtime": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.8",
+    "@babel/runtime": "^7.17.9",
     "@dooboo/eslint-config": "^1.3.4",
-    "@emotion/babel-plugin": "^11.7.2",
-    "@expo/metro-config": "^0.3.12",
-    "@expo/webpack-config": "~0.16.19",
+    "@emotion/babel-plugin": "^11.9.2",
+    "@expo/metro-config": "^0.3.16",
+    "@expo/webpack-config": "~0.16.23",
     "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/typescript": "^2.4.8",
-    "@graphql-codegen/typescript-document-nodes": "^2.2.8",
+    "@graphql-codegen/typescript": "^2.4.11",
+    "@graphql-codegen/typescript-document-nodes": "^2.2.11",
     "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
-    "@graphql-codegen/typescript-operations": "^2.3.5",
-    "@graphql-codegen/typescript-react-apollo": "^3.2.11",
-    "@graphql-tools/relay-operation-optimizer": "6.4.5",
-    "@svgr/webpack": "^5",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@graphql-codegen/typescript-operations": "^2.4.0",
+    "@graphql-codegen/typescript-react-apollo": "^3.2.14",
+    "@graphql-tools/relay-operation-optimizer": "6.4.10",
+    "@svgr/webpack": "^6",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^9.1.0",
     "@types/apollo-upload-client": "^17.0.0",
     "@types/expo": "^33.0.1",
     "@types/i18n-js": "^3.8.2",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^27.5.1",
     "@types/mime": "^2.0.3",
-    "@types/react": "~17.0.43",
-    "@types/react-native": "~0.67.3",
+    "@types/react": "17.0.40",
+    "@types/react-native": "~0.67.7",
     "@types/react-native-modalbox": "^1.4.10",
     "@types/react-relay": "^13.0.2",
     "@types/react-responsive": "^8.0.5",
-    "@types/react-test-renderer": "^17.0",
+    "@types/react-test-renderer": "^17",
     "@types/relay-test-utils": "^6.0.5",
     "abort-controller": "^3.0.0",
-    "babel-plugin-inline-dotenv": "^1.6.0",
+    "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-relay": "^13.2.0",
-    "babel-preset-expo": "9.0.2",
+    "babel-preset-expo": "~9.1.0",
     "codecov": "^3.8.3",
-    "eslint": "^8.12.0",
+    "eslint": "^8.15.0",
     "eslint-plugin-i18n-json": "^3.1.0",
     "get-graphql-schema": "^2.1.2",
     "import-sort-style-eslint": "^6.0.0",
-    "jest": "^27.5.1",
-    "jest-expo": "44.0.0",
+    "jest": "^26.6.3",
+    "jest-expo": "^45.0.1",
     "jest-fetch-mock": "^3.0.3",
     "jetifier": "^2.0.0",
+    "metro-babel-register": "^0.70.3",
     "mockdate": "^3.0.5",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react-dom": "17.0.2",
+    "react-dom": "^17.0.2",
     "react-native-svg-transformer": "^1.0.0",
-    "react-test-renderer": "17",
+    "react-test-renderer": "17.0.2",
     "relay-compiler": "^13.2.0",
     "relay-compiler-language-typescript": "^15.0.1",
     "relay-config": "^12.0.1",
     "relay-test-utils": "^13.2.0",
-    "ts-jest": "^27.1.4",
-    "typescript": "~4.6.3"
+    "ts-jest": "^28.0.2",
+    "typescript": "~4.6.4"
   },
   "importSort": {
     ".js, .jsx": {
@@ -174,6 +175,8 @@
     }
   },
   "resolutions": {
-    "react-native/@jest/create-cache-key-function": "^27.0.2"
+    "react-native/@jest/create-cache-key-function": "^27.0.2",
+    "@types/react": "17.0.40",
+    "@types/react-native": "^0.67.6"
   }
 }

client/src/App.tsx

@@ -8,7 +8,6 @@ import {dark, light} from './theme';
 import {ActionSheetProvider} from '@expo/react-native-action-sheet';
 import {Alert} from 'react-native';
 import AppLoading from 'expo-app-loading';
-import {AppearanceProvider} from 'react-native-appearance';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {AuthProvider} from './providers/AuthProvider';
 import ComponentWrapper from './utils/ComponentWrapper';
@@ -110,7 +109,6 @@ const WrappedApp = new ComponentWrapper(RootNavigator)
   .wrap(DeviceProvider, {})
   .wrap(SnackbarProvider, {})
   .wrap(HackatalkThemeProvider, {})
-  .wrap(AppearanceProvider, {})
   .build();
 
 export default gestureHandlerRootHOC(WrappedApp);

client/src/components/navigations/MainStackNavigator/LeaveChannelModal.tsx

@@ -107,7 +107,7 @@ const ChannelModalContent: FC<ModalContentProps> = ({
   useEffect(() => {
     if (openSnackbar && showLeaveChannelMessage) {
       openSnackbar({
-        text: getString('LEAVE_CHANNEL_DONE'),
+        content: {text: getString('LEAVE_CHANNEL_DONE')},
         type: 'success',
         testID: 'profile-snackbar',
         zIndex: 99,

client/src/components/navigations/MainStackNavigator/ProfileModal.tsx

@@ -314,7 +314,7 @@ const ModalContent: FC<ModalContentProps> = ({modalState, hideModal}) => {
   useEffect(() => {
     if (openSnackbar && showFriendAddedMessage) {
       openSnackbar({
-        text: getString('FRIEND_ADDED'),
+        content: {text: getString('FRIEND_ADDED')},
         type: 'success',
         testID: 'profile-snackbar',
         zIndex: 101,