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/chat/client-react/index.native.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { createStackNavigator, NavigationScreenConfigProps } from 'react-navigation';
+import { NavigationScreenConfigProps } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 
 import ClientModule from '@gqlapp/module-client-react-native';
 import { translate } from '@gqlapp/i18n-client-react';

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';
@@ -12,26 +11,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 />
-        }
-      }
-    }
+    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,17 @@ interface MainProps {
 }
 
 export default class Main extends React.Component<MainProps> {
+  public componentDidMount() {
+    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
+  }
+
   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';
@@ -13,26 +12,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" />
-        }
-      }
-    }
+    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,19 +17,21 @@ 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
-            }
-          }
+          Drawer => (
+            <Drawer.Screen
+              name="Language Picker"
+              component={LanguagePickerScreen}
+              options={() => ({
+                drawerLabel: () => <LanguagePicker key={'picker'} i18n={i18next} />
+              })}
+            />
+          )
         ]
       })
     : undefined;

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/module/client-react-native/ClientModule.ts

@@ -1,15 +1,14 @@
-import { NavigationRouteConfig } from 'react-navigation';
+import React from 'react';
 
 import BaseModule, { BaseModuleShape } from '@gqlapp/module-client-react';
-
-import { merge } from 'lodash';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 
 /**
  * React Native feature modules interface.
  */
 export interface ClientModuleShape extends BaseModuleShape {
-  // Item list for React Navigation drawer
-  drawerItem?: NavigationRouteConfig[];
+  // Screen list for React Navigation Drawer
+  drawerItem?: Array<(Drawer: ReturnType<typeof createDrawerNavigator>) => React.ReactElement<any>>;
 }
 
 interface ClientModule extends ClientModuleShape {}
@@ -29,10 +28,14 @@ class ClientModule extends BaseModule {
   }
 
   /**
-   * @returns item list for React Navigation drawer
+   * @returns screen list for React Navigation Drawer
    */
-  get drawerItems() {
-    return merge({}, ...(this.drawerItem || []));
+  public createDrawerItems(Drawer: ReturnType<typeof createDrawerNavigator>) {
+    return (this.drawerItem || [])
+      .map(x => x(Drawer))
+      .map((component: React.ReactElement<any>, idx: number, items: Array<React.ReactElement<any>>) =>
+        React.cloneElement(component, { key: component.key || idx + items.length })
+      );
   }
 }
 

modules/pagination/client-react/index.native.jsx

@@ -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';
 import ClientModule from '@gqlapp/module-client-react-native';
@@ -11,25 +10,19 @@ const HeaderTitleWithI18n = translate('pagination')(HeaderTitle);
 
 export default new ClientModule({
   drawerItem: [
-    {
-      Pagination: {
-        screen: createStackNavigator({
-          Pagination: {
-            screen: PaginationDemo,
-            navigationOptions: ({ navigation }) => ({
-              headerTitle: <HeaderTitleWithI18n style="subTitle" />,
-              headerLeft: (
-                <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
-              ),
-              headerForceInset: {}
-            })
-          }
-        }),
-        navigationOptions: {
-          drawerLabel: <HeaderTitleWithI18n />
-        }
-      }
-    }
+    Drawer => (
+      <Drawer.Screen
+        name="Pagination"
+        component={PaginationDemo}
+        options={({ navigation }) => ({
+          headerTitle: () => <HeaderTitleWithI18n style="subTitle" />,
+          headerLeft: () => (
+            <IconButton iconName="menu" iconSize={32} iconColor="#0275d8" onPress={() => navigation.openDrawer()} />
+          ),
+          drawerLabel: () => <HeaderTitleWithI18n />
+        })}
+      />
+    )
   ],
   localization: [{ ns: 'pagination', resources }]
 });

modules/payments/client-react/stripe/subscription/index.native.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 
 import { translate } from '@gqlapp/i18n-client-react';
 import { HeaderTitle, IconButton } from '@gqlapp/look-client-react-native';

modules/post/client-react/components/PostCommentsView.native.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   StyleSheet,
   FlatList,
+  ScrollView,
   Text,
   View,
   Keyboard,
@@ -95,9 +96,9 @@ class PostCommentsView extends React.PureComponent {
           comment={comment}
         />
         {comments.length > 0 && (
-          <View style={styles.list} keyboardDismissMode="on-drag">
+          <ScrollView horizontal style={styles.list} keyboardDismissMode="on-drag">
             <FlatList data={comments} keyExtractor={this.keyExtractor} renderItem={renderItem} />
-          </View>
+          </ScrollView>
         )}
       </View>
     );

modules/post/client-react/components/PostEditView.native.jsx

@@ -13,11 +13,11 @@ const onSubmit = (post, editPost) => values => {
   Keyboard.dismiss();
 };
 
-const PostEditView = ({ loading, post, navigation, subscribeToMore, editPost, t }) => {
+const PostEditView = ({ loading, post, route, subscribeToMore, editPost, t }) => {
   let postObj = post;
   // if new post was just added read it from router
-  if (!postObj && navigation.state) {
-    postObj = navigation.state.params.post;
+  if (!postObj && route.params) {
+    postObj = route.params.post;
   }
 
   if (loading && !postObj) {
@@ -28,11 +28,7 @@ const PostEditView = ({ loading, post, navigation, subscribeToMore, editPost, t
         <ScrollView keyboardDismissMode="none" keyboardShouldPersistTaps="always">
           <PostForm onSubmit={onSubmit(postObj, editPost)} post={post} />
           {postObj && (
-            <PostComments
-              postId={navigation.state.params.id}
-              comments={postObj.comments}
-              subscribeToMore={subscribeToMore}
-            />
+            <PostComments postId={route.params.id} comments={postObj.comments} subscribeToMore={subscribeToMore} />
           )}
           <KeyboardSpacer />
         </ScrollView>
@@ -45,7 +41,7 @@ PostEditView.propTypes = {
   loading: PropTypes.bool.isRequired,
   post: PropTypes.object,
   editPost: PropTypes.func.isRequired,
-  navigation: PropTypes.object.isRequired,
+  route: PropTypes.object.isRequired,
   subscribeToMore: PropTypes.func.isRequired,
   t: PropTypes.func
 };

modules/post/client-react/containers/PostEdit.jsx

@@ -95,8 +95,8 @@ export default compose(
       let id = 0;
       if (props.match) {
         id = props.match.params.id;
-      } else if (props.navigation) {
-        id = props.navigation.state.params.id;
+      } else if (props.route) {
+        id = props.route.params.id;
       }
 
       return {

modules/post/client-react/containers/PostEdit.web.jsx

@@ -66,8 +66,8 @@ export default compose(
       let id = 0;
       if (props.match) {
         id = props.match.params.id;
-      } else if (props.navigation) {
-        id = props.navigation.state.params.id;
+      } else if (props.route) {
+        id = props.route.params.id;
       }
 
       return {