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

Author: muhsin-k

.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;
+})();

README.md

@@ -1,23 +1,24 @@
-<p align="center">
-  <img src="https://s3.us-west-2.amazonaws.com/gh-assets.chatwoot.com/brand.svg" alt="Woot-logo" width="240">
-
-  <div align="center">Mobile app for chatwoot platform. Built with React Native</div>
-  <div align="center">Chatwoot is an opensource alternative to Intercom, Zendesk, Drift, Crisp etc.</div>
-</p>
+<img src="https://user-images.githubusercontent.com/2246121/282256557-1570674b-d142-4198-9740-69404cc6a339.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
+<img src="https://user-images.githubusercontent.com/2246121/282256632-87f6a01b-6467-4e0e-8a93-7bbf66d03a17.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
 
 ---
 
-<p align="center">
+# Chatwoot
+
+Mobile app for chatwoot platform. Built with React Native and Expo.
+
+<p>
    <a href="https://github.com/react-native-community/releases/blob/master/CHANGELOG.md"><img src="https://img.shields.io/github/package-json/dependency-version/chatwoot/chatwoot-mobile-app/react-native?color=%2361dafb" alt="Project Dependencies"></a>
+   <img src="https://img.shields.io/github/package-json/dependency-version/chatwoot/chatwoot-mobile-app/expo?color=%2361dafb" alt="Expo">
   <img src="https://img.shields.io/discord/647412545203994635" alt="Discord">
   <a href="https://discord.gg/cJXdrwS"><img src="https://img.shields.io/badge/chat-Discord-violet?logo=discord" alt="Chat on Discord"></a>
    <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="Chat on Discord"></a>
  <img src="https://img.shields.io/github/license/chatwoot/chatwoot-mobile-app" alt="License">
 </p>
 
-- **Supported Chatwoot version:** 2.16.0+
-- **Supported iOS versions**: 11+ 
-- **Supported Android versions**: 5.0+
+- **Supported Chatwoot version:** 3.13.0+
+- **Supported iOS versions**: 13.4+
+- **Supported Android versions**: 6.0+
 
 ## Features
 
@@ -29,15 +30,6 @@
 - Assign statuses to your conversations
   ... and more to come!
 
-<p float="left">
-  <img src=".github/conversation.png" alt="conversations" width="250">
-  <img src=".github/chat.png" alt="chat" width="250">
-  <img src=".github/details.png" alt="details"width="250">
-  <img src=".github/filter.png" alt="filter" width="250">
-  <img src=".github/notification.png" alt="notification"width="250">
-  <img src=".github/settings.png" alt="settings"width="250">
-</p>
-
 ## Download Android/iOS application
 
 <p >
@@ -56,21 +48,20 @@ To help with testing app updates before they're released, you can:
 
 Sign up to be a beta tester
 
-   - [Android](https://play.google.com/apps/testing/com.chatwoot.app) -  Open this link from your Android device
-   - [iOS](https://testflight.apple.com/join/yQ4yoSx4) - Open this link from your iOS device
-   
+- [Android](https://play.google.com/apps/testing/com.chatwoot.app) - Open this link from your Android device
+- [iOS](https://testflight.apple.com/join/yQ4yoSx4) - Open this link from your iOS device
+
 You can leave the Beta testing program at any time:
-- On Android, [click this link](https://play.google.com/apps/testing/com.chatwoot.app) while logged in with your Google Play email address used to opt-in for the Beta program, then click **Leave the program**. 
+
+- On Android, [click this link](https://play.google.com/apps/testing/com.chatwoot.app) while logged in with your Google Play email address used to opt-in for the Beta program, then click **Leave the program**.
 - On iOS, access the `Chatwoot` app page in TestFlight and click **Stop Testing**.
 
 ## Feedback & Contributing
 
-Feel free to send us feedback on [Twitter](https://twitter.com/chatwootapp) or [file an issue](https://github.com/chatwoot/chatwoot-mobile-app/issues).
+Feel free to send us feedback on [X](https://x.com/chatwootapp) or [file an issue](https://github.com/chatwoot/chatwoot-mobile-app/issues).
 
-If you wish to contribute, please take a quick look at the [CONTRIBUTING.md](https://www.chatwoot.com/docs/contributing-guide) and [SETUP_GUIDE.md](https://www.chatwoot.com/docs/contributing-guide/mobile-app/setup-guide).
- 
-If you want to self deploy the Chatwoot mobile app, please take a look at the [CUSTOM_RELEASE_GUIDE.md](https://www.chatwoot.com/docs/contributing-guide/mobile-app/custom-release-guide) guide.
+If you wish to contribute, please take a quick look at the [CONTRIBUTING.md](https://www.chatwoot.com/docs/contributing-guide/mobile-app/setup-guide).
 
 If there's anything you'd like to chat about, please feel free to join our [Discord](https://discord.gg/cJXdrwS) chat!
 
-_Chatwoot_ &copy; 2017-2023, Chatwoot Inc - Released under the MIT License.
+_Chatwoot_ &copy; 2017-2025, Chatwoot Inc - Released under the MIT License.

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.55',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',
@@ -31,6 +31,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       entitlements: {
         'aps-environment': 'production',
       },
+      associatedDomains: ['applinks:app.chatwoot.com'],
     },
     android: {
       adaptiveIcon: {
@@ -46,6 +47,21 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       ],
       // Please use the relative path to the google-services.json file
       googleServicesFile: process.env.EXPO_PUBLIC_ANDROID_GOOGLE_SERVICES_FILE,
+      intentFilters: [
+        {
+          action: 'VIEW',
+          autoVerify: true,
+          data: [
+            {
+              scheme: 'https',
+              host: 'app.chatwoot.com',
+              pathPrefix: '/app/accounts/',
+              pathPattern: '/*/conversations/*',
+            },
+          ],
+          category: ['BROWSABLE', 'DEFAULT'],
+        },
+      ],
     },
     extra: {
       eas: {
@@ -74,11 +90,20 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       [
         'expo-build-properties',
         {
+          // https://github.com/invertase/notifee/issues/808#issuecomment-2175934609
+          android: {
+            compileSdkVersion: 34,
+            targetSdkVersion: 34,
+            extraMavenRepos: ['$rootDir/../../../node_modules/@notifee/react-native/android/libs'],
+          },
           ios: {
             useFrameworks: 'static',
           },
         },
       ],
     ],
+    androidNavigationBar: {
+      backgroundColor: '#ffffff',
+    },
   };
 };

firebase.json

@@ -1,5 +1,5 @@
 {
   "react-native": {
-    "messaging_ios_auto_register_for_remote_messages": false
+    "messaging_ios_auto_register_for_remote_messages": true
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "1.10.52",
+  "version": "1.10.55",
   "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -10,6 +10,7 @@
     "test": "jest",
     "lint": "eslint .",
     "generate": "npx expo prebuild --clean",
+    "generate:soft": "npx expo prebuild",
     "run:ios": "npx expo run:ios -d",
     "run:android": "npx expo run:android -d",
     "build:android:local": "dotenv -c -- eas build -p android --profile production --local",
@@ -27,6 +28,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 +47,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 +66,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",