npm package: @harjot23/react-native-chat-module
Description: A comprehensive, plug-and-play chat module for React Native applications with real-time messaging, file attachments, and permission handling. Now with simplified direct axios integration - no interceptor setup required!
Author: Harbor Team
Latest version: 1.2.1

# 💬 @harjot23/react-native-chat-module

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

[![npm version](https://badge.fury.io/js/%40harjot23%2Freact-native-chat-module.svg)](https://www.npmjs.com/package/@harjot23/react-native-chat-module)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Downloads](https://img.shields.io/npm/dt/@harjot23/react-native-chat-module.svg)](https://www.npmjs.com/package/@harjot23/react-native-chat-module)

> 🎉 **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

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

### Install peer dependencies:

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

### iOS Only:
```bash
cd ios && pod install && cd ..
```

---

## 🚀 Quick Start

### 1. Add Screens to Navigation

```javascript
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

```javascript
// 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

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

---

## 📖 Full Documentation

- **[Integration Guide](./INTEGRATION_GUIDE.md)** - Complete setup instructions
- **[Example Usage](./EXAMPLE_USAGE.md)** - Real-world code examples
- **[Module README](./MODULE_README.md)** - Detailed features and architecture

---

## 🔧 Configuration

All settings are configurable via `config/chatConfig.js`:

```javascript
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`):
```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`):
```xml
<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

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

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

### Custom Hooks

```javascript
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](./LICENSE) file for details

---

## 🐛 Issues & Support

- **Issues**: [Report a bug](https://bitbucket.org/weexcel1/iprofit_app_v073/issues)
- **Documentation**: See [INTEGRATION_GUIDE.md](./INTEGRATION_GUIDE.md)
- **Examples**: See [EXAMPLE_USAGE.md](./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

```javascript
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](https://bitbucket.org/weexcel1/iprofit_app_v073) if you find this useful!