React Native Chat App with Twilio

This is a React Native application for chatting built with Twilio and the React Native Gifted Chat library. It allows users to engage in real-time text conversations after joining the channel

Features

• Real-time chat with multiple users
• User authentication with Twilio
• Sent and received message indicators
• Typing indicators
• Error handling for failed messages
• Loading placeholders for a better user experience
• Flash messages for important notifications

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js installed on your development machine
• React Native CLI installed globally
• Twilio account with Chat API credentials (I have used the render.com to host my server for creating the token for the Twilio)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/your-chat-app.git
   cd your-chat-app

2. Install the dependencies:

   npm install && npm run android 

3. Configure Twilio in ENV varibles:

   • Create a .env file in the project root and add your Twilio Chat Service SID and Twilio Account SID. You can find these in your Twilio console:

     TWILIO_CHAT_SERVICE_SID=your_chat_service_sid
     TWILIO_ACCOUNT_SID=your_account_sid
     TWILIO_AUTH_TOKEN=your_auth_token
     

4. You can check the node server code in this repo https://github.com/pramod-12345/twilio_chat_app_backend and setup your backend server locally then

     npm intall &&  node index.js 

Usage

1. Enter your username and join a channel.
2. Start a new channel or join an existing one.
3. Enjoy real-time chatting with your friends!

Dependencies

• Twilio - Twilio Chat SDK for real-time messaging.
• React Native Gifted Chat - A complete chat UI library for React Native.
• React Native Skeleton Placeholder - Create loading skeleton placeholders for improved user experience.
• React Native Flash Message - Show flash messages for important notifications.

ScreenShots

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

You can copy and paste this entire block into your project's README.md file and then customize it with your project-specific information.