chatwoot · muhsin-k · Jul 7, 2025 · Jul 7, 2025
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,46 @@
+# Chatwoot React Native Widget
+
+## Project Overview
+This is a React Native widget library for integrating Chatwoot chat functionality into React Native applications. It provides a WebView-based chat interface that connects to Chatwoot server installations.
+
+## Key Information
+- **Package**: @chatwoot/react-native-widget
+- **Supported Chatwoot version**: 2.16.0+
+- **Main dependencies**: react-native-webview, async-storage
+- **Current branch**: develop
+- **License**: MIT
+
+## Core Component
+The main component is `ChatWootWidget` which accepts the following props:
+- `baseUrl` (String, required): Chatwoot installation URL
+- `websiteToken` (String, required): Website channel token
+- `colorScheme` (String, default: 'light'): Widget color scheme (light/dark/auto)
+- `locale` (String, default: 'en'): Locale setting
+- `isModalVisible` (Boolean, default: false): Widget visibility state
+- `closeModal` (Function, required): Close event handler
+- `user` (Object, default: {}): User information (email, name, avatar_url, identifier, identifier_hash)
+- `customAttributes` (Object, default: {}): Additional customer information
+
+## Project Structure
+- `/example` folder contains usage examples
+- Main source code in library structure
+- Uses React Native WebView for chat interface
+
+## Installation Requirements
+- React Native 60.0+
+- iOS: requires `cd ios && pod install`
+- Dependencies: react-native-webview, async-storage
+
+## Usage Pattern
+Typically used as a modal overlay that can be toggled on/off, providing a chat interface within React Native applications.
+
+## Local Development & Testing
+The widget source code is located in the `src/` directory. To test changes locally:
+
+1. **Navigate to example project**: `cd Example`
+2. **Install dependencies**: `npm install` or `yarn install`
+3. **For iOS**: `cd ios && pod install && cd ..`
+4. **Run on iOS**: `npx react-native run-ios`
+5. **Run on Android**: `npx react-native run-android`
+
+The example project uses the local source code from `src/` for testing widget changes during development.
diff --git a/Example/src/WebView.js b/Example/src/WebView.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { StyleSheet, Linking } from 'react-native';
+import React, { useState, useMemo } from 'react';
+import { StyleSheet, Linking, View, ActivityIndicator } from 'react-native';
 import { WebView } from 'react-native-webview';
 import PropTypes from 'prop-types';
 import { isJsonString, storeHelper, generateScripts, getMessage } from './utils';
