Chatwoot Mobile App

The Chatwoot mobile app is a client for the Chatwoot platform, built using React Native and Expo. It allows agents to manage customer conversations, use canned responses, receive real-time notifications, communicate via private notes, and manage conversation statuses on the go.

Compatibility Requirements

• Chatwoot Server Version: 3.13.0 or higher
• iOS: version 13.4+
• Android: version 6.0+

To test app updates before they are officially released, you can join the beta testing programs:

Opting In

• Android: Use the Android Beta link on your Android device.
• iOS: Use the TestFlight link on your iOS device.

Opting Out

• Android: Visit the Android Beta link while logged into the Google Play email address used for opt-in, and click Leave the program.
• iOS: Open the Chatwoot app page within the TestFlight app and select Stop Testing.

The official Chatwoot mobile application is available for download on both major mobile platforms:

• iOS: Available on the Apple App Store.
• Android: Available on Google Play.

The AppNavigationContainer manages the NavigationContainer and implements complex deep-linking logic. It handles three primary scenarios:

1. SSO Callbacks: Intercepts URLs containing SSO_CALLBACK_URL or auth/saml to process Single Sign-On authentication via SsoUtils without triggering standard navigation changes.
2. Deep Links (Conversations): Parses URLs to navigate directly to a ChatScreen. The path pattern is app/accounts/:accountId/conversations/:conversationId/:primaryActorId?/:primaryActorType?.
3. Push Notifications: When the app is opened via a notification (from a quit or background state), it uses findConversationLinkFromPush to resolve the notification payload into a valid deep link for the conversation.

It also manages font loading (Inter family) and hides the SplashScreen once assets are ready.

To ensure that only one row is open at a time in a list, you must manage the openedRowIndex using a SharedValue from react-native-reanimated.

When a user starts a pan gesture on a Swipeable component, it automatically updates the openedRowIndex.value to its own index. The component uses a useAnimatedReaction to monitor this value; if the openedRowIndex changes to a different index, the previously opened row will automatically trigger its closeRow logic to snap back to the closed state.

Implementation Pattern:

1. Create a useSharedValue<number | null>(null) in the parent list component.
2. Pass this shared value to every Swipeable instance in the list.
3. Pass the unique index of each item to the corresponding Swipeable instance.

The project uses a customized Metro configuration that integrates Sentry for error tracking and Storybook for UI component development. The configuration follows this precedence:

1. Starts with the default Expo Metro configuration.
2. Merges in Sentry Expo configuration via getSentryExpoConfig.
3. Wraps the resulting configuration with withStorybook to enable Storybook support.

To enable Storybook, the withStorybook wrapper requires an options object specifying the enabled state and the configPath pointing to the .storybook directory.

const config = {
  ...defaultConfig,
  ...sentryConfig,
};

module.exports = withStorybook(config, {
  enabled: true,
  configPath: path.resolve(__dirname, './.storybook'),
});

The project uses an app.config.ts file (Expo configuration) to manage app metadata, platform-specific settings, and plugin configurations. Many settings are driven by environment variables prefixed with EXPO_PUBLIC_.

Key Environment Variables

• EXPO_PUBLIC_APP_SLUG: The slug for the app (defaults to chatwoot-mobile).
• EXPO_PUBLIC_IOS_GOOGLE_SERVICES_FILE: Relative path to the iOS Google Services file.
• EXPO_PUBLIC_ANDROID_GOOGLE_SERVICES_FILE: Relative path to the Android Google Services file.
• EXPO_PUBLIC_PROJECT_ID: EAS project ID.
• EXPO_PUBLIC_SENTRY_PROJECT_NAME: Sentry project name.
• EXPO_PUBLIC_SENTRY_ORG_NAME: Sentry organization name.
• EXPO_STORYBOOK_ENABLED: Flag to enable Storybook.

The react-native.config.js file is used to customize how React Native autolinks native modules. In this project, specific dependencies are configured to prevent automatic linking on the Android platform by setting the android platform key to null within the dependencies object. This is typically done to manage manual linking requirements or to resolve conflicts with specific native libraries.

module.exports = {
  dependencies: {
    'ffmpeg-kit-react-native': {
      platforms: {
        android: null, // 👈 prevents Android autolinking
      },
    },
    '@notifee/react-native': {
      platforms: {
        android: null, // 👈 prevents Android autolinking
      },
    },
  },
};

Use validateFileAndSetAttachments to check if a selected file exceeds the MAXIMUM_FILE_UPLOAD_SIZE before adding it to the conversation.

• If the file is within the limit, it dispatches updateAttachments([attachment]) to the Redux store.
• If the file exceeds the limit, it shows a toast notification with the error message from CONVERSATION.FILE_SIZE_LIMIT.

Parameters:

• dispatch: The Redux dispatch function.
• attachment: An object containing at least a fileSize property.

import { validateFileAndSetAttachments } from '@/screens/chat-screen/components/message-components/CommandOptionsMenu';

// Usage
validateFileAndSetAttachments(dispatch, selectedAsset);

Use handleOpenPhotosLibrary to launch the device's image library. It allows selecting up to 4 mixed media assets. If permissions are denied, it triggers an alert with an option to open device settings via Linking.openSettings(). Successful selections are passed to validateFileAndSetAttachments to be added to the conversation.

Note: This function requires a dispatch function as an argument to update the Redux store.

import { handleOpenPhotosLibrary } from '@/screens/chat-screen/components/message-components/CommandOptionsMenu';

// Usage within a component
const handlePress = async () => {
  await handleOpenPhotosLibrary(dispatch);
};