Migrate client to expo sdk 43

client/app.config.ts

@@ -2,7 +2,7 @@ import 'dotenv/config';
 
 import {version} from './package.json';
 
-const androidVersionCode = 30;
+const androidVersionCode = 31;
 
 export default {
   expo: {

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hackatalk",
   "private": true,
-  "version": "1.11.0",
+  "version": "1.12.0",
   "main": "node_modules/expo/AppEntry.js",
   "description": "Opensource chat app",
   "author": "dooboolab",
@@ -32,62 +32,62 @@
   },
   "dependencies": {
     "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@expo/match-media": "^0.1.0",
-    "@expo/react-native-action-sheet": "^3.11.0",
+    "@expo/react-native-action-sheet": "^3.12.0",
     "@expo/vector-icons": "^12.0.0",
     "@react-native-async-storage/async-storage": "~1.15.0",
-    "@react-native-masked-view/masked-view": "0.2.4",
-    "@react-navigation/bottom-tabs": "^6.0.7",
-    "@react-navigation/core": "^6.0.2",
-    "@react-navigation/material-top-tabs": "^6.0.4",
-    "@react-navigation/native": "^6.0.4",
-    "@react-navigation/stack": "^6.0.9",
+    "@react-native-masked-view/masked-view": "0.2.5",
+    "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-navigation/core": "^6.1.0",
+    "@react-navigation/material-top-tabs": "^6.0.6",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/stack": "^6.0.11",
     "apollo-upload-client": "^16.0.0",
-    "dooboo-ui": "^0.1.34",
-    "expo": "^42.0.4",
-    "expo-ads-admob": "~10.1.2",
-    "expo-app-loading": "^1.1.2",
-    "expo-apple-authentication": "~3.2.1",
-    "expo-asset": "~8.3.3",
-    "expo-auth-session": "~3.3.1",
-    "expo-av": "~9.2.3",
-    "expo-constants": "~11.0.1",
-    "expo-crypto": "~9.2.0",
-    "expo-device": "~3.3.0",
-    "expo-image-manipulator": "~9.2.2",
-    "expo-image-picker": "~10.2.2",
-    "expo-linear-gradient": "~9.2.0",
-    "expo-localization": "~10.2.0",
-    "expo-notifications": "~0.12.3",
-    "expo-random": "~11.2.0",
-    "expo-screen-orientation": "~3.2.1",
-    "expo-splash-screen": "^0.13.1",
-    "expo-updates": "~0.8.2",
-    "expo-video-thumbnails": "^5.2.1",
-    "expo-web-browser": "~9.2.0",
+    "dooboo-ui": "^0.1.43",
+    "expo": "^43.0.0",
+    "expo-ads-admob": "~11.0.3",
+    "expo-app-loading": "~1.2.1",
+    "expo-apple-authentication": "~4.0.3",
+    "expo-asset": "~8.4.3",
+    "expo-auth-session": "~3.4.2",
+    "expo-av": "~10.1.2",
+    "expo-constants": "~12.1.3",
+    "expo-crypto": "~10.0.3",
+    "expo-device": "~4.0.3",
+    "expo-image-manipulator": "~10.1.2",
+    "expo-image-picker": "~11.0.3",
+    "expo-linear-gradient": "~10.0.3",
+    "expo-localization": "~11.0.0",
+    "expo-notifications": "~0.13.3",
+    "expo-random": "~12.0.0",
+    "expo-screen-orientation": "~4.0.3",
+    "expo-splash-screen": "~0.13.4",
+    "expo-updates": "~0.10.5",
+    "expo-video-thumbnails": "~6.0.3",
+    "expo-web-browser": "~10.0.3",
     "graphql": "^15.6.1",
     "i18n-js": "^3.8.0",
     "immer": "^9.0.6",
     "mime": "^2.5.2",
     "moment": "^2.29.1",
-    "nanoid": "^3.1.29",
-    "react": "^17.0.2",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "nanoid": "^3.1.30",
+    "react": "17.0.1",
+    "react-native": "0.64.2",
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-get-random-values": "~1.7.0",
     "react-native-modalbox": "^2.0.2",
-    "react-native-pager-view": "5.0.12",
+    "react-native-pager-view": "5.4.6",
     "react-native-parsed-text": "^0.0.22",
     "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "3.2.0",
+    "react-native-safe-area-context": "3.3.2",
     "react-native-scalable-image": "^1.1.0",
-    "react-native-screens": "~3.4.0",
+    "react-native-screens": "~3.8.0",
     "react-native-svg": "12.1.1",
     "react-native-tab-view": "^3.1.1",
-    "react-native-web": "^0.17.5",
-    "react-native-webview": "11.6.2",
+    "react-native-web": "0.17.1",
+    "react-native-webview": "11.13.0",
     "react-navigation-stack": "^2.10.4",
     "react-relay": "^12.0.0",
     "react-responsive": "^8.2.0",
@@ -97,67 +97,67 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
-    "@babel/core": "~7.15.8",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-decorators": "7.15.8",
     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@babel/runtime": "^7.15.4",
-    "@dooboo/eslint-config": "^0.9.0",
+    "@dooboo/eslint-config": "^1.1.1",
     "@emotion/babel-plugin": "^11.3.0",
-    "@expo/metro-config": "^0.2.2",
-    "@expo/webpack-config": "~0.16.2",
-    "@graphql-codegen/cli": "^2.2.0",
-    "@graphql-codegen/typescript": "^2.2.2",
-    "@graphql-codegen/typescript-document-nodes": "^2.1.4",
+    "@expo/metro-config": "^0.2.6",
+    "@expo/webpack-config": "^0.16.2",
+    "@graphql-codegen/cli": "^2.2.1",
+    "@graphql-codegen/typescript": "^2.2.4",
+    "@graphql-codegen/typescript-document-nodes": "^2.1.6",
     "@graphql-codegen/typescript-graphql-files-modules": "^2.1.0",
-    "@graphql-codegen/typescript-operations": "^2.1.6",
-    "@graphql-codegen/typescript-react-apollo": "^3.1.4",
+    "@graphql-codegen/typescript-operations": "^2.1.8",
+    "@graphql-codegen/typescript-react-apollo": "^3.1.6",
     "@graphql-tools/relay-operation-optimizer": "6.4.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/react-native": "^8.0.0-rc.0",
+    "@testing-library/react-native": "^8.0.0",
     "@types/apollo-upload-client": "^14.1.0",
     "@types/expo": "^33.0.1",
     "@types/i18n-js": "^3.8.2",
     "@types/jest": "^27.0.2",
     "@types/mime": "^2.0.3",
-    "@types/react": "~17.0.27",
-    "@types/react-native": "~0.65.5",
-    "@types/react-native-modalbox": "^1.4.9",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
+    "@types/react-native-modalbox": "^1.4.10",
     "@types/react-relay": "^11.0.2",
     "@types/react-responsive": "^8.0.4",
     "@types/react-test-renderer": "^17.0",
     "@types/relay-test-utils": "^6.0.5",
     "abort-controller": "^3.0.0",
     "babel-plugin-inline-dotenv": "^1.6.0",
     "babel-plugin-relay": "^12.0.0",
-    "babel-preset-expo": "8.4.1",
+    "babel-preset-expo": "8.5.1",
     "codecov": "^3.8.3",
     "eslint": "^7.32.0",
     "eslint-plugin-i18n-json": "^3.1.0",
     "get-graphql-schema": "^2.1.2",
     "import-sort-style-eslint": "^6.0.0",
-    "jest": "^27.2.4",
-    "jest-expo": "^42.1.0",
+    "jest": "^27.3.1",
+    "jest-expo": "^43.0.0",
     "jest-fetch-mock": "^3.0.3",
     "jetifier": "^2.0.0",
     "mockdate": "^3.0.5",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react-dom": "16.13.1",
+    "react-dom": "17.0.1",
     "react-native-svg-transformer": "^0.14.3",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^17.0.2",
     "relay-compiler": "^12.0.0",
     "relay-compiler-language-typescript": "^14.2.1",
     "relay-config": "^12.0.0",
     "relay-test-utils": "^12.0.0",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3"
+    "ts-jest": "^27.0.7",
+    "typescript": "~4.3.5"
   },
   "importSort": {
     ".js, .jsx": {

client/src/components/pages/ProfileUpdate.tsx

@@ -212,7 +212,7 @@ const Screen: FC = () => {
         options,
         cancelButtonIndex: BUTTON_INDEX_CANCEL,
       },
-      async (buttonIndex: number) => {
+      async (buttonIndex?: number) => {
         if (buttonIndex === BUTTON_INDEX_LAUNCH_CAMERA) {
           const image = await launchCameraAsync();
 

client/src/components/pages/SignUp.tsx

@@ -105,7 +105,7 @@ const Page: FC = () => {
         options,
         cancelButtonIndex: BUTTON_INDEX_CANCEL,
       },
-      async (buttonIndex: number) => {
+      async (buttonIndex?: number) => {
         if (buttonIndex === BUTTON_INDEX_LAUNCH_CAMERA) {
           const image = await launchCameraAsync();
 

client/src/components/pages/__tests__/__snapshots__/BlockedUser.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`Rendering renders without crashing 1`] = `
         </Shared>
       }
       ListFooterComponent={
-        <Component
+        <View
           style={
             Object {
               "height": 60,

client/src/components/pages/__tests__/__snapshots__/MainChannel.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`[Channel] screen renders without crashing 1`] = `
         </Shared>
       }
       ListFooterComponent={
-        <Component
+        <View
           style={
             Object {
               "height": 60,

client/src/components/pages/__tests__/__snapshots__/Message.test.tsx.snap

@@ -67,7 +67,7 @@ exports[`[Message] rendering test renders as expected 1`] = `
           </Shared>
         }
         ListHeaderComponent={
-          <Component
+          <View
             style={
               Object {
                 "height": 28,
@@ -749,7 +749,7 @@ fragment ProfileModal_user on User {
                   style={
                     Array [
                       Object {
-                        "color": "#414141",
+                        "color": "#C4C4C4",
                         "fontSize": 12,
                         "marginRight": 20,
                         "marginTop": 4,

client/src/components/uis/__tests__/VideoPlayer.test.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {fireEvent, render, waitFor} from '@testing-library/react-native';
 
 import VideoPlayer from '../VideoPlayer';
+import {createTestElement} from '../../../../test/testUtils';
 import {getString} from '../../../../STRINGS';
 
 const props = {
@@ -14,7 +15,7 @@ const props = {
 
 describe('[VideoPlayer] render', () => {
   it('render without crashing', async () => {
-    const screen = render(<VideoPlayer {...props} />);
+    const screen = render(createTestElement(<VideoPlayer {...props} />));
     const json = screen.toJSON();
 
     await waitFor(() => {
@@ -25,15 +26,18 @@ describe('[VideoPlayer] render', () => {
 
   it('should display thumbnail error when uri was not provided', async () => {
     const newProps = {...props, uri: undefined};
-    const {getByText} = render(<VideoPlayer {...newProps} />);
+
+    const {getByText} = render(
+      createTestElement(<VideoPlayer {...newProps} />),
+    );
 
     await waitFor(() => {
       expect(getByText(getString('THUMBNAIL_ERROR'))).toBeTruthy();
     });
   });
 
   it('should call onPlaybackStatusUpdate when loadAsync Resolved', async () => {
-    const screen = render(<VideoPlayer {...props} />);
+    const screen = render(createTestElement(<VideoPlayer {...props} />));
 
     await waitFor(async () => {
       const button = screen.getByText(
@@ -42,13 +46,18 @@ describe('[VideoPlayer] render', () => {
       fireEvent.press(button);
     });
 
-    expect(screen.toJSON().children[0]).toBe('Video isLoaded? : true');
+    // @ts-ignore
+    expect(screen.toJSON().children[0].children[0]).toBe(
+      'Video isLoaded? : true',
+    );
   });
 
   it('should call onError when loadAsync rejected', async () => {
     const newProps = {...props, uri: undefined};
 
-    const {getByText} = render(<VideoPlayer {...newProps} />);
+    const {getByText} = render(
+      createTestElement(<VideoPlayer {...newProps} />),
+    );
 
     await waitFor(() => {
       const button = getByText(
@@ -67,7 +76,7 @@ describe('[VideoPlayer] web render', () => {
       return {OS: 'web'};
     });
 
-    const {queryByText} = render(<VideoPlayer {...props} />);
+    const {queryByText} = render(createTestElement(<VideoPlayer {...props} />));
 
     expect(
       queryByText(getString('MEDIA_LOAD', {media: getString('VIDEO')})),

client/src/components/uis/__tests__/__snapshots__/GiftedChat.test.tsx.snap

@@ -35,9 +35,9 @@ exports[`[GiftedChatInput] render renders without crashing 1`] = `
     }
   >
     <RCTScrollView
-      ListEmptyComponent={<Component />}
+      ListEmptyComponent={<View />}
       ListHeaderComponent={
-        <Component
+        <View
           style={
             Object {
               "height": 28,