![](https://private-user-images.githubusercontent.com/102239873/273226235-9caa0d06-cc8b-4cd0-87a8-e6b28dbe09d1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0OTA3MDcsIm5iZiI6MTcyNDQ5MDQwNywicGF0aCI6Ii8xMDIyMzk4NzMvMjczMjI2MjM1LTljYWEwZDA2LWNjOGItNGNkMC04N2E4LWU2YjI4ZGJlMDlkMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQwOTA2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNzc2NGNhYWM5YzQzNTczMTFjOTZjOWFjMWQ2ZjE2MmYyZWNiOTNhNWQwYTZhYjkxNmMzZDY1MzU1ODk0ZThjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.wST-KbVpIh27dtj1DKMWSUiPDY0fOWhkHqsrKoUbbPw)
![](https://private-user-images.githubusercontent.com/102239873/273226417-dc7abcd8-0c61-43b9-844d-4856218c5b47.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0OTA3MDcsIm5iZiI6MTcyNDQ5MDQwNywicGF0aCI6Ii8xMDIyMzk4NzMvMjczMjI2NDE3LWRjN2FiY2Q4LTBjNjEtNDNiOS04NDRkLTQ4NTYyMThjNWI0Ny5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQwOTA2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MmNiNmZmZTJmMjlkODZhZmM2NTY3MWFiZDAzMzBjYzVlOGI4NTViZDllZmI0MmMwMGQzMzZjYzMwYWUyNDk0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.WF6oJrPpOJmWeUSiHTOXaH1RwF-yJpP3Yie1FJJhwxk)
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
- 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
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)
-
Clone the repository:
git clone https://github.com/your-username/your-chat-app.git cd your-chat-app
-
Install the dependencies:
npm install && npm run android
-
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
-
-
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
- Enter your username and join a channel.
- Start a new channel or join an existing one.
- Enjoy real-time chatting with your friends!
- 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.
![](https://private-user-images.githubusercontent.com/102239873/273935227-192c9c60-2368-4f2a-ab3e-68092f86385c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0OTA3MDcsIm5iZiI6MTcyNDQ5MDQwNywicGF0aCI6Ii8xMDIyMzk4NzMvMjczOTM1MjI3LTE5MmM5YzYwLTIzNjgtNGYyYS1hYjNlLTY4MDkyZjg2Mzg1Yy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQwOTA2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNjg4OTQwZWQ5MTM1NGRkMTViZDk2MTUzZTNhZGFmZWM5YjUwZWNiZmU5M2ExYTI2MjdkYzc5MmM4M2QzYTU0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ojEmXCDaaD19dF9UcqP2ajWSEMsbiXtwWH7gyTsyPUg)
![](https://private-user-images.githubusercontent.com/102239873/273229564-d7404efb-dbb8-46e9-83e0-dd8dc0943414.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0OTA3MDcsIm5iZiI6MTcyNDQ5MDQwNywicGF0aCI6Ii8xMDIyMzk4NzMvMjczMjI5NTY0LWQ3NDA0ZWZiLWRiYjgtNDZlOS04M2UwLWRkOGRjMDk0MzQxNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQwOTA2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zNzJkMWZlN2Y1ZDAwODM3MjcxZTRhZTA3YjRhYjBiMmY3ZTU5MDE5YTc5MWUyZDAzNDQ5YTFmNDdmZWExNmJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.TUIPuvCQ7OyGeBMqg8tRGx7twV7sjrVt4alzGUzDmpU)
![](https://private-user-images.githubusercontent.com/102239873/273229550-5541c89a-b2ce-4f2c-84f5-9970f0b0f399.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0OTA3MDcsIm5iZiI6MTcyNDQ5MDQwNywicGF0aCI6Ii8xMDIyMzk4NzMvMjczMjI5NTUwLTU1NDFjODlhLWIyY2UtNGYyYy04NGY1LTk5NzBmMGIwZjM5OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQwOTA2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mMmVlMmZjMmY5YmViMjgzMTM5MDQ0ZmI2OWMzMDkzZjY1ODljNTJjOTBmOGUwMjliYWYxNjUzOWE0NGZiNDkzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Hqnjr0iFDyIPXTjFnehEOeMjkWMvPDZAwf1ZmHabbp8)
![](https://private-user-images.githubusercontent.com/102239873/273229527-d4b0ee6b-a50a-4866-931c-747669f5aae2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0OTA3MDcsIm5iZiI6MTcyNDQ5MDQwNywicGF0aCI6Ii8xMDIyMzk4NzMvMjczMjI5NTI3LWQ0YjBlZTZiLWE1MGEtNDg2Ni05MzFjLTc0NzY2OWY1YWFlMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQwOTA2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMDQwZWFiZTQ5NjFkZTFkZTFlODZjZDI1YjZkYmE5YTYzYTdiODI1YTA4ZTJjZDgxMmZmMmVlNWE2Y2Y3MGE5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.NP_Nb9LP7AAh8vWnFpin99j_UfOMKn0bZl2WjNV7ACc)
This project is licensed under the MIT License - see the LICENSE file for details.
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.