feat(mobile): upgrade react-navigation

Signed-off-by: Sacha Froment <sfroment42@gmail.com>

client/react-native/android/app/build.gradle

@@ -218,6 +218,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-gesture-handler')
     compile project(':react-native-config')
     compile project(':react-native-dev-menu')
     compile project(':instabug-reactnative')

client/react-native/android/app/src/main/java/chat/berty/main/MainActivity.java

@@ -5,6 +5,9 @@
 import android.util.Log;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 import chat.berty.core.Level;
 import chat.berty.core.Logger;
@@ -34,7 +37,6 @@ public void onNewIntent(Intent intent) {
         super.onNewIntent(intent);
     }
 
-
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
@@ -74,4 +76,14 @@ protected void onDestroy() {
             this.logger.format(Level.ERROR, TAG, "on destroy: %s", err);
         }
     }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new ReactActivityDelegate(this, getMainComponentName()) {
+        @Override
+        protected ReactRootView createRootView() {
+            return new RNGestureHandlerEnabledRootView(MainActivity.this);
+        }
+    };
+  }
 }

client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
 import com.zoontek.rndevmenu.RNDevMenuPackage;
 import com.instabug.reactlibrary.RNInstabugReactnativePackage;
@@ -50,6 +51,7 @@ protected List<ReactPackage> getPackages() {
                 new CorePackage(),
                 new ImagePickerPackage(),
                 new MainReactPackage(),
+            new RNGestureHandlerPackage(),
                 new ReactNativeConfigPackage(),
                 new RNDevMenuPackage(),
                 new RNInstabugReactnativePackage.Builder(BuildConfig.INSTABUG_TOKEN,MainApplication.this)

client/react-native/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Berty'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-config'
 project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
 include ':react-native-dev-menu'

client/react-native/common/components/App.js

@@ -14,6 +14,7 @@ import { Flex, Animation, MovableView, DebugStateBar } from './Library'
 import Accounts from './Screens/Accounts'
 import Instabug from '../helpers/Instabug'
 import i18n from '../i18n'
+import NavigationService from './../helpers/NavigationService'
 
 export default class App extends PureComponent {
   state = {
@@ -144,6 +145,8 @@ export default class App extends PureComponent {
             <Accounts
               ref={nav => {
                 this.navigation = nav
+                this.navigator = nav
+                NavigationService.setTopLevelNavigator(nav)
               }}
               screenProps={{
                 deepLink,

client/react-native/common/components/Library/ContactIdentity.js

@@ -1,16 +1,16 @@
 import { View, Platform, Text as RNText } from 'react-native'
-import { createMaterialTopTabNavigator } from 'react-navigation'
+import { createMaterialTopTabNavigator, withNavigation } from 'react-navigation'
 import I18n from 'i18next'
 import React from 'react'
 
 import Text from './Text'
 import Avatar from './Avatar'
 import { contact } from '../../utils'
 import { formattedFingerprint } from '../../helpers/fingerprint'
-import { makeShareableUrl } from '../../helpers/contacts'
 import { monospaceFont, tabNavigatorOptions } from '../../constants/styling'
 import { padding } from '../../styles'
 import { tabIcon, withScreenProps } from '../../helpers/views'
+import { makeShareableUrl } from '../../helpers/contacts'
 import QRGenerator from './QRGenerator'
 import colors from '../../constants/colors'
 
@@ -94,26 +94,26 @@ const ContactIdentityTabbedContent = createMaterialTopTabNavigator(
   }
 )
 
-const ContactIdentity = ({ data = contact.default }) => (
-  <>
-    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
-      <Avatar data={data} size={78} style={{ marginTop: 0 }} />
-    </View>
-    <Text large color={colors.fakeBlack} center padding>
-      {data.displayName}
-    </Text>
-    <View
-      style={{
-        marginLeft: 15,
-        marginRight: 15,
-        marginBottom: 8,
-        height: Platform.OS === 'android' ? 350 : undefined,
-      }}
-    >
-      {<ContactIdentityTabbedContent screenProps={{ data }} />}
-    </View>
-  </>
-)
+class ContactIdentity extends React.Component {
+  static router = ContactIdentityTabbedContent.router
+
+  render () {
+    const { data = contact.default, navigation } = this.props
+
+    return (
+      <>
+      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+        <Avatar data={data} size={78} style={{ marginTop: 0 }} />
+      </View>
+      <Text large color={colors.fakeBlack} center padding>{data.displayName}</Text>
+      <View
+        style={{ marginLeft: 15, marginRight: 15, marginBottom: 8, height: Platform.OS === 'android' ? 350 : undefined }}>
+        <ContactIdentityTabbedContent navigation={navigation} screenProps={{ data }} />
+      </View>
+      </>
+    )
+  }
+}
 
-export default ContactIdentity
+export default withNavigation(ContactIdentity)
 ContactIdentity.QrCode = QrCode

client/react-native/common/components/Screens/Accounts/Current.js

@@ -16,7 +16,6 @@ import {
   updaters,
 } from '../../../graphql'
 import Main from '../Main'
-import NavigationService from '../../../helpers/NavigationService'
 
 const { CoreModule } = NativeModules
 
@@ -26,6 +25,8 @@ class Current extends PureComponent {
     context: null,
   }
 
+  static router = Main.router
+
   getIp = async () => {
     if (Platform.OS === 'web') {
       return window.location.hostname
@@ -70,14 +71,18 @@ class Current extends PureComponent {
 
   openDeepLink = () => {
     const {
-      screenProps: { deepLink, clearDeepLink },
+      screenProps: {
+        deepLink,
+        clearDeepLink,
+      },
+      navigation,
     } = this.props
 
     if (!deepLink) {
       return
     }
 
-    this.mainNav.dispatch(NavigationActions.navigate(deepLink))
+    navigation.dispatch(NavigationActions.navigate(deepLink))
     clearDeepLink()
   }
 
@@ -126,23 +131,20 @@ class Current extends PureComponent {
   }
 
   render () {
-    const { t } = this.props
+    const { t, navigation } = this.props
     const { loading, context, availableUpdate } = this.state
     if (loading) {
       return <Loader message={t('setting-up')} />
     }
     return (
       <RelayContext.Provider value={context}>
         <Main
-          ref={nav => {
-            this.mainNav = nav
-            NavigationService.setTopLevelNavigator(nav)
-          }}
+          navigation={navigation}
           screenProps={{
             ...this.props.screenProps,
             context,
             availableUpdate,
-            firstLaunch: this.props.navigation.getParam('firstLaunch', false),
+            firstLaunch: navigation.getParam('firstLaunch', false),
           }}
           onNavigationStateChange={(prevState, currentState) => {
             const currentRoute = this.getActiveRouteName(currentState)

client/react-native/common/components/Screens/Accounts/index.js

@@ -1,14 +1,16 @@
-import { createSwitchNavigator } from 'react-navigation'
+import { createSwitchNavigator, createAppContainer } from 'react-navigation'
 import Auth from './Auth'
 import Current from './Current'
 
-export default createSwitchNavigator(
-  {
-    'accounts/auth': Auth,
-    'accounts/current': Current,
-  },
-  {
-    initialRouteName: 'accounts/auth',
-    headerMode: 'none',
-  }
+export default createAppContainer(
+  createSwitchNavigator(
+    {
+      'accounts/auth': Auth,
+      'accounts/current': Current,
+    },
+    {
+      initialRouteName: 'accounts/auth',
+      headerMode: 'none',
+    }
+  )
 )

client/react-native/common/components/Screens/Chats/List.js

@@ -149,6 +149,7 @@ class ListScreen extends PureComponent {
     super(props)
 
     if (Platform.OS !== 'web' && __DEV__) {
+      console.log('__DEV__', Platform.OS)
       const DevMenu = require('react-native-dev-menu')
       DevMenu.addItem('Dev tools', () =>
         this.props.navigation.navigate('settings/devtools')

client/react-native/common/components/Screens/Contacts/Add/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { createMaterialTopTabNavigator } from 'react-navigation'
+import { createMaterialTopTabNavigator, withNavigation } from 'react-navigation'
 import ByQRCode from './ByQRCode'
 import ByPublicKey from './ByPublicKey'
 import Invite from './Invite'
@@ -45,8 +45,17 @@ const AddContactTabbedContent = createMaterialTopTabNavigator(
   },
 )
 
-const AddScreen = () => <View style={{ flex: 1 }}>
-  <AddContactTabbedContent />
-</View>
+class AddScreen extends React.Component {
+  static router = AddContactTabbedContent.router
 
-export default AddScreen
+  render () {
+    const { navigation } = this.props
+    return (
+      <View style={{ flex: 1 }}>
+        <AddContactTabbedContent navigation={navigation} />
+      </View>
+    )
+  }
+}
+
+export default withNavigation(AddScreen)

client/react-native/common/components/Screens/Contacts/ContactCardModal.js

@@ -12,52 +12,58 @@ import { merge } from '../../../helpers'
 
 const modalWidth = 320
 
-const ContactCardModal = ({ navigation }) => {
-  const data = {
-    id: navigation.getParam('id'),
-    displayName: navigation.getParam('displayName'),
-  }
-  return (
-    <RelayContext.Consumer>
-      {context => (
-        <QueryReducer
-          query={context.queries.Contact.graphql}
-          variables={merge([
-            context.queries.Contact.defaultVariables,
-            { filter: { id: data.id } },
-          ])}
-        >
-          {state =>
-            console.log(state) || (
-              <View
-                style={{
-                  flex: 1,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <ModalScreen
-                  showDismiss
-                  width={modalWidth}
-                  loading={state.type === state.loading}
-                  footer={
-                    <ContactIdentityActions
+class ContactCardModal extends React.Component {
+  static router = ContactIdentity.router
+
+  render () {
+    const { navigation } = this.props
+    const data = {
+      id: navigation.getParam('id'),
+      displayName: navigation.getParam('displayName'),
+    }
+
+    return (
+      <RelayContext.Consumer>
+        {context => (
+          <QueryReducer
+            query={context.queries.Contact.graphql}
+            variables={merge([
+              context.queries.Contact.defaultVariables,
+              { filter: { id: data.id } },
+            ])}
+          >
+            {state =>
+              console.log(state) || (
+                <View
+                  style={{
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <ModalScreen
+                    showDismiss
+                    width={modalWidth}
+                    loading={state.type === state.loading}
+                    footer={
+                      <ContactIdentityActions
+                        data={(state && state.data && state.data.Contact) || data}
+                        modalWidth={modalWidth}
+                      />
+                    }
+                  >
+                    <ContactIdentity
                       data={(state && state.data && state.data.Contact) || data}
-                      modalWidth={modalWidth}
                     />
-                  }
-                >
-                  <ContactIdentity
-                    data={(state && state.data && state.data.Contact) || data}
-                  />
-                </ModalScreen>
-              </View>
-            )
-          }
-        </QueryReducer>
-      )}
-    </RelayContext.Consumer>
-  )
+                  </ModalScreen>
+                </View>
+              )
+            }
+          </QueryReducer>
+        )}
+      </RelayContext.Consumer>
+    )
+  }
 }
 
 export default withNavigation(ContactCardModal)

client/react-native/common/components/Screens/Contacts/List/index.js

@@ -70,7 +70,7 @@ export default class ContactList extends PureComponent {
 
   render = () => {
     const { navigation } = this.props
-
+    console.log(this.props)
     return (
       <Screen style={{ backgroundColor: colors.white }}>
         <ContactsHome