chore: Upgrade react navigation to v6 (#524)

* Upgrade react navigation * Android/iOS beta version 1.4.6 * Fix i18n text * Disable sentry in local env
chatwoot · May 18, 2022 · 8202c49 · 8202c49
1 parent 3b30e45
commit 8202c49
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 94 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -136,8 +136,8 @@ android {
         applicationId "com.chatwoot.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5032
-        versionName "1.4.5"
+        versionCode 5033
+        versionName "1.4.6"
         multiDexEnabled true 
     }
     splits {

diff --git a/index.js b/index.js
@@ -8,8 +8,10 @@ import App from './src/app';
 
 AppRegistry.registerComponent(appName, () => App);
 
-Sentry.init({
-  dsn: Config.SENTRY_DSN,
-  tracesSampleRate: 1.0,
-});
+if (!__DEV__) {
+  Sentry.init({
+    dsn: Config.SENTRY_DSN,
+    tracesSampleRate: 1.0,
+  });
+}
 initAnalytics();
diff --git a/ios/Chatwoot.xcodeproj/project.pbxproj b/ios/Chatwoot.xcodeproj/project.pbxproj
@@ -753,14 +753,14 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 157;
+				CURRENT_PROJECT_VERSION = 158;
 				DEVELOPMENT_TEAM = L7YLMN4634;
 				ENABLE_BITCODE = NO;
 				EXCLUDED_ARCHS = "";
 				INFOPLIST_FILE = Chatwoot/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.4.5;
+				MARKETING_VERSION = 1.4.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -787,13 +787,13 @@
 				CODE_SIGN_ENTITLEMENTS = Chatwoot/Chatwoot.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 157;
+				CURRENT_PROJECT_VERSION = 158;
 				DEVELOPMENT_TEAM = L7YLMN4634;
 				EXCLUDED_ARCHS = "";
 				INFOPLIST_FILE = Chatwoot/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.4.5;
+				MARKETING_VERSION = 1.4.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -367,8 +367,9 @@ PODS:
     - React
   - RNReanimated (1.13.3):
     - React-Core
-  - RNScreens (2.18.1):
+  - RNScreens (3.4.0):
     - React-Core
+    - React-RCTImage
   - RNSentry (3.4.2):
     - React-Core
     - Sentry (= 7.11.0)
@@ -617,7 +618,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNPostHog: 074d1c384a53b5de4c2313a5d9e19e880ea571f9
   RNReanimated: 514a11da3a2bcc6c3dfd9de32b38e2b9bf101926
-  RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNScreens: 21b73c94c9117e1110a79ee0ee80c93ccefed8ce
   RNSentry: 2cd1daa124b0d9fd0dfc2cb6094fdd168cb579bc
   RNSnackbar: be3333a21a453ccc272f41a8add5a71f7d44dfcd
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "private": true,
   "scripts": {
     "clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean --force",
@@ -31,9 +31,9 @@
     "@react-native-community/push-notification-ios": "^1.8.0",
     "@react-native-firebase/app": "12.6.0",
     "@react-native-firebase/messaging": "12.6.0",
-    "@react-navigation/bottom-tabs": "^5.11.7",
-    "@react-navigation/native": "^5.9.2",
-    "@react-navigation/stack": "^5.14.2",
+    "@react-navigation/bottom-tabs": "^6.3.1",
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.2",
     "@sentry/react-native": "^3.4.2",
     "@ui-kitten/components": "^5.0.0",
     "@ui-kitten/eva-icons": "^5.0.0",
@@ -65,8 +65,8 @@
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-reanimated": "^1.13.2",
     "react-native-safari-view": "^2.1.0",
-    "react-native-safe-area-context": "^3.1.9",
-    "react-native-screens": "^2.10.1",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.4.0",
     "react-native-snackbar": "^2.3.2",
     "react-native-splash-screen": "^3.2.0",
     "react-native-svg": "^12.1.0",
@@ -115,4 +115,4 @@
     "preset": "react-native",
     "testRegex": "src/.*.spec.(js|jsx)$"
   }
-}
+}
diff --git a/src/router.js b/src/router.js
@@ -1,22 +1,22 @@
 import React, { useEffect, useRef, useState, Fragment } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Linking, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';
 import messaging from '@react-native-firebase/messaging';
 import PropTypes from 'prop-types';
-import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import ConfigureURLScreen from './screens/ConfigureURLScreen/ConfigureURLScreen';
 import LoginScreen from './screens/LoginScreen/LoginScreen';
 import TabBar from './components/TabBar';
 import ConversationList from './screens/ConversationList/ConversationList';
+import NotificationScreen from './screens/Notification/NotificationScreen';
 import SettingsScreen from './screens/Settings/SettingsScreen';
 import LanguageScreen from './screens/Language/LanguageScreen';
 import ChatScreen from './screens/ChatScreen/ChatScreen';
 import ConversationFilter from './screens/ConversationFilter/ConversationFilter';
 import ResetPassword from './screens/ForgotPassword/ForgotPassword';
 import ImageScreen from './screens/ChatScreen/ImageScreen';
-import NotificationScreen from './screens/Notification/NotificationScreen';
 import AccountScreen from './screens/Account/AccountScreen';
 import AvailabilityScreen from './screens/Availability/Availability';
 import NotificationPreference from './screens/NotificationPreference/NotificationPreference';
@@ -34,33 +34,33 @@ import { withStyles } from '@ui-kitten/components';
 import { captureScreen } from './helpers/Analytics';
 
 const Tab = createBottomTabNavigator();
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
-messaging().setBackgroundMessageHandler(async (remoteMessage) => {});
+messaging().setBackgroundMessageHandler(async remoteMessage => {});
 
 const HomeStack = () => (
-  <Stack.Navigator initialRouteName="ConversationList" headerMode="none">
+  <Stack.Navigator initialRouteName="ConversationList" screenOptions={{ headerShown: false }}>
     <Stack.Screen name="ConversationList" component={ConversationList} />
   </Stack.Navigator>
 );
 
 const SettingsStack = () => (
-  <Stack.Navigator initialRouteName="Settings" headerMode={'none'}>
+  <Stack.Navigator initialRouteName="Settings" screenOptions={{ headerShown: false }}>
     <Stack.Screen name="Settings" component={SettingsScreen} />
   </Stack.Navigator>
 );
 
 const NotificationStack = () => (
-  <Stack.Navigator initialRouteName="Notification" headerMode={'none'}>
+  <Stack.Navigator initialRouteName="Notification" screenOptions={{ headerShown: false }}>
     <Tab.Screen name="Notification" component={NotificationScreen} />
   </Stack.Navigator>
 );
 
 const TabStack = () => (
-  <Tab.Navigator tabBar={(props) => <TabBar {...props} />}>
-    <Tab.Screen name="Home" component={HomeStack} />
-    <Tab.Screen name="Notification" component={NotificationStack} />
-    <Tab.Screen name="Settings" component={SettingsStack} />
+  <Tab.Navigator screenOptions={{ headerShown: false }} tabBar={props => <TabBar {...props} />}>
+    <Tab.Screen name="HomeTab" component={HomeStack} />
+    <Tab.Screen name="NotificationTab" component={NotificationStack} />
+    <Tab.Screen name="SettingsTab" component={SettingsStack} />
   </Tab.Navigator>
 );
 
@@ -110,7 +110,7 @@ const useDeepLinkURL = () => {
   return { linkedURL, resetURL };
 };
 
-const _handleOpenURL = (event) => {
+const _handleOpenURL = event => {
   const { url } = event;
   if (url) {
     doDeepLinking({ url });
@@ -121,10 +121,10 @@ const App = ({ eva: { style } }) => {
   const dispatch = useDispatch();
   const routeNameRef = useRef();
 
-  const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
-  const isUrlSet = useSelector((state) => state.settings.isUrlSet);
+  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
+  const isUrlSet = useSelector(state => state.settings.isUrlSet);
 
-  const locale = useSelector((state) => state.settings.localeValue);
+  const locale = useSelector(state => state.settings.localeValue);
   const { linkedURL, resetURL } = useDeepLinkURL();
 
   useEffect(() => {
@@ -134,18 +134,18 @@ const App = ({ eva: { style } }) => {
   useEffect(() => {
     dispatch(resetConversation());
     // Notification caused app to open from foreground state
-    messaging().onMessage((remoteMessage) => {
+    messaging().onMessage(remoteMessage => {
       // handlePush({ remoteMessage, type: 'foreground' });
     });
 
     // Notification caused app to open from background state
-    messaging().onNotificationOpenedApp((remoteMessage) => {
+    messaging().onNotificationOpenedApp(remoteMessage => {
       handlePush({ remoteMessage, type: 'background' });
     });
     // Notification caused app to open from quit state
     messaging()
       .getInitialNotification()
-      .then((remoteMessage) => {
+      .then(remoteMessage => {
         if (remoteMessage) {
           handlePush({ remoteMessage, type: 'quite' });
           setTimeout(() => {
@@ -160,7 +160,6 @@ const App = ({ eva: { style } }) => {
   }
 
   i18n.locale = locale;
-
   return (
     <KeyboardAvoidingView
       style={style.container}
@@ -181,7 +180,7 @@ const App = ({ eva: { style } }) => {
           }}>
           <Stack.Navigator
             initialRouteName={isUrlSet ? 'Login' : 'ConfigureURL'}
-            headerMode={'none'}>
+            screenOptions={{ headerShown: false }}>
             {isLoggedIn ? (
               <Fragment>
                 <Stack.Screen name="Tab" component={TabStack} />
@@ -212,7 +211,7 @@ const App = ({ eva: { style } }) => {
   );
 };
 
-const styles = (theme) => ({
+const styles = theme => ({
   container: {
     flex: 1,
   },

diff --git a/src/screens/ConversationAction/ConversationAction.js b/src/screens/ConversationAction/ConversationAction.js
@@ -63,7 +63,13 @@ const ConversationActionComponent = ({ eva: { style }, onPressAction, conversati
       )}
       <ConversationActionItem
         onPressItem={onPressAction}
-        text={i18n.t(`CONVERSATION.${CONVERSATION_TOGGLE_STATUS[conversationStatus]}`)}
+        text={i18n.t(
+          `CONVERSATION.${
+            CONVERSATION_TOGGLE_STATUS[conversationStatus]
+              ? CONVERSATION_TOGGLE_STATUS[conversationStatus]
+              : CONVERSATION_TOGGLE_STATUS.open
+          }`,
+        )}
         itemType="toggle_status"
       />