# Building a React Native Chat App with CometChat UI Kit
Learn how to build and launch a real-time React Native chat app quickly using CometChat’s UI Kits. This step-by-step tutorial covers integration, theme customization, and component tailoring to create a fully functional, personalized chat experience.
Haris Kumar • Jan 13, 2025
Prerequisites
Prerequisites Getting started Building the chat app interface Adding advanced functionalities on top of the existing features 1\. Setting up notifications 2\. Setting up advanced moderation 3\. Using Webhooks to extend your chat app's functionality Customizing Your Chat Interface Component customization Testing Your Chat App Testing checklist Deployment Preparation Final Deployment Checklist
Building chat apps in React Native from scratch is an ambitious task that comes with a range of complex challenges, such as:
- Setting up and managing real-time infrastructure for message exchanges
- Implementing reliable message delivery and storage systems
- Building presence tracking and typing indicators
- Creating secure user authentication flows
- Ensuring scalability for multiple users and heavy usage
- Developing an intuitive and responsive chat interface
- Managing cross-platform compatibility between iOS and Android
CometChat's [React Native UI Kit](https://www.cometchat.com/react-native-chat-ui-kit) simplifies this process by offering pre-built, customizable chat components that eliminate the heavy lifting, while still allowing developers the flexibility to align the chat experience with their unique app requirements.
To better understand how CometChat can accelerate your development process, here's a quick comparison of building a chat app using the traditional DIY approach versus leveraging CometChat:
| Feature/Component | DIY Approach | With CometChat |
| --- | --- | --- |
| Setup Time | 3-4 weeks for basic features | 2-3 days for full implementation |
| Backend Infrastructure | Build and maintain servers, databases, and WebSocket connections. Handle platform-specific optimizations. | Fully managed by CometChat. Scalable infrastructure. |
| Real-time Communication | Implement WebSocket handling, connection management, and platform lifecycle events | Built into SDK with automatic handling. |
| User Management | Create user systems, presence tracking, and online status | Pre-built user management system with cross-platform presence handling |
| Message Delivery | Build queuing, retry logic, and delivery confirmation systems | Automatic with guaranteed delivery and offline support |
| Media Handling | Implement platform-specific upload, storage, and delivery systems | Built-in media handling with CDN support and native pickers |
| Security | Implement encryption, authentication, and access control | Enterprise-grade security included |
| UI Components | Build all chat interface components from scratch | Pre-built, customizable UI components |
| Scaling | Handle infrastructure scaling, load balancing, and performance optimization | Automatically scales with your usage |
| Notifications | Build a separate engine to manage notifications | Out-of-the-box setup for push, email, and SMS notifications via dashboard, plus user preference controls |
| Moderation | Build or integrate with third-party moderation tools | AI-powered filters, conditional rules engine, and a centralized dashboard for admin control |
| Analytics | Develop custom reports and metrics for user engagement and chat activity | Built-in analytics with ready-made reports to track engagement, usage and chat activity |
In this tutorial, we'll build a full-featured chat application that supports:
- One-on-one and group messaging
- Rich media sharing (images, files, links)
- Message threads and reactions
- User presence and typing indicators
- Push notifications
- Message moderation
- Custom UI theming
By the end of this tutorial, you'll have a production-ready chat application that can be easily customized to match your brand and requirements, all powered by CometChat's robust backend infrastructure.
## Prerequisites
Before starting, ensure you have:
- Node.js (version 14 or higher)
- React Native CLI (version 0.70.0 or higher)
- JDK 11
- npm or yarn package manager
- Android Studio (for Android development)
- Xcode 13+ (for iOS development)
- iOS 12.0 or later (for iOS development)
- CometChat account (free plan available)
## Getting started
### Step 1: Create a New React Native Project
Start by creating a fresh React Native project using the CLI. The command will set up a new React Native project with the latest stable version.
| | |
| --- | --- |
| `1` | ```
npx react-native init ChatingApp
``` |
| `2` | ```
``` |
| `3` | ```
cd ChatingApp
``` |
### Step 2. Install Required Dependencies
Install the following packages with their specific versions to ensure compatibility:
| | |
| --- | --- |
| `1` | ```
# Install CometChat Core packages
``` |
| `2` | ```
npm i @cometchat/chat-uikit-react-native
``` |
| `3` | ```
npm i @cometchat/chat-sdk-react-native
``` |
| `4` | ```
``` |
| `5` | ```
# Install required dependencies
``` |
| `6` | ```
npm i @react-native-async-storage/async-storage@1.17.10
``` |
| `7` | ```
npm i @react-native-clipboard/clipboard@1.13.2
``` |
| `8` | ```
npm i @react-native-community/datetimepicker@7.6.4
``` |
| `9` | ```
``` |
| `10` | ```
# Install navigation dependencies
``` |
| `11` | ```
npm i @react-navigation/native@6.1.6
``` |
| `12` | ```
npm i @react-navigation/native-stack@6.9.12
``` |
| `13` | ```
npm i react-native-screens@3.20.0
``` |
| `14` | ```
``` |
For React Native 0.76 and above, also install:
| | |
| --- | --- |
| `1` | ```
npm i dayjs
``` |
iOS Setup
| | |
| --- | --- |
| `1` | ```
cd ios
``` |
| `2` | ```
``` |
| `3` | ```
pod install
``` |
| `4` | ```
``` |
| `5` | ```
cd ..
``` |
### Step 3: Configure Project Settings
For optimal compatibility, disable the new React Native architecture for both platforms:
For iOS, update your **_ios/Podfile:_**
| | |
| --- | --- |
| `1` | ```
ENV['RCT_NEW_ARCH_ENABLED']='0'
``` |
For Android, update **_android/gradle.properties:_**
| | |
| --- | --- |
| `1` | ```
newArchEnabled=false
``` |
### Step 4: Add Platform Permissions
Add the necessary permissions,
- For Android: Update AndroidManifest.xml with storage, vibration, and internet permissions
- For iOS: Update Info.plist with required permissions
#### Android Permissions
Add the following permissions to **_android/app/src/main/AndroidManifest.xml_** inside the **__** tag:
| | |
| --- | --- |
| `1` | ```
``` |
| `2` | ```
``` |
| `3` | ```
``` |
| `4` | ```
``` |
| `5` | ```
``` |
| `6` | ```
``` |
| `7` | ```
``` |
| `8` | ```
``` |
| `9` | ```
``` |
| `10` | ```
``` |
| `11` | ```
``` |
Note: For Android development, ensure **_ANDROID\_HOME_** environment variable is properly set or configure **_sdk.dir_** in **_local.properties_**
#### iOS Permissions
Add the following keys to **_ios/YourAppName/Info.plist_** inside the **__** tag:
| | |
| --- | --- |
| `1` | ```
``` |
| `2` | ```
``` |
| `3` | ```
NSPhotoLibraryUsageDescription
``` |
| `4` | ```
Allow access to photo library for sharing images and media in chat
``` |
| `5` | ```
``` |
| `6` | ```
``` |
| `7` | ```
NSCameraUsageDescription
``` |
| `8` | ```
Camera access is required for video calls
``` |
| `9` | ```
NSMicrophoneUsageDescription
``` |
| `10` | ```
Microphone access is required for voice calls
``` |
| `11` | ```
``` |
| `12` | ```
``` |
| `13` | ```
NSAppTransportSecurity
``` |
| `14` | ```
``` |
| `15` | ```
NSAllowsArbitraryLoads
``` |
| `16` | ```
``` |
| `17` | ```
``` |
Note: Customize the permission description strings to match your app's specific use cases and privacy policy.
### Step 5: Initialize CometChat
Create a configuration file to handle CometChat initialization. This setup includes:
- Permission handling for Android
- CometChat UI Kit initialization
- Error handling and initialization status
- Environment-specific configuration
Create a new file **_src/config/cometChat.js_**
| | |
| --- | --- |
| `1` | ```
import { CometChatUIKit, UIKitSettings } from '@cometchat/chat-uikit-react-native';
``` |
| `2` | ```
import { CometChat } from '@cometchat/chat-sdk-react-native';
``` |
| `3` | ```
import { Platform, PermissionsAndroid } from 'react-native';
``` |
| `4` | ```
``` |
| `5` | ```
// Replace these with your actual CometChat credentials
``` |
| `6` | ```
const APP_ID = 'YOUR_APP_ID_HERE';
``` |
| `7` | ```
const AUTH_KEY = 'YOUR_AUTH_KEY_HERE';
``` |
| `8` | ```
const REGION = 'YOUR_REGION_HERE';
``` |
| `9` | ```
``` |
| `10` | ```
// Validation helper
``` |
| `11` | ```
const validateConfig = () => {
``` |
| `12` | ```
const missing = [];
``` |
| `13` | ```
if (!APP_ID) missing.push('APP_ID');
``` |
| `14` | ```
if (!AUTH_KEY) missing.push('AUTH_KEY');
``` |
| `15` | ```
if (!REGION) missing.push('REGION');
``` |
| `16` | ```
``` |
| `17` | ```
if (missing.length > 0) {
``` |
| `18` | ```
throw new Error(`Missing required CometChat configuration: ${missing.join(', ')}`);
``` |
| `19` | ```
}
``` |
| `20` | ```
};
``` |
| `21` | ```
``` |
| `22` | ```
const requestAndroidPermissions = async () => {
``` |
| `23` | ```
if (Platform.OS === 'android') {
``` |
| `24` | ```
try {
``` |
| `25` | ```
const permissions = [
``` |\
| `26` | ```
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
``` |\
| `27` | ```
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
``` |\
| `28` | ```
PermissionsAndroid.PERMISSIONS.CAMERA,
``` |\
| `29` | ```
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
``` |\
| `30` | ```
];
``` |
| `31` | ```
``` |
| `32` | ```
await PermissionsAndroid.requestMultiple(permissions);
``` |
| `33` | ```
} catch (error) {
``` |
| `34` | ```
console.error('Error requesting permissions:', error);
``` |
| `35` | ```
throw error;
``` |
| `36` | ```
}
``` |
| `37` | ```
}
``` |
| `38` | ```
};
``` |
| `39` | ```
``` |
| `40` | ```
export const initializeCometChat = async () => {
``` |
| `41` | ```
try {
``` |
| `42` | ```
validateConfig();
``` |
| `43` | ```
await requestAndroidPermissions();
``` |
| `44` | ```
``` |
| `45` | ```
const uiKitSettings = new UIKitSettings({
``` |
| `46` | ```
appID: APP_ID,
``` |
| `47` | ```
authKey: AUTH_KEY,
``` |
| `48` | ```
region: REGION,
``` |
| `49` | ```
subscriptionType: CometChat.AppSettings.SUBSCRIPTION_TYPE_ALL_USERS,
``` |
| `50` | ```
});
``` |
| `51` | ```
``` |
| `52` | ```
await CometChatUIKit.init(uiKitSettings);
``` |
| `53` | ```
console.log('CometChat initialized successfully');
``` |
| `54` | ```
return true;
``` |
| `55` | ```
} catch (error) {
``` |
| `56` | ```
console.error('CometChat initialization failed:', error);
``` |
| `57` | ```
throw error;
``` |
| `58` | ```
}
``` |
| `59` | ```
};
``` |
| `60` | ```
``` |
| `61` | ```
export const loginWithUID = async (uid) => {
``` |
| `62` | ```
if (!uid?.trim()) {
``` |
| `63` | ```
throw new Error('Invalid user ID provided');
``` |
| `64` | ```
}
``` |
| `65` | ```
``` |
| `66` | ```
try {
``` |
| `67` | ```
const user = await CometChatUIKit.login({ uid });
``` |
| `68` | ```
if (!user) {
``` |
| `69` | ```
throw new Error('Login failed - no user returned');
``` |
| `70` | ```
}
``` |
| `71` | ```
return user;
``` |
| `72` | ```
} catch (error) {
``` |
| `73` | ```
console.error('Login failed:', error);
``` |
| `74` | ```
throw new Error(error.message || 'Authentication failed');
``` |
| `75` | ```
}
``` |
| `76` | ```
};
``` |
| `77` | ```
``` |
| `78` | ```
export const logout = async () => {
``` |
| `79` | ```
try {
``` |
| `80` | ```
await CometChatUIKit.logout();
``` |
| `81` | ```
return true;
``` |
| `82` | ```
} catch (error) {
``` |
| `83` | ```
console.error('Logout failed:', error);
``` |
| `84` | ```
throw error;
``` |
| `85` | ```
}
``` |
| `86` | ```
};
``` |
Important security note: The Auth Key should only be used during development. For production, use Auth Tokens for secure user authentication.
## Building the chat app interface
### 1\. User login and authentication flow
Before diving into building the chat interface, we'll create a login component that authenticates users with CometChat using their unique User ID. This authentication system is fundamental as it establishes a secure connection between users and CometChat servers, managing user sessions and ensuring proper access to conversations.
We'll create a login form that:
- Accepts a User ID input from the user
- Authenticates the User ID against CometChat's backend
- Handles loading states and error messages
- Establishes a user session upon successful login
#### Step 1: Create a new authentication context to manage login state
Create **_src/context/AuthContext.js:_**
| | |
| --- | --- |
| `1` | ```
import React, { createContext, useState, useContext, useEffect } from 'react';
``` |
| `2` | ```
import AsyncStorage from '@react-native-async-storage/async-storage';
``` |
| `3` | ```
import { loginWithUID, logout } from '../config/cometChat';
``` |
| `4` | ```
import NetInfo from '@react-native-community/netinfo';
``` |
| `5` | ```
``` |
| `6` | ```
const AuthContext = createContext(null);
``` |
| `7` | ```
const USER_STORAGE_KEY = '@user_data';
``` |
| `8` | ```
``` |
| `9` | ```
export const AuthProvider = ({ children }) => {
``` |
| `10` | ```
const [user, setUser] = useState(null);
``` |
| `11` | ```
const [loading, setLoading] = useState(true);
``` |
| `12` | ```
const [isConnected, setIsConnected] = useState(true);
``` |
| `13` | ```
``` |
| `14` | ```
useEffect(() => {
``` |
| `15` | ```
const unsubscribe = NetInfo.addEventListener(state => {
``` |
| `16` | ```
setIsConnected(state.isConnected);
``` |
| `17` | ```
});
``` |
| `18` | ```
``` |
| `19` | ```
checkAuthState();
``` |
| `20` | ```
``` |
| `21` | ```
return () => {
``` |
| `22` | ```
unsubscribe();
``` |
| `23` | ```
};
``` |
| `24` | ```
}, []);
``` |
| `25` | ```
``` |
| `26` | ```
const handleLogin = async (uid) => {
``` |
| `27` | ```
setLoading(true);
``` |
| `28` | ```
try {
``` |
| `29` | ```
const user = await loginWithUID(uid);
``` |
| `30` | ```
await AsyncStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
``` |
| `31` | ```
setUser(user);
``` |
| `32` | ```
return user;
``` |
| `33` | ```
} catch (error) {
``` |
| `34` | ```
throw error;
``` |
| `35` | ```
} finally {
``` |
| `36` | ```
setLoading(false);
``` |
| `37` | ```
}
``` |
| `38` | ```
};
``` |
| `39` | ```
``` |
| `40` | ```
const handleLogout = async () => {
``` |
| `41` | ```
setLoading(true);
``` |
| `42` | ```
try {
``` |
| `43` | ```
await logout();
``` |
| `44` | ```
await AsyncStorage.removeItem(USER_STORAGE_KEY);
``` |
| `45` | ```
setUser(null);
``` |
| `46` | ```
} catch (error) {
``` |
| `47` | ```
console.error('Logout error:', error);
``` |
| `48` | ```
throw error;
``` |
| `49` | ```
} finally {
``` |
| `50` | ```
setLoading(false);
``` |
| `51` | ```
}
``` |
| `52` | ```
};
``` |
| `53` | ```
``` |
| `54` | ```
const checkAuthState = async () => {
``` |
| `55` | ```
try {
``` |
| `56` | ```
const savedUser = await AsyncStorage.getItem(USER_STORAGE_KEY);
``` |
| `57` | ```
if (savedUser) {
``` |
| `58` | ```
const userData = JSON.parse(savedUser);
``` |
| `59` | ```
// Re-authenticate with CometChat
``` |
| `60` | ```
await loginWithUID(userData.uid);
``` |
| `61` | ```
setUser(userData);
``` |
| `62` | ```
}
``` |
| `63` | ```
} catch (error) {
``` |
| `64` | ```
console.error('Auth state check failed:', error);
``` |
| `65` | ```
await AsyncStorage.removeItem(USER_STORAGE_KEY);
``` |
| `66` | ```
} finally {
``` |
| `67` | ```
setLoading(false);
``` |
| `68` | ```
}
``` |
| `69` | ```
};
``` |
| `70` | ```
``` |
| `71` | ```
return (
``` |
| `72` | ```
``` |
| `73` | ```
value={{
``` |
| `74` | ```
user,
``` |
| `75` | ```
loading,
``` |
| `76` | ```
isConnected,
``` |
| `77` | ```
login: handleLogin,
``` |
| `78` | ```
logout: handleLogout,
``` |
| `79` | ```
checkAuthState
``` |
| `80` | ```
}}
``` |
| `81` | ```
>
``` |
| `82` | ```
{children}
``` |
| `83` | ```
``` |
| `84` | ```
);
``` |
| `85` | ```
};
``` |
| `86` | ```
``` |
| `87` | ```
export const useAuth = () => {
``` |
| `88` | ```
const context = useContext(AuthContext);
``` |
| `89` | ```
if (!context) {
``` |
| `90` | ```
throw new Error('useAuth must be used within an AuthProvider');
``` |
| `91` | ```
}
``` |
| `92` | ```
return context;
``` |
| `93` | ```
};
``` |
### Step 2: Create Error Boundary Component
Create **_src/components/ErrorBoundary.js_**
| | |
| --- | --- |
| `1` | ```
import React from 'react';
``` |
| `2` | ```
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
``` |
| `3` | ```
``` |
| `4` | ```
class ErrorBoundary extends React.Component {
``` |
| `5` | ```
state = { hasError: false, error: null };
``` |
| `6` | ```
``` |
| `7` | ```
static getDerivedStateFromError(error) {
``` |
| `8` | ```
return { hasError: true, error };
``` |
| `9` | ```
}
``` |
| `10` | ```
``` |
| `11` | ```
componentDidCatch(error, errorInfo) {
``` |
| `12` | ```
console.error('Chat app error:', error, errorInfo);
``` |
| `13` | ```
}
``` |
| `14` | ```
``` |
| `15` | ```
render() {
``` |
| `16` | ```
if (this.state.hasError) {
``` |
| `17` | ```
return (
``` |
| `18` | ```
``` |
| `19` | ```
Something went wrong
``` |
| `20` | ```
``` |
| `21` | ```
onPress={() => this.setState({ hasError: false })}
``` |
| `22` | ```
style={styles.retryButton}
``` |
| `23` | ```
>
``` |
| `24` | ```
Try Again
``` |
| `25` | ```
``` |
| `26` | ```
``` |
| `27` | ```
);
``` |
| `28` | ```
}
``` |
| `29` | ```
``` |
| `30` | ```
return this.props.children;
``` |
| `31` | ```
}
``` |
| `32` | ```
}
``` |
| `33` | ```
``` |
| `34` | ```
const styles = StyleSheet.create({
``` |
| `35` | ```
errorContainer: {
``` |
| `36` | ```
flex: 1,
``` |
| `37` | ```
justifyContent: 'center',
``` |
| `38` | ```
alignItems: 'center',
``` |
| `39` | ```
padding: 20,
``` |
| `40` | ```
},
``` |
| `41` | ```
errorText: {
``` |
| `42` | ```
fontSize: 18,
``` |
| `43` | ```
marginBottom: 20,
``` |
| `44` | ```
textAlign: 'center',
``` |
| `45` | ```
},
``` |
| `46` | ```
retryButton: {
``` |
| `47` | ```
backgroundColor: '#2196F3',
``` |
| `48` | ```
padding: 12,
``` |
| `49` | ```
borderRadius: 8,
``` |
| `50` | ```
},
``` |
| `51` | ```
retryText: {
``` |
| `52` | ```
color: '#fff',
``` |
| `53` | ```
fontSize: 16,
``` |
| `54` | ```
},
``` |
| `55` | ```
});
``` |
| `56` | ```
``` |
| `57` | ```
export default ErrorBoundary;
``` |
### Step 3: Create a Login screen
Create **_src/screens/LoginScreen.js_**:
| | |
| --- | --- |
| `1` | ```
import React, { useState } from 'react';
``` |
| `2` | ```
import {
``` |
| `3` | ```
View,
``` |
| `4` | ```
TextInput,
``` |
| `5` | ```
TouchableOpacity,
``` |
| `6` | ```
Text,
``` |
| `7` | ```
StyleSheet,
``` |
| `8` | ```
ActivityIndicator,
``` |
| `9` | ```
Alert,
``` |
| `10` | ```
KeyboardAvoidingView,
``` |
| `11` | ```
Platform,
``` |
| `12` | ```
} from 'react-native';
``` |
| `13` | ```
import { useAuth } from '../context/AuthContext';
``` |
| `14` | ```
``` |
| `15` | ```
const LoginScreen = () => {
``` |
| `16` | ```
const [uid, setUid] = useState('');
``` |
| `17` | ```
const { login, loading, isConnected } = useAuth();
``` |
| `18` | ```
``` |
| `19` | ```
const handleLogin = async () => {
``` |
| `20` | ```
if (!isConnected) {
``` |
| `21` | ```
Alert.alert('Error', 'No internet connection');
``` |
| `22` | ```
return;
``` |
| `23` | ```
}
``` |
| `24` | ```
``` |
| `25` | ```
if (!uid.trim()) {
``` |
| `26` | ```
Alert.alert('Error', 'Please enter a User ID');
``` |
| `27` | ```
return;
``` |
| `28` | ```
}
``` |
| `29` | ```
``` |
| `30` | ```
try {
``` |
| `31` | ```
await login(uid.trim());
``` |
| `32` | ```
} catch (error) {
``` |
| `33` | ```
Alert.alert(
``` |
| `34` | ```
'Login Failed',
``` |
| `35` | ```
error.message || 'Unable to connect. Please check your User ID and try again.'
``` |
| `36` | ```
);
``` |
| `37` | ```
}
``` |
| `38` | ```
};
``` |
| `39` | ```
``` |
| `40` | ```
return (
``` |
| `41` | ```
``` |
| `42` | ```
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
``` |
| `43` | ```
style={styles.container}
``` |
| `44` | ```
>
``` |
| `45` | ```
``` |
| `46` | ```
Welcome
``` |
| `47` | ```
``` |
| `48` | ```
style={styles.input}
``` |
| `49` | ```
placeholder="Enter User ID"
``` |
| `50` | ```
value={uid}
``` |
| `51` | ```
onChangeText={setUid}
``` |
| `52` | ```
autoCapitalize="none"
``` |
| `53` | ```
editable={!loading}
``` |
| `54` | ```
autoCorrect={false}
``` |
| `55` | ```
/>
``` |
| `56` | ```
``` |
| `57` | ```
``` |
| `58` | ```
style={[styles.button, loading && styles.buttonDisabled]}
``` |
| `59` | ```
onPress={handleLogin}
``` |
| `60` | ```
disabled={loading}
``` |
| `61` | ```
>
``` |
| `62` | ```
{loading ? (
``` |
| `63` | ```
``` |
| `64` | ```
) : (
``` |
| `65` | ```
Login
``` |
| `66` | ```
)}
``` |
| `67` | ```
``` |
| `68` | ```
``` |
| `69` | ```
{!isConnected && (
``` |
| `70` | ```
``` |
| `71` | ```
No internet connection. Please check your network.
``` |
| `72` | ```
``` |
| `73` | ```
)}
``` |
| `74` | ```
``` |
| `75` | ```
``` |
| `76` | ```
Try: superhero1, superhero2, superhero3, superhero4, or superhero5
``` |
| `77` | ```
``` |
| `78` | ```
``` |
| `79` | ```
``` |
| `80` | ```
);
``` |
| `81` | ```
};
``` |
| `82` | ```
``` |
| `83` | ```
const styles = StyleSheet.create({
``` |
| `84` | ```
// ... styles remain the same ...
``` |
| `85` | ```
});
``` |
| `86` | ```
``` |
| `87` | ```
export default LoginScreen;
``` |
### 2\. Building the chat interface
| | |
| --- | --- |
| `1` | ```
import React from 'react';
``` |
| `2` | ```
import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
``` |
| `3` | ```
import { CometChatConversationsWithMessages } from '@cometchat/chat-uikit-react-native';
``` |
| `4` | ```
import { useAuth } from '../context/AuthContext';
``` |
| `5` | ```
``` |
| `6` | ```
const ChatScreen = ({ theme }) => {
``` |
| `7` | ```
const { logout, isConnected } = useAuth();
``` |
| `8` | ```
``` |
| `9` | ```
if (!isConnected) {
``` |
| `10` | ```
return (
``` |
| `11` | ```
``` |
| `12` | ```
``` |
| `13` | ```
No internet connection. Please check your network.
``` |
| `14` | ```
``` |
| `15` | ```
``` |
| `16` | ```
);
``` |
| `17` | ```
}
``` |
| `18` | ```
``` |
| `19` | ```
return (
``` |
| `20` | ```
``` |
| `21` | ```
``` |
| `22` | ```
theme={theme}
``` |
| `23` | ```
onSignOut={logout}
``` |
| `24` | ```
/>
``` |
| `25` | ```
``` |
| `26` | ```
);
``` |
| `27` | ```
};
``` |
| `28` | ```
``` |
| `29` | ```
const styles = StyleSheet.create({
``` |
| `30` | ```
container: {
``` |
| `31` | ```
flex: 1,
``` |
| `32` | ```
backgroundColor: '#fff',
``` |
| `33` | ```
},
``` |
| `34` | ```
errorContainer: {
``` |
| `35` | ```
flex: 1,
``` |
| `36` | ```
justifyContent: 'center',
``` |
| `37` | ```
alignItems: 'center',
``` |
| `38` | ```
padding: 20,
``` |
| `39` | ```
},
``` |
| `40` | ```
errorText: {
``` |
| `41` | ```
textAlign: 'center',
``` |
| `42` | ```
color: 'red',
``` |
| `43` | ```
},
``` |
| `44` | ```
});
``` |
| `45` | ```
``` |
| `46` | ```
export default ChatScreen;
``` |
Update **_App.js:_**
| | |
| --- | --- |
| `1` | ```
import React, { useEffect, useState } from 'react';
``` |
| `2` | ```
import { SafeAreaView, View, ActivityIndicator, StyleSheet } from 'react-native';
``` |
| `3` | ```
import { NavigationContainer } from '@react-navigation/native';
``` |
| `4` | ```
import { createNativeStackNavigator } from '@react-navigation/native-stack';
``` |
| `5` | ```
import { initializeCometChat } from './src/config/cometChat';
``` |
| `6` | ```
import { AuthProvider, useAuth } from './src/context/AuthContext';
``` |
| `7` | ```
import LoginScreen from './src/screens/LoginScreen';
``` |
| `8` | ```
import ChatScreen from './src/screens/ChatScreen';
``` |
| `9` | ```
import ErrorBoundary from './src/components/ErrorBoundary';
``` |
| `10` | ```
import { initializeCustomTheme } from './src/config/theme';
``` |
| `11` | ```
``` |
| `12` | ```
const Stack = createNativeStackNavigator();
``` |
| `13` | ```
``` |
| `14` | ```
const LoadingScreen = () => (
``` |
| `15` | ```
``` |
| `16` | ```
``` |
| `17` | ```
``` |
| `18` | ```
);
``` |
| `19` | ```
``` |
| `20` | ```
const Navigation = () => {
``` |
| `21` | ```
const { user, loading } = useAuth();
``` |
| `22` | ```
``` |
| `23` | ```
if (loading) {
``` |
| `24` | ```
return ;
``` |
| `25` | ```
}
``` |
| `26` | ```
``` |
| `27` | ```
return (
``` |
| `28` | ```
``` |
| `29` | ```
{!user ? (
``` |
| `30` | ```
``` |
| `31` | ```
name="Login"
``` |
| `32` | ```
component={LoginScreen}
``` |
| `33` | ```
options={{ headerShown: false }}
``` |
| `34` | ```
/>
``` |
| `35` | ```
) : (
``` |
| `36` | ```
``` |
| `37` | ```
name="Chat"
``` |
| `38` | ```
component={ChatScreen}
``` |
| `39` | ```
options={{
``` |
| `40` | ```
headerShown: false,
``` |
| `41` | ```
// Prevent going back to login screen
``` |
| `42` | ```
gestureEnabled: false,
``` |
| `43` | ```
}}
``` |
| `44` | ```
/>
``` |
| `45` | ```
)}
``` |
| `46` | ```
``` |
| `47` | ```
);
``` |
| `48` | ```
};
``` |
| `49` | ```
``` |
| `50` | ```
const App = () => {
``` |
| `51` | ```
const [isInitialized, setIsInitialized] = useState(false);
``` |
| `52` | ```
const [theme] = useState(() => initializeCustomTheme());
``` |
| `53` | ```
``` |
| `54` | ```
useEffect(() => {
``` |
| `55` | ```
const initialize = async () => {
``` |
| `56` | ```
try {
``` |
| `57` | ```
await initializeCometChat();
``` |
| `58` | ```
setIsInitialized(true);
``` |
| `59` | ```
} catch (error) {
``` |
| `60` | ```
console.error('Failed to initialize CometChat:', error);
``` |
| `61` | ```
// You might want to show an error message to the user here
``` |
| `62` | ```
}
``` |
| `63` | ```
};
``` |
| `64` | ```
``` |
| `65` | ```
initialize();
``` |
| `66` | ```
}, []);
``` |
| `67` | ```
``` |
| `68` | ```
if (!isInitialized) {
``` |
| `69` | ```
return ;
``` |
| `70` | ```
}
``` |
| `71` | ```
``` |
| `72` | ```
return (
``` |
| `73` | ```
``` |
| `74` | ```
``` |
| `75` | ```
``` |
| `76` | ```
``` |
| `77` | ```
``` |
| `78` | ```
``` |
| `79` | ```
``` |
| `80` | ```
``` |
| `81` | ```
``` |
| `82` | ```
);
``` |
| `83` | ```
};
``` |
| `84` | ```
``` |
| `85` | ```
const styles = StyleSheet.create({
``` |
| `86` | ```
container: {
``` |
| `87` | ```
flex: 1,
``` |
| `88` | ```
},
``` |
| `89` | ```
loadingContainer: {
``` |
| `90` | ```
flex: 1,
``` |
| `91` | ```
justifyContent: 'center',
``` |
| `92` | ```
alignItems: 'center',
``` |
| `93` | ```
backgroundColor: '#fff',
``` |
| `94` | ```
},
``` |
| `95` | ```
});
``` |
| `96` | ```
``` |
| `97` | ```
export default App;
``` |
## Adding advanced functionalities on top of the existing features
## 1\. Setting up notifications
Now that your chat functionality is up and running, it's time to enable notifications so users never miss a message. CometChat’s Notifications module allows you to set up and manage notifications across multiple providers directly from the dashboard, ensuring centralized control and effortless configuration. You can easily integrate push notifications with APNs and FCM, email notifications with SendGrid, and SMS alerts with Twilio, or use webhooks to connect with any provider of your choice.
You can also enable notification preferences for your users, allowing them to customize when and how they receive notifications. Additionally, our customizable templates let you tailor notifications to your app’s tone and branding.
## 2\. Setting up advanced moderation
Next, we’ll explore CometChat’s powerful moderation capabilities, which you can enable using the CometChat SDK. These features are designed to help maintain a safe, respectful environment for users and allow you to moderate content in real time.
### Front-end moderation
- User reporting
Empower your users to report inappropriate behavior or content directly from the chat interface.
- User blocking
Allow users to block others, preventing unwanted interactions.
- Message flagging
Enables users to flag specific messages for review by administrators.
### Moderation queue:
Use our centralized moderation dashboard to give app admins an organized view of flagged messages, reported users, and blocked content. From this dashboard, admins can take real-time action on flagged content, issue user bans or warnings, and escalate issues for higher-level review, all in one place.
### Proactive content moderation:
Use our advanced AI filters to prevent harmful content from entering your chat. These filters automatically screen every message exchanged in your app for violations defined by you and take action based on the moderation rules you’ve set up with our rules engine.
CometChat’s rules engine lets you create custom rules to address common moderation scenarios. You can define which filters to use for identifying violations and specify how to handle them, such as blocking a user or removing them from a group. This helps you keep your app free from:
- Spam
Block unwanted or malicious content.
- Harassment
Automatically filter harmful messages or behavior.
- Image and Video Moderation
Analyze and filter media content to ensure it follows guidelines
## 3\. Using Webhooks to extend your chat app's functionality
Leverage webhooks to trigger actions based on key events like message exchanges, user interactions, group changes, and call activities. You can use them to automate tasks, integrate with external services, and optimize the chat experience in your app. You can configure these webhooks directly from the CometChat dashboard.
Here’s a list of available webhooks:
| Category | Webhook Event |
| --- | --- |
| Message | Message Sent, Edited, Deleted, Reacted, Mentioned, Delivered, Read |
| User | User Blocked, Unblocked, Connection Status Changed |
| Group | Group Created, Member Added, Member Left, Group Owner Changed, Member Kicked |
| Calling | Call Started, Call Ended, Call Initiated, Participant Joined, Participant Left, Call Recording Generated |
## Customizing Your Chat Interface
One of the key advantages of using CometChat's UI Kit is the ability to easily customize the appearance and behavior of your chat interface. In this section, we'll explore how to customize your chat app at both the theme level and component level.
### Theme Level Customization
CometChat's theme system allows you to make app-wide changes to colors, typography, and other visual elements. The theme consists of two main components:
#### 1\. Palette: Controls the app's color scheme
The palette defines colors for various elements, with built-in support for light and dark modes to ensure seamless theme switching. Key color categories include:
- **Primary Colors**: Represent your main brand identity.
- **Secondary Colors**: Complement and support primary colors.
- **Accent Colors**: Highlight important elements for emphasis.
- **Background Colors**: Define the appearance of the app's background.
- **Error Colors**: Indicate error states and messages.
Each color category can be configured with separate values for light and dark modes.
#### 2\. Typography: Defines text styles and appearances
Typography allows you to customize the text across your app for different use cases. The key text styles include:
- **Heading**: For main headings and prominent titles.
- **Name**: Styled for usernames and contact names.
- **Title (1 & 2**): Applied to section titles and headers.
- **Subtitle (1 & 2**): For supporting text under titles.
- **Text (1 & 2)**: General text styles for content and messages.
- **Caption (1 & 2)**: For smaller, supplementary text elements.
All these customizations can be applied through the theme configuration, ensuring consistent styling across your entire chat application.
### Setting Up Custom Theme
Create a new file **_src/config/theme.js_** to manage your theme customizations:
| | |
| --- | --- |
| `1` | ```
// src/config/theme.js
``` |
| `2` | ```
``` |
| `3` | ```
import { CometChatTheme } from '@cometchat/chat-uikit-react-native';
``` |
| `4` | ```
``` |
| `5` | ```
export const initializeCustomTheme = () => {
``` |
| `6` | ```
// Create a new theme instance
``` |
| `7` | ```
const customTheme = new CometChatTheme({});
``` |
| `8` | ```
``` |
| `9` | ```
// Customize primary colors (e.g., main brand colors)
``` |
| `10` | ```
customTheme.palette.setPrimary({
``` |
| `11` | ```
light: "YOUR_PRIMARY_COLOR_LIGHT", // e.g., "#2196F3"
``` |
| `12` | ```
dark: "YOUR_PRIMARY_COLOR_DARK" // e.g., "#1976D2"
``` |
| `13` | ```
});
``` |
| `14` | ```
``` |
| `15` | ```
// Customize secondary colors (e.g., accent or complementary colors)
``` |
| `16` | ```
customTheme.palette.setSecondary({
``` |
| `17` | ```
light: "YOUR_SECONDARY_COLOR_LIGHT", // e.g., "#FF4081"
``` |
| `18` | ```
dark: "YOUR_SECONDARY_COLOR_DARK" // e.g., "#F50057"
``` |
| `19` | ```
});
``` |
| `20` | ```
``` |
| `21` | ```
// Customize accent colors (used for highlights and emphasis)
``` |
| `22` | ```
customTheme.palette.setAccent({
``` |
| `23` | ```
light: "YOUR_ACCENT_COLOR_LIGHT", // e.g., "#00BCD4"
``` |
| `24` | ```
dark: "YOUR_ACCENT_COLOR_DARK" // e.g., "#0097A7"
``` |
| `25` | ```
});
``` |
| `26` | ```
``` |
| `27` | ```
// Optional: Customize background colors
``` |
| `28` | ```
customTheme.palette.setBackground({
``` |
| `29` | ```
light: "YOUR_BACKGROUND_COLOR_LIGHT", // e.g., "#FFFFFF"
``` |
| `30` | ```
dark: "YOUR_BACKGROUND_COLOR_DARK" // e.g., "#121212"
``` |
| `31` | ```
});
``` |
| `32` | ```
``` |
| `33` | ```
// Optional: Customize typography
``` |
| `34` | ```
customTheme.typography.setName({
``` |
| `35` | ```
fontSize: "YOUR_FONT_SIZE", // e.g., 16
``` |
| `36` | ```
fontWeight: "YOUR_FONT_WEIGHT" // e.g., "600"
``` |
| `37` | ```
});
``` |
| `38` | ```
``` |
| `39` | ```
// Optional: Customize other text styles
``` |
| `40` | ```
customTheme.typography.setText1({
``` |
| `41` | ```
fontSize: "YOUR_TEXT_SIZE", // e.g., 14
``` |
| `42` | ```
fontWeight: "YOUR_TEXT_WEIGHT" // e.g., "400"
``` |
| `43` | ```
});
``` |
| `44` | ```
``` |
| `45` | ```
return customTheme;
``` |
| `46` | ```
};
``` |
### Applying the custom theme
Update your **_App.js_** to initialize and apply the custom theme:
| | |
| --- | --- |
| `1` | ```
// App.js
``` |
| `2` | ```
``` |
| `3` | ```
import React, { useEffect, useState } from 'react';
``` |
| `4` | ```
import { SafeAreaView, View, ActivityIndicator } from 'react-native';
``` |
| `5` | ```
import { initializeCometChat } from './src/config/cometChat';
``` |
| `6` | ```
import { initializeCustomTheme } from './src/config/theme';
``` |
| `7` | ```
import { AuthProvider, useAuth } from './src/context/AuthContext';
``` |
| `8` | ```
import LoginScreen from './src/screens/LoginScreen';
``` |
| `9` | ```
import ChatScreen from './src/screens/ChatScreen';
``` |
| `10` | ```
``` |
| `11` | ```
const LoadingScreen = () => (
``` |
| `12` | ```
``` |
| `13` | ```
``` |
| `14` | ```
``` |
| `15` | ```
);
``` |
| `16` | ```
``` |
| `17` | ```
const ChatApp = () => {
``` |
| `18` | ```
const { user, loading, checkAuthState } = useAuth();
``` |
| `19` | ```
const [theme] = useState(() => initializeCustomTheme());
``` |
| `20` | ```
``` |
| `21` | ```
useEffect(() => {
``` |
| `22` | ```
checkAuthState();
``` |
| `23` | ```
}, []);
``` |
| `24` | ```
``` |
| `25` | ```
if (loading) {
``` |
| `26` | ```
return ;
``` |
| `27` | ```
}
``` |
| `28` | ```
``` |
| `29` | ```
if (!user) {
``` |
| `30` | ```
return ;
``` |
| `31` | ```
}
``` |
| `32` | ```
``` |
| `33` | ```
return ;
``` |
| `34` | ```
};
``` |
| `35` | ```
``` |
| `36` | ```
const App = () => {
``` |
| `37` | ```
const [isInitialized, setIsInitialized] = useState(false);
``` |
| `38` | ```
``` |
| `39` | ```
useEffect(() => {
``` |
| `40` | ```
const initialize = async () => {
``` |
| `41` | ```
const success = await initializeCometChat();
``` |
| `42` | ```
setIsInitialized(success);
``` |
| `43` | ```
};
``` |
| `44` | ```
``` |
| `45` | ```
initialize();
``` |
| `46` | ```
}, []);
``` |
| `47` | ```
``` |
| `48` | ```
if (!isInitialized) {
``` |
| `49` | ```
return ;
``` |
| `50` | ```
}
``` |
| `51` | ```
``` |
| `52` | ```
return (
``` |
| `53` | ```
``` |
| `54` | ```
``` |
| `55` | ```
``` |
| `56` | ```
);
``` |
| `57` | ```
};
``` |
| `58` | ```
``` |
| `59` | ```
export default App;
``` |
## Component customization
### Conversations component customisation
The Conversations component displays all conversations related to the currently logged-in user. To ensure the component aligns with your app's design and branding, you can easily customize its appearance by adjusting the properties exposed by the **ConversationsStyle** class. Below, you'll find a table outlining all the properties you can modify to tailor the component to your specific needs.
| Category | Customizable Elements | Description |
| --- | --- | --- |
| Layout & Appearance | List Item View | Height, width, background colors, hover states |
| Layout & Appearance | Avatar Display | Shape, size, border radius, default icons |
| Layout & Appearance | Status Indicators | Size, color, position, visibility |
| Content Display | Conversation Title | Font style, size, color, formatting |
| Content Display | Last Message Preview | Length, style, condensed view options |
| Content Display | Timestamps | Format, position, localization |
| Interactive Elements | Search Bar | Visibility, placeholder text, icon customization |
| Interactive Elements | Selection Mode | Single/multi select, selection indicators |
| Interactive Elements | Empty States | Custom messages, actions, layouts |
For more advanced customization, you can define custom views within the Conversations component. This allows you to fully control and tailor each element of the interface, such as layouts, views, and UI elements, ensuring that the component perfectly matches your app's overall aesthetics and functionality. .
#### Messages component customization
The **Messages** component is a central feature of our chat interface, responsible for rendering the area where messages are exchanged between users and groups. It plays a key role in managing the real-time flow of messages within the app. Below, you'll find a table outlining all the properties you can modify to tailor the messages component to your specific needs
| Category | Customizable Elements | Description |
| --- | --- | --- |
| Message Bubbles | Layout | Size, shape, padding, margins |
| Message Bubbles | Styling | Colors, borders, shadows |
| Message Bubbles | Alignment | Left/right positioning, spacing |
| Message Types | Text Messages | Font styles, sizes, colors |
| Message Types | Media Messages | Preview size, player controls |
| Message Types | Link Previews | Size, layout, information display |
| Interactive Features | Reactions | Position, size, layout |
| Interactive Features | Thread Replies | Thread view, indicators |
| Interactive Features | Message Actions | Custom actions, menus |
| Metadata Display | Timestamps | Format, position |
| Metadata Display | Read Receipts | Style, position, indicators |
| Metadata Display | Typing Indicators | Animation, position |
## Testing Your Chat App
Before you deploy your project to production, it's important to properly structure, test, and verify that everything works as expected. In this section, we'll walk you through how to run the project locally, test key features, and ensure that everything is functioning properly before moving to deployment.
Your final project structure should look like this
## Testing checklist
### 1\. Configuration Check
Verify CometChat credentials in **_cometChat.js_**
Ensure all required permissions are in place for both platforms
### 2\. Functional Testing
Test the following flows to ensure your chat app is working correctly:
#### Authentication Flow
- Try logging in with valid test user credentials
- Verify error handling with invalid credentials
- Check if login session persists after app restart
#### Chat Functionality
Login with two different test users on different devices
- Start a conversation between these users
- Verify real-time message delivery
- Test media sharing capabilities
- Check user online/offline status updates
#### UI/Theme Verification
- Verify your custom theme is applied correctly
- Test on both iOS and Android devices
- Check all interactive elements (buttons, inputs)
## Deployment Preparation
### Android Release
#### Step 1: Generate Release Keystore
| | |
| --- | --- |
| `1` | ```
keytool -genkey -v -keystore android/app/release.keystore \
``` |
| `2` | ```
-alias your-key-alias \
``` |
| `3` | ```
-keyalg RSA \
``` |
| `4` | ```
-keysize 2048 \
``` |
| `5` | ```
-validity 10000
``` |
#### Step 2: Configure Gradle Properties
Create or update **_android/gradle.properties_**
| | |
| --- | --- |
| `1` | ```
MYAPP_RELEASE_STORE_FILE=release.keystore
``` |
| `2` | ```
MYAPP_RELEASE_KEY_ALIAS=your-key-alias
``` |
| `3` | ```
MYAPP_RELEASE_STORE_PASSWORD=*****
``` |
| `4` | ```
MYAPP_RELEASE_KEY_PASSWORD=*****
``` |
#### Step 3: Update build.gradle
Edit **_android/app/build.gradle_**:
| | |
| --- | --- |
| `1` | ```
android {
``` |
| `2` | ```
...
``` |
| `3` | ```
signingConfigs {
``` |
| `4` | ```
release {
``` |
| `5` | ```
storeFile file(MYAPP_RELEASE_STORE_FILE)
``` |
| `6` | ```
storePassword MYAPP_RELEASE_STORE_PASSWORD
``` |
| `7` | ```
keyAlias MYAPP_RELEASE_KEY_ALIAS
``` |
| `8` | ```
keyPassword MYAPP_RELEASE_KEY_PASSWORD
``` |
| `9` | ```
}
``` |
| `10` | ```
}
``` |
| `11` | ```
buildTypes {
``` |
| `12` | ```
release {
``` |
| `13` | ```
...
``` |
| `14` | ```
signingConfig signingConfigs.release
``` |
| `15` | ```
shrinkResources true
``` |
| `16` | ```
minifyEnabled true
``` |
| `17` | ```
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
``` |
| `18` | ```
}
``` |
| `19` | ```
}
``` |
| `20` | ```
}
``` |
#### Step 4: Create Final Release Build
| | |
| --- | --- |
| `1` | ```
cd android
``` |
| `2` | ```
./gradlew bundleRelease # For Play Store
``` |
| `3` | ```
./gradlew assembleRelease # For APK
``` |
The release APK will be in **_android/app/build/outputs/apk/release/_**
### iOS Release
#### Xcode Configuration
- Open Xcode
- Select your project
- Set Build Configuration to Release
- Update version and build numbers
- Configure signing certificates
#### Archive and Upload
- Select Generic iOS Device as the build target
- Choose Product > Archive
- In Archives window, click "Distribute App"
- Follow App Store distribution workflow
## Final Deployment Checklist
- Verify production CometChat credentials
- Remove any test API keys
- Configure proper error reporting
Haris Kumar
Lead Content Strategist , CometChat
Haris brings nearly half a decade of expertise in B2B SaaS content marketing, where he excels at developing strategic content that drives engagement and supports business growth. His deep understanding of the SaaS landscape allows him to craft compelling narratives that resonate with target audiences. Outside of his professional pursuits, Haris enjoys reading, trying out new dishes and watching new movies!