feat(v4): 4.0 Release - Updated designs, faster & smoother experience

.storybook/preview.tsx

@@ -1,6 +1,10 @@
-import type { Preview } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { RefsProvider } from '../src/context/RefsContext';
 
-const preview: Preview = {
+const preview = {
   parameters: {
     controls: {
       matchers: {
@@ -9,6 +13,23 @@ const preview: Preview = {
       },
     },
   },
+
+  decorators: [
+    (Story, { parameters }) => (
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <BottomSheetModalProvider>
+          <RefsProvider>
+            <View
+              style={{
+                flex: 1,
+              }}>
+              <Story />
+            </View>
+          </RefsProvider>
+        </BottomSheetModalProvider>
+      </GestureHandlerRootView>
+    ),
+  ],
 };
 
 export default preview;

App.tsx

@@ -16,11 +16,17 @@ if (!__DEV__) {
 if (__DEV__) {
   require('./ReactotronConfig');
 }
-
 // Ref: https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o
-export default isStorybookEnabled
-  ? // eslint-disable-next-line
-    require('./.storybook').default
-  : !__DEV__
-    ? Sentry.wrap(App)
-    : App;
+export default (() => {
+  if (isStorybookEnabled === 'true') {
+    // eslint-disable-next-line
+    return require('./.storybook').default;
+  }
+
+  if (!__DEV__) {
+    return Sentry.wrap(App);
+  }
+
+  console.log('Loading Development App');
+  return App;
+})();

ReactotronConfig.js

@@ -1,6 +1,9 @@
 import Reactotron from 'reactotron-react-native';
+// Don't remove this import, this is used by reactotron-redux only in dev mode
+import { reactotronRedux } from 'reactotron-redux';
 
 const reactotron = Reactotron.useReactNative() // add all built-in react native plugins
+  .use(reactotronRedux())
   .connect(); //Don't forget about me!
 
-export default reactotron;
+export default reactotron;

__mocks__/@sentry/react-native.js

@@ -0,0 +1,3 @@
+jest.mock('@sentry/react-native', () => ({
+  captureException: jest.fn(),
+}));

__mocks__/reactotron-react-native.js

@@ -0,0 +1 @@
+jest.mock('reactotron-react-native');   

__mocks__/reactotron-redux.js

@@ -0,0 +1 @@
+jest.mock('reactotron-redux');

app.config.ts

@@ -4,7 +4,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '1.10.52',
+    version: '1.10.53',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',
@@ -80,5 +80,8 @@ export default ({ config }: ConfigContext): ExpoConfig => {
         },
       ],
     ],
+    androidNavigationBar: {
+      backgroundColor: '#ffffff',
+    },
   };
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "1.10.52",
+  "version": "1.10.53",
   "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -27,6 +27,8 @@
     "storybook:android": "cross-env EXPO_STORYBOOK_ENABLED='true' expo android"
   },
   "dependencies": {
+    "@alantoa/lightbox": "0.3.1",
+    "@chatwoot/markdown-to-txt": "^2.0.4",
     "@chatwoot/react-native-widget": "^0.0.21",
     "@chatwoot/utils": "^0.0.25",
     "@gorhom/bottom-sheet": "^4.6.3",
@@ -44,12 +46,17 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@sentry/react-native": "^5.24.3",
     "@shopify/flash-list": "^1.5.0",
+    "@types/lodash": "^4.17.9",
     "axios": "^1.6.4",
+    "camelcase": "^8.0.0",
+    "camelcase-keys": "^7.0.2",
     "cross-env": "^7.0.3",
     "date-fns": "2.21.1",
     "expo": "~51.0.28",
     "expo-application": "~5.9.1",
+    "expo-av": "~14.0.7",
     "expo-build-properties": "~0.12.5",
+    "expo-constants": "^16.0.2",
     "expo-font": "~12.0.10",
     "expo-haptics": "~13.0.1",
     "expo-image": "~1.13.0",
@@ -58,42 +65,41 @@
     "expo-system-ui": "~3.0.7",
     "expo-web-browser": "~13.0.3",
     "i18n-js": "^3.8.0",
-    "lodash.filter": "^4.6.0",
+    "lodash": "^4.17.21",
     "lodash.groupby": "^4.6.0",
-    "markdown-it": "^12.3.2",
     "moment": "^2.30.1",
-    "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-hook-form": "^7.52.1",
     "react-native": "0.74.5",
-    "react-native-animatable": "^1.3.3",
+    "react-native-audio-recorder-player": "^3.6.11",
     "react-native-autoheight-webview": "^1.6.5",
     "react-native-controlled-mentions": "^2.2.5",
     "react-native-device-info": "^11.1.0",
     "react-native-document-picker": "^9.3.1",
+    "react-native-file-viewer": "^2.1.5",
     "react-native-gesture-handler": "^2.17.1",
-    "react-native-html-parser": "^0.1.0",
-    "react-native-image-pan-zoom": "^2.1.12",
     "react-native-image-picker": "^7.1.2",
     "react-native-keyboard-controller": "^1.13.4",
-    "react-native-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-pager-view": "^6.2.1",
     "react-native-permissions": "^5.0.0",
     "react-native-reanimated": "^3.14.0",
-    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.32.0",
     "react-native-snackbar": "^2.6.2",
     "react-native-svg": "^15.4.0",
-    "react-native-tab-view": "^3.5.2",
+    "react-native-track-player": "^4.1.1",
     "react-native-webview": "^13.8.6",
     "react-redux": "^8.1.2",
+    "reactotron-redux": "^3.1.10",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
+    "rn-fetch-blob": "^0.12.0",
     "semver": "^7.6.3",
     "tailwindcss": "^3.4.12",
-    "twrnc": "^4.5.1"
+    "twrnc": "^4.5.1",
+    "use-deep-compare-effect": "^1.8.1",
+    "zeego": "^1.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",