@@ -30,6 +30,7 @@ const WebViewComponent = ({
   closeModal,
 }) => {
   const [currentUrl, setCurrentUrl] = React.useState(null);
+  const [loading, setLoading] = useState(true);
   let widgetUrl = `${baseUrl}/widget?website_token=${websiteToken}&locale=${locale}`;
 
   if (cwCookie) {
@@ -59,43 +60,71 @@ const WebViewComponent = ({
     setCurrentUrl(newNavState.url);
   };
 
+  const opacity = useMemo(() => {
+    if (loading) {
+      return {
+        opacity: 0,
+      };
+    }
+    return {
+      opacity: 1,
+    };
+  }, [loading]);
+
+  const renderLoadingComponent = () => {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="small" />
+      </View>
+    );
+  };
+
   return (
-    <WebView
-      source={{
-        uri: widgetUrl,
-      }}
-      onMessage={(event) => {
-        const { data } = event.nativeEvent;
-        const message = getMessage(data);
-        if (isJsonString(message)) {
-          const parsedMessage = JSON.parse(message);
-          const { event: eventType, type } = parsedMessage;
-          if (eventType === 'loaded') {
-            const {
-              config: { authToken },
-            } = parsedMessage;
-            storeHelper.storeCookie(authToken);
-          }
-          if (type === 'close-widget') {
-            closeModal();
+    <View style={styles.container}>
+      <WebView
+        source={{
+          uri: widgetUrl,
+        }}
+        onMessage={(event) => {
+          const { data } = event.nativeEvent;
+          const message = getMessage(data);
+          if (isJsonString(message)) {
+            const parsedMessage = JSON.parse(message);
+            const { event: eventType, type } = parsedMessage;
+            if (eventType === 'loaded') {
+              const {
+                config: { authToken },
+              } = parsedMessage;
+              storeHelper.storeCookie(authToken);
+            }
+            if (type === 'close-widget') {
+              closeModal();
+            }
           }
-        }
-      }}
-      scalesPageToFit
-      useWebKit
-      sharedCookiesEnabled
-      javaScriptEnabled={true}
-      domStorageEnabled={true}
-      style={styles.WebViewStyle}
-      injectedJavaScript={injectedJavaScript}
-      onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-      onNavigationStateChange={handleWebViewNavigationStateChange}
-      scrollEnabled
-    />
+        }}
+        scalesPageToFit
+        useWebKit
+        sharedCookiesEnabled
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        style={[styles.WebViewStyle, opacity]}
+        injectedJavaScript={injectedJavaScript}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        onNavigationStateChange={handleWebViewNavigationStateChange}
+        onLoadStart={() => setLoading(true)}
+        onLoadProgress={() => setLoading(true)}
+        onLoadEnd={() => setLoading(false)}
+        scrollEnabled
+      />
+      {loading && renderLoadingComponent()}
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   modal: {
     flex: 1,
     borderRadius: 4,
@@ -104,6 +133,24 @@ const styles = StyleSheet.create({
   webViewContainer: {
     flex: 1,
   },
+  WebViewStyle: {
+    flex: 1,
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#666',
+  },
 });
 
 WebViewComponent.propTypes = propTypes;

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2023 Chatwoot Inc.
+Copyright (c) 2017-2025 Chatwoot Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.
diff --git a/src/WebView.js b/src/WebView.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { StyleSheet, Linking } from 'react-native';
+import React, { useState, useMemo } from 'react';
+import { StyleSheet, Linking, View, ActivityIndicator, Text } from 'react-native';
 import { WebView } from 'react-native-webview';
 import PropTypes from 'prop-types';
 import { isJsonString, storeHelper, generateScripts, getMessage } from './utils';
@@ -30,6 +30,7 @@ const WebViewComponent = ({
   closeModal,
 }) => {
   const [currentUrl, setCurrentUrl] = React.useState(null);
+  const [loading, setLoading] = useState(true);
   let widgetUrl = `${baseUrl}/widget?website_token=${websiteToken}&locale=${locale}`;
 
   if (cwCookie) {
@@ -59,43 +60,72 @@ const WebViewComponent = ({
     setCurrentUrl(newNavState.url);
   };
 
+  const opacity = useMemo(() => {
+    if (loading) {
+      return {
+        opacity: 0,
+      };
+    }
+    return {
+      opacity: 1,
+    };
+  }, [loading]);
+
+  const renderLoadingComponent = () => {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#1f93ff" />
+        <Text style={styles.loadingText}>Loading...</Text>
+      </View>
+    );
+  };
+
   return (
-    <WebView
-      source={{
-        uri: widgetUrl,
-      }}
-      onMessage={(event) => {
-        const { data } = event.nativeEvent;
-        const message = getMessage(data);
-        if (isJsonString(message)) {
-          const parsedMessage = JSON.parse(message);
-          const { event: eventType, type } = parsedMessage;
-          if (eventType === 'loaded') {
-            const {
-              config: { authToken },
-            } = parsedMessage;
-            storeHelper.storeCookie(authToken);
-          }
-          if (type === 'close-widget') {
-            closeModal();
+    <View style={styles.container}>
+      <WebView
+        source={{
+          uri: widgetUrl,
+        }}
+        onMessage={(event) => {
+          const { data } = event.nativeEvent;
+          const message = getMessage(data);
+          if (isJsonString(message)) {
+            const parsedMessage = JSON.parse(message);
+            const { event: eventType, type } = parsedMessage;
+            if (eventType === 'loaded') {
+              const {
+                config: { authToken },
+              } = parsedMessage;
+              storeHelper.storeCookie(authToken);
+            }
+            if (type === 'close-widget') {
+              closeModal();
+            }
           }
-        }
-      }}
-      scalesPageToFit
-      useWebKit
-      sharedCookiesEnabled
-      javaScriptEnabled={true}
-      domStorageEnabled={true}
-      style={styles.WebViewStyle}
-      injectedJavaScript={injectedJavaScript}
-      onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-      onNavigationStateChange={handleWebViewNavigationStateChange}
-      scrollEnabled
-    />
+        }}
+        scalesPageToFit
+        useWebKit
+        sharedCookiesEnabled
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        style={[styles.WebViewStyle, opacity]}
+        injectedJavaScript={injectedJavaScript}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        onNavigationStateChange={handleWebViewNavigationStateChange}
+        onLoadStart={() => setLoading(true)}
+        onLoadProgress={() => setLoading(true)}
+        onLoadEnd={() => setLoading(false)}
+        scrollEnabled
+      />
+      {loading && renderLoadingComponent()}
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   modal: {
     flex: 1,
     borderRadius: 4,
@@ -104,6 +134,24 @@ const styles = StyleSheet.create({
   webViewContainer: {
     flex: 1,
   },
+  WebViewStyle: {
+    flex: 1,
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#666',
+  },
 });
 WebViewComponent.propTypes = propTypes;
 export default WebViewComponent;