Comify React Native Chat

A modern, feature-rich chat interface for React Native applications, powered by Comify.

Features

• 💬 Real-time messaging
• 📎 File attachments (images, documents)
• 🎨 Customizable themes
• 🔒 Secure authentication
• 📱 Cross-platform support (iOS & Android)
• ⚡ Performance optimized

Installation

# Install the package
npm install comify-react-native-chat
# or
yarn add comify-react-native-chat

# Install and link required dependencies
npm install @react-native-community/netinfo
# or
yarn add @react-native-community/netinfo

# For iOS, install pods
cd ios && pod install && cd ..

Important Note

This package requires @react-native-community/netinfo. Make sure it's properly linked in your React Native application.

Dependencies

This package requires the following peer dependencies:

{
  "@expo/vector-icons": ">=13.0.0",
  "react": ">=16.8.0",
  "react-native": ">=0.60.0"
}

Quick Start

import { Chat } from 'comify-react-native-chat';

const YourChatComponent = () => {
  return (
    <Chat
      licenseKey="your-license-key"
      user={{
        id: 'user123',
        name: 'John Doe'
      }}
      onSend={(messages) => {
        // Handle sending messages
      }}
      messages={[
        // Your messages array
      ]}
    />
  );
};

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | licenseKey | string | Yes | Your Comify license key | | user | object | Yes | Current user information | | messages | array | Yes | Array of messages to display | | onSend | function | Yes | Callback when sending messages | | title | string | No | Chat title | | onBackPress | function | No | Callback when back button is pressed | | placeholder | string | No | Input placeholder text | | onInputTextChanged | function | No | Callback when input text changes | | theme | object | No | Custom theme options | | sendButtonColor | string | No | Color of the send button |

Message Object Structure

interface Message {
  _id: string | number;
  text: string;
  createdAt: Date | number;
  user: {
    _id: string | number;
    name: string;
    avatar?: string;
  };
  image?: string;
  video?: string;
  audio?: string;
  system?: boolean;
  sent?: boolean;
  received?: boolean;
}

Customization

Theme

<Chat
  theme={{
    colors: {
      primary: '#feb400',
      secondary: '#f1f1f1',
      background: '#ffffff',
      text: '#1a1a1a'
    },
    fonts: {
      regular: 'YourFontFamily-Regular',
      bold: 'YourFontFamily-Bold'
    }
  }}
/>

Attachments

The chat component supports various types of attachments:

• Images (JPEG, PNG)
• Documents (PDF, DOC)
• Audio files
• Video files

Security

All messages and files are securely transmitted using AWS Amplify's storage service.

Example

import React, { useState } from 'react';
import { Chat } from 'comify-react-native-chat';

const ChatScreen = () => {
  const [messages, setMessages] = useState([]);

  const handleSend = (newMessages) => {
    setMessages((prevMessages) => [...newMessages, ...prevMessages]);
  };

  return (
    <Chat
      licenseKey="your-license-key"
      messages={messages}
      onSend={handleSend}
      user={{
        _id: '123',
        name: 'User Name'
      }}
      title="Chat Room"
      placeholder="Type a message..."
      theme={{
        colors: {
          primary: '#feb400'
        }
      }}
    />
  );
};

export default ChatScreen;

Contributing

We welcome contributions! Please see our contributing guidelines for details.

License

MIT © Comify