fix: react-navigation for web

Signed-off-by: Sacha Froment <sfroment42@gmail.com>
berty · Feb 28, 2019 · 9455deb · 9455deb
1 parent cfb81e2
commit 9455deb
Show file tree

Hide file tree

Showing 10 changed files with 2,228 additions and 1,792 deletions.
diff --git a/client/react-native/common/components/Library/QRGenerator.js b/client/react-native/common/components/Library/QRGenerator.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import QRCode from 'react-native-qrcode-svg'
 import { View } from 'react-native'
 
+// eslint-disable-next-line
 export default ({ value, ecl = 'L', size, style }) => <>
   <View style={[{ width: size, height: size }, ...(style || [])]}>
     <QRCode size={size} value={value} ecl={ecl} />

diff --git a/client/react-native/common/components/Screens/Accounts/Current.js b/client/react-native/common/components/Screens/Accounts/Current.js
@@ -64,7 +64,7 @@ class Current extends PureComponent {
   }
 
   async componentDidUpdate (nextProps) {
-    if (nextProps.screenProps.deepLink !== this.props.screenProps.deepLink) {
+    if (nextProps.screenProps !== 'undefined' && nextProps.screenProps.deepLink !== this.props.screenProps.deepLink) {
       this.openDeepLink()
     }
   }
@@ -78,7 +78,7 @@ class Current extends PureComponent {
       navigation,
     } = this.props
 
-    if (!deepLink) {
+    if (!deepLink || deepLink === 'undefined' || Platform.OS === 'web') {
       return
     }
 

diff --git a/client/react-native/common/components/Screens/Accounts/index.web.js b/client/react-native/common/components/Screens/Accounts/index.web.js
@@ -0,0 +1,14 @@
+import { createSwitchNavigator } 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',
+  }
+)
diff --git a/client/react-native/common/components/Screens/Main.js b/client/react-native/common/components/Screens/Main.js
@@ -35,6 +35,22 @@ const TabBarIcon = (tintColor, routeName, badgeValue) => {
   )
 }
 
+const handleBothNavigationsOptions = ({ navigation, screenProps }) => {
+  let badge = null
+
+  if (
+    navigation.state.routeName === 'settings' &&
+    screenProps.availableUpdate
+  ) {
+    badge = '!'
+  }
+
+  return {
+    tabBarIcon: ({ tintColor }) =>
+      TabBarIcon(tintColor, navigation.state.routeName, badge),
+  }
+}
+
 export const tabs = createBottomTabNavigator(
   {
     contacts: {
@@ -60,21 +76,8 @@ export const tabs = createBottomTabNavigator(
     initialRouteName: 'chats',
     swipeEnabled: false,
     animationEnabled: true,
-    defaultNavigationOptions: ({ navigation, screenProps }) => {
-      let badge = null
-
-      if (
-        navigation.state.routeName === 'settings' &&
-        screenProps.availableUpdate
-      ) {
-        badge = '!'
-      }
-
-      return {
-        tabBarIcon: ({ tintColor }) =>
-          TabBarIcon(tintColor, navigation.state.routeName, badge),
-      }
-    },
+    navigationOptions: handleBothNavigationsOptions,
+    defaultNavigationOptions: handleBothNavigationsOptions,
     tabBarOptions: {
       showIcon: true,
       showLabel: true,

diff --git a/client/react-native/common/components/Screens/Settings/index.js b/client/react-native/common/components/Screens/Settings/index.js
@@ -11,6 +11,13 @@ import Devtools from './Devtools'
 import Update from './Update'
 import I18n from 'i18next'
 
+const handleBothNavigationsOptions = ({ navigation }) => ({
+  header: (
+    <Header navigation={navigation} title={I18n.t('settings.title')} titleIcon='settings' />
+  ),
+  tabBarVisible: false,
+})
+
 export default createSubStackNavigator(
   {
     'settings/list': List,
@@ -24,11 +31,7 @@ export default createSubStackNavigator(
   },
   {
     initialRouteName: 'settings/list',
-    navigationOptions: ({ navigation }) => ({
-      header: (
-        <Header navigation={navigation} title={I18n.t('settings.title')} titleIcon='settings' />
-      ),
-      tabBarVisible: false,
-    }),
+    defaultNavigationOptions: handleBothNavigationsOptions,
+    navigationOptions: handleBothNavigationsOptions,
   }
 )
diff --git a/client/react-native/package.json b/client/react-native/package.json
@@ -23,6 +23,7 @@
     "eslint-plugin-dependencies": "^2.4.0",
     "graphql": "^14.0.2",
     "graphql-relay": "^0.5.5",
+    "hoist-non-react-statics": "^3.3.0",
     "i18next": "^13.0.0",
     "instabug-reactnative": "^8.0.23",
     "isomorphic-fetch": "^2.2.1",
@@ -40,7 +41,7 @@
     "react-native-device-info": "^0.24.3",
     "react-native-exception-handler": "^2.10.2",
     "react-native-flash-message": "^0.1.10",
-    "react-native-gesture-handler": "^1.0.15",
+    "react-native-gesture-handler": "git+https://github.com/jaulz/react-native-gesture-handler.git#fix/web-compatibility",
     "react-native-image-picker": "^0.27.1",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-languages": "^3.0.1",
@@ -52,7 +53,7 @@
     "react-native-svg": "^8.0.8",
     "react-native-vector-icons": "^6.0.1",
     "react-native-view-shot": "^2.5.0",
-    "react-navigation": "^3.1.4",
+    "react-navigation": "^3.1.5",
     "react-relay": "^1.6.2",
     "react-relay-network-modern": "^2.5.1",
     "relay-compiler": "^1.6.2",

diff --git a/client/react-native/web/config/webpack.config.dev.js b/client/react-native/web/config/webpack.config.dev.js
@@ -132,6 +132,7 @@ module.exports = {
     // for React Native Web.
     extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
+      'react-native': 'react-native-web',
       'react-native-svg': 'react-native-svg-web',
       'react-dom/unstable-native-dependencies': path.resolve(
         paths.appPath,
@@ -241,6 +242,8 @@ module.exports = {
             include: [
               /node_modules\/react-native.*/,
               /node_modules\/react-navigation/,
+              /node_modules\/@react-navigation\/native/,
+              /node_modules\/@react-navigation\/core/,
               /node_modules\/cavy/,
             ],
             loader: require.resolve('babel-loader'),
@@ -381,9 +384,6 @@ module.exports = {
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
     new webpack.DefinePlugin(env.stringified),
-    new webpack.DefinePlugin({
-      __DEV__: true,
-    }),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use

diff --git a/client/react-native/web/package.json b/client/react-native/web/package.json
@@ -49,6 +49,7 @@
     "react-dom": "16.5.2",
     "react-native-svg-web": "^1.0.1",
     "react-native-web": "^0.9.8",
+    "react-navigation": "2.18.2",
     "react-qr-reader": "^2.1.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
@@ -96,7 +97,6 @@
       "^.+\\.module\\.(css|sass|scss)$"
     ],
     "moduleNameMapper": {
-      "^react-native$": "react-native-web",
       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
     },
     "moduleFileExtensions": [