💬 @harjot23/react-native-chat-module

A comprehensive, production-ready chat module for React Native with real-time messaging, file attachments, and advanced permission handling.

🎉 FREE and Open Source - No subscription needed!

✨ Features

• ✅ Real-time Messaging - Automatic polling with configurable intervals
• ✅ File Attachments - Images, PDFs, documents support
• ✅ Camera Integration - Take photos directly in chat
• ✅ Gallery Picker - Select images from device
• ✅ Document Picker - Share any file type
• ✅ Permission Management - Smart permission handling with settings navigation
• ✅ Theme Support - Light/Dark mode
• ✅ Keyboard Aware - Auto-scroll when keyboard opens
• ✅ Redux Integration - State management included
• ✅ Cross-platform - iOS & Android support

📦 Installation

npm install @harjot23/react-native-chat-module
# or
yarn add @harjot23/react-native-chat-module

Install peer dependencies:

npm install react-native-image-crop-picker react-native-document-picker react-native-pdf react-native-vector-icons axios

iOS Only:

cd ios && pod install && cd ..

🚀 Quick Start

1. Add Screens to Navigation

import { ChatScreen, ChatListingScreen } from '@harjot23/react-native-chat-module';

<Stack.Navigator>
  <Stack.Screen name="ChatListingScreen" component={ChatListingScreen} />
  <Stack.Screen name="ChatScreen" component={ChatScreen} />
</Stack.Navigator>

2. Configure API

// config/chatConfig.js
export const CHAT_API_CONFIG = {
  baseUrl: 'https://your-api.com/api/',
  endpoints: {
    sendMessage: 'User/SendThreadReply',
    getMessages: 'User/GetAllThreadList',
    getNotifications: 'User/GetNotifications',
  },
};

3. Open a Chat

navigation.navigate('ChatScreen', {
  selectedUser: {
    id: user.id,
    name: user.name,
    email: user.email,
  },
  isNewChat: true,
  senderUserId: currentUserId,
  receiverUsersIds: user.id,
});

📖 Full Documentation

• Integration Guide - Complete setup instructions
• Example Usage - Real-world code examples
• Module README - Detailed features and architecture

🔧 Configuration

All settings are configurable via config/chatConfig.js:

import { CHAT_API_CONFIG, POLLING_CONFIG, FEATURE_FLAGS } from '@chat-module/react-native-chat';

// Customize polling
POLLING_CONFIG.pollingInterval = 10000; // 10 seconds

// Enable/disable features
FEATURE_FLAGS.enableCamera = true;
FEATURE_FLAGS.enableGallery = true;
FEATURE_FLAGS.enableDocuments = true;

📱 Permissions Required

Android (AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

iOS (Info.plist):

<key>NSCameraUsageDescription</key>
<string>We need camera access to take photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to select photos</string>

🎨 Customization

Theme Integration

import { useTheme } from '@harjot23/react-native-chat-module';

// Use in your components
const { theme, themeColors } = useTheme();

Custom Hooks

import { useChatMessages } from '@harjot23/react-native-chat-module';

const { messages, loading, refetch } = useChatMessages(senderId, receiverId, {
  auto: true,
  pollingInterval: 5000,
});

📋 Requirements

• React Native >= 0.70.0
• React >= 18.0.0
• @react-navigation/native >= 6.0.0
• react-redux >= 8.0.0
• iOS >= 12.0
• Android >= API 21 (Lollipop)

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🐛 Issues & Support

• Issues: Report a bug
• Documentation: See INTEGRATION_GUIDE.md
• Examples: See EXAMPLE_USAGE.md

💡 Why This Module?

• ✅ Production Ready - Battle-tested in real apps
• ✅ Fully Documented - Complete guides and examples
• ✅ Easy Integration - Works out of the box
• ✅ Highly Configurable - Customize everything
• ✅ Active Support - Regular updates and fixes

🎉 Quick Example

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ChatScreen, ChatListingScreen } from '@harjot23/react-native-chat-module';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ChatListingScreen" component={ChatListingScreen} />
        <Stack.Screen name="ChatScreen" component={ChatScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Made with ❤️ by Harbor Team

⭐ Star us on Bitbucket if you find this useful!