Upgrade to Expo SDK 44

.yarnrc.yml

@@ -5,6 +5,7 @@ enableGlobalCache: true
 lockfileFilename: yarn2.lock
 
 nodeLinker: node-modules
+nmMode: hardlinks-local
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

modules/authentication/server-ts/access/jwt/resolvers.js

@@ -7,15 +7,7 @@ import createTokens from './createTokens';
 
 export default () => ({
   Mutation: {
-    async refreshTokens(
-      obj,
-      { refreshToken: inputRefreshToken },
-      {
-        getIdentity,
-        getHash,
-        req: { t }
-      }
-    ) {
+    async refreshTokens(obj, { refreshToken: inputRefreshToken }, { getIdentity, getHash, req: { t } }) {
       const decodedToken = jwt.decode(inputRefreshToken);
       const isValidToken = decodedToken && decodedToken.id;
 

modules/chat/client-react/containers/Chat.jsx

@@ -11,7 +11,7 @@ import CustomView from '../components/CustomView';
 import RenderCustomActions from '../components/RenderCustomActions';
 import ModalNotify from '../components/ModalNotify';
 
-export default class extends React.Component {
+export default class Chat extends React.Component {
   static propTypes = {
     loading: PropTypes.bool.isRequired,
     t: PropTypes.func,

modules/chat/client-react/containers/withImage.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Constants from 'expo-constants';
+import Camera from 'expo-camera';
 import * as FileSystem from 'expo-file-system';
-import * as Permissions from 'expo-permissions';
-import * as ImagePicker from 'expo-image-picker';
+import { ImagePicker } from 'expo-image-picker';
 import { ReactNativeFile } from 'apollo-upload-client';
 import * as mime from 'react-native-mime-types';
 import url from 'url';
@@ -106,22 +106,17 @@ export default Component => {
       });
     };
 
-    checkPermission = async (type, skip) => {
+    checkPermission = async skip => {
       if (skip === Platform.OS) {
         return true;
       }
-      const { getAsync, askAsync } = Permissions;
-      const { status } = await getAsync(type);
-      if (status !== 'granted') {
-        const { status } = await askAsync(type);
-        return status === 'granted';
-      }
-      return true;
+      const { status } = await Camera.requestPermissionsAsync();
+      return status === 'granted';
     };
 
     pickImage = async ({ onSend }) => {
       const { t } = this.props;
-      if (await this.checkPermission(Permissions.CAMERA_ROLL, 'android')) {
+      if (await this.checkPermission('android')) {
         const { cancelled, uri } = await ImagePicker.launchImageLibraryAsync(settings.chat.image.imagePicker);
         if (!cancelled) {
           const { size } = await FileSystem.getInfoAsync(uri);

modules/chat/client-react/containers/withMessagesFormatter.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as uuidGenerator from 'uuid';
 
 export default Component => {
-  return props => {
+  function MessageFormatter(props) {
     const { messages } = props;
 
     if (messages) {
@@ -28,5 +29,9 @@ export default Component => {
     } else {
       return <Component {...props} />;
     }
+  }
+  MessageFormatter.propTypes = {
+    messages: PropTypes.object
   };
+  return MessageFormatter;
 };

modules/chat/client-react/index.native.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createStackNavigator, NavigationScreenConfigProps } from 'react-navigation';
 
 import ClientModule from '@gqlapp/module-client-react-native';
 import { translate } from '@gqlapp/i18n-client-react';
@@ -13,23 +12,19 @@ const HeaderTitleWithI18n = translate('chat')(HeaderTitle);
 export default new ClientModule({
   drawerItem: [
     {
-      Chat: {
-        screen: createStackNavigator({
-          Chat: {
-            screen: Chat,
-            navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
-              headerTitle: <HeaderTitleWithI18n style="subTitle" />,
-              headerLeft: (
-                <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
-              ),
-              headerForceInset: {}
-            })
-          }
-        }),
-        navigationOptions: {
-          drawerLabel: <HeaderTitleWithI18n />
-        }
-      }
+      screen: Drawer => (
+        <Drawer.Screen
+          name="Chat"
+          component={Chat}
+          options={({ navigation }) => ({
+            headerTitle: () => <HeaderTitleWithI18n style="subTitle" />,
+            headerLeft: () => (
+              <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
+            ),
+            drawerLabel: () => <HeaderTitleWithI18n />
+          })}
+        />
+      )
     }
   ],
   localization: [{ ns: 'chat', resources }]

modules/contact/client-react/index.native.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createStackNavigator, NavigationScreenConfigProps } from 'react-navigation';
 
 import ClientModule from '@gqlapp/module-client-react-native';
 import { translate } from '@gqlapp/i18n-client-react';
@@ -13,24 +12,20 @@ const HeaderTitleWithI18n = translate('contact')(HeaderTitle);
 export default new ClientModule({
   drawerItem: [
     {
-      Contact: {
-        screen: createStackNavigator({
-          Contact: {
-            screen: Contact,
-            navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
-              headerTitle: <HeaderTitleWithI18n i18nKey="title" style="subTitle" />,
-              headerLeft: (
-                <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
-              ),
-              headerStyle: { backgroundColor: '#fff' },
-              headerForceInset: {}
-            })
-          }
-        }),
-        navigationOptions: {
-          drawerLabel: <HeaderTitleWithI18n />
-        }
-      }
+      screen: Drawer => (
+        <Drawer.Screen
+          name="Contact"
+          component={Contact}
+          options={({ navigation }) => ({
+            headerTitle: () => <HeaderTitleWithI18n i18nKey="title" style="subTitle" />,
+            headerLeft: () => (
+              <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
+            ),
+            headerStyle: { backgroundColor: '#fff' },
+            drawerLabel: () => <HeaderTitleWithI18n />
+          })}
+        />
+      )
     }
   ],
   localization: [{ ns: 'contact', resources }]

modules/core/client-react-native/App.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LogBox } from 'react-native';
 import { ApolloProvider } from 'react-apollo';
 import { createStore, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
@@ -17,12 +18,18 @@ interface MainProps {
 }
 
 export default class Main extends React.Component<MainProps> {
+  public componentDidMount() {
+    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
+    LogBox.ignoreLogs(['Animated.event now requires']);
+  }
+
   public render() {
     const { hostname } = url.parse(__API_URL__);
     const { modules } = this.props;
+    const manifest = JSON.parse(this.props.exp.manifestString);
     const apiUrl =
-      this.props.exp.manifest.bundleUrl && hostname === 'localhost'
-        ? `${protocol}//${url.parse(this.props.exp.manifest.bundleUrl).hostname}:${port}${pathname}`
+      manifest.bundleUrl && hostname === 'localhost'
+        ? `${protocol}//${url.parse(manifest.bundleUrl).hostname}:${port}${pathname}`
         : __API_URL__;
     const store = createStore(
       Object.keys(modules.reducers).length > 0

modules/core/client-react-native/AwakeInDevApp.tsx

@@ -1,4 +1,5 @@
-import { AppLoading, registerRootComponent } from 'expo';
+import { registerRootComponent } from 'expo';
+import AppLoading from 'expo-app-loading';
 import Constants from 'expo-constants';
 import * as Font from 'expo-font';
 import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
@@ -37,7 +38,7 @@ export default async (modules: ClientModule) => {
 
     public render() {
       if (!this.state.isReady) {
-        return <AppLoading startAsync={null} onError={null} onFinish={null} />;
+        return <AppLoading />;
       }
 
       return React.createElement(

modules/counter/client-react/index.native.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
 
 import { translate } from '@gqlapp/i18n-client-react';
 import { HeaderTitle, IconButton } from '@gqlapp/look-client-react-native';
@@ -14,24 +13,20 @@ const HeaderTitleWithI18n = translate('counter')(HeaderTitle);
 export default new ClientModule(counters, {
   drawerItem: [
     {
-      Counter: {
-        screen: createStackNavigator({
-          Counter: {
-            screen: Counter,
-            navigationOptions: ({ navigation }: any) => ({
-              headerTitle: <HeaderTitleWithI18n i18nKey="title" style="subTitle" />,
-              headerLeft: (
-                <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
-              ),
-              headerStyle: { backgroundColor: '#fff' },
-              headerForceInset: {}
-            })
-          }
-        }),
-        navigationOptions: {
-          drawerLabel: <HeaderTitleWithI18n i18nKey="title" />
-        }
-      }
+      screen: Drawer => (
+        <Drawer.Screen
+          name="Counter"
+          component={Counter}
+          options={({ navigation }) => ({
+            headerTitle: () => <HeaderTitleWithI18n i18nKey="title" style="subTitle" />,
+            headerLeft: () => (
+              <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
+            ),
+            headerStyle: { backgroundColor: '#fff' },
+            drawerLabel: () => <HeaderTitleWithI18n i18nKey="title" />
+          })}
+        />
+      )
     }
   ],
   localization: [{ ns: 'counter', resources }]

modules/counter/client-react/serverCounter/containers/ServerCounter.tsx

@@ -60,19 +60,15 @@ const ServerCounter = () => {
     });
   }
 
-  const {
-    error,
-    data: { serverCounter },
-    loading
-  } = useQuery(COUNTER_QUERY);
+  const query = useQuery(COUNTER_QUERY);
 
-  if (error) {
-    throw new Error(String(error));
+  if (query.error) {
+    throw new Error(String(query.error));
   }
 
   return (
-    <ServerCounterView counter={serverCounter} loading={loading}>
-      <IncreaseButtonContainer increaseAmount={1} counter={serverCounter} />
+    <ServerCounterView counter={query?.data?.serverCounter} loading={query.loading}>
+      <IncreaseButtonContainer increaseAmount={1} counter={query?.data?.serverCounter} />
     </ServerCounterView>
   );
 };

modules/i18n/client-react/i18nModule.native.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { default as i18next } from 'i18next';
+import i18next from 'i18next';
 import { I18nextProvider } from 'react-i18next';
 
 import ClientModule from '@gqlapp/module-client-react-native';
@@ -17,18 +17,22 @@ const I18nProvider = ({ i18n, children }: any) => {
   );
 };
 
+const LanguagePickerScreen = (): any => null;
+
 const langPicker =
   settings.i18n.enabled && settings.i18n.langPickerRender
     ? new ClientModule({
         drawerItem: [
           {
-            LangPicker: {
-              screen: (): any => null,
-              navigationOptions: {
-                drawerLabel: <LanguagePicker key={'picker'} i18n={i18next} />
-              },
-              skip: true
-            }
+            screen: Drawer => (
+              <Drawer.Screen
+                name="Language Picker"
+                component={LanguagePickerScreen}
+                options={() => ({
+                  drawerLabel: () => <LanguagePicker key={'picker'} i18n={i18next} />
+                })}
+              />
+            )
           }
         ]
       })

modules/look/client-react-native/common/components/DrawerComponent.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
-import { DrawerItems } from 'react-navigation';
+import { DrawerItems } from '@react-navigation/drawer';
 
 const styles = StyleSheet.create({
   container: {

modules/look/client-react/ui-bootstrap/components/RenderCheckBox.jsx

@@ -12,7 +12,7 @@ const RenderCheckBox = ({ input, label, type, meta: { touched, error } }) => {
     <FormGroup color={color} check>
       <Label check>
         <Input {...input} placeholder={label} type={type} /> {label}
-        {touched && (error && <FormFeedback>{error}</FormFeedback>)}
+        {touched && error && <FormFeedback>{error}</FormFeedback>}
       </Label>
     </FormGroup>
   );

modules/look/client-react/ui-bootstrap/components/RenderField.jsx

@@ -17,7 +17,7 @@ const RenderField = ({ input, name, label, type, meta: { touched, error }, child
         <Input aria-labelledby={labelId} {...input} placeholder={label || placeholder} type={type} invalid={!valid}>
           {children}
         </Input>
-        {touched && (error && <FormFeedback>{error}</FormFeedback>)}
+        {touched && error && <FormFeedback>{error}</FormFeedback>}
       </div>
     </FormGroup>
   );

modules/look/client-react/ui-bootstrap/components/RenderSelect.jsx

@@ -15,7 +15,7 @@ const RenderField = ({ input, label, type, children, meta: { touched, error } })
         <Input {...input} type={type}>
           {children}
         </Input>
-        {touched && (error && <FormFeedback>{error}</FormFeedback>)}
+        {touched && error && <FormFeedback>{error}</FormFeedback>}
       </div>
     </FormGroup>
   );