React Native Chat App

Introduction • Features • Installation Guide • Building Guide • Screenshots • Credits • License • Contributors

---

ℹ️ Introduction

React Native Chat App is a real-time chat application built using React Native and Expo, powered by Firebase (Web v9) for authentication and real-time messaging.

• For the live demo video see Demo.mp4

ReactNativeChat-Live-Demo.mp4

Note

See screenshots below for a preview.

---

⚡ Features

Feature	Description
Signup and Login	Firebase Email/Password sign-in method. Allow users to sign up using their email address and password
Send Text Message	Essential for casual messaging
Send Picture	You can send pictures without losing quality
Group Chat	You can send your messages to multiple people at the same time
Delete Chat	Hold and select chats to delete them
Delete Account	Delete your account from settings
Real Time Chat	Chats update instantly with new messages
Users List	Registered users sorted alphabetically
Note to Self	Create personal notes by messaging yourself

---

💾 Installation Guide

To clone and run this application, you'll need Git and Node.js (with npm).

# Clone this repository
git clone https://github.com/Ctere1/react-native-chat
cd react-native-chat

# Install dependencies
npm install

# Start the Expo development server
npx expo start

Tip

Install Expo Go on your mobile device to test the app instantly.

Warning

Don't forget to set up your .env file for Firebase connection. See Firebase docs or this comment.

---

🏗️ Building Guide

To build this application for production (e.g., APK for Android):

1. Set up environment variables:
   Create a .env file with your Firebase config. Push it to EAS environment:

   eas secret:push --scope project --env-file .env

2. Build the APK (Android):

   eas build -p android --profile preview

   This will use the preview profile in eas.json.

Note

Environment variables in .env are used by Expo CLI locally.
For EAS Build, define variables in your eas.json build profile for best results.

Local Build:

# For android
npm run android

# For ios
npm run ios

---

🪟 Screenshots

Login & Signup

Login	Signup

Chats & Users

Chats	Users	Group Chat	Delete Chats

Settings & More

Settings	Profile	Help	Account

Chat Experience

Emoji Panel	Note to Self	Main Chat Screen	Chat Info

Other

Message Indicator

---

📝 Credits

This software uses the following packages:

• Expo
• React
• React Native
• Firebase
• react-native-gifted-chat
• react-native-emoji-modal

---

© License

---

📈 Star History

---

📌 Contributors