Instachatty - React Native Messenger App

A full-featured, cross-platform messenger application built with React Native, Firebase, and Redux. Send texts, photos, videos, and audio messages to your friends in private or group chats.

📱 Features

• Private Messaging - One-on-one conversations with friends
• Group Chats - Create and manage group conversations
• Rich Media Support - Send photos, videos, and audio messages
• Push Notifications - Stay updated with real-time notifications
• Authentication - Multiple sign-in options (SMS, Email, Google, Facebook, Apple)
• User Profiles - Customizable user profiles with avatars
• Social Features - Friends list and user discovery
• Location Sharing - Share your location with contacts
• Mentions - Tag users in conversations
• Dark Mode - Automatic theme switching support
• Internationalization - Multi-language support (English, French, Arabic)
• User Reporting - Report inappropriate content
• Media Processing - Image cropping, video thumbnails, and compression

🚀 Getting Started

Prerequisites

• Node.js (v12 or higher)
• npm or yarn
• React Native CLI
• Xcode (for iOS development)
• Android Studio (for Android development)
• CocoaPods (for iOS dependencies)

Installation

1. Clone the repository

   git clone https://github.com/superdev947/chatapp.git
   cd chatapp

2. Install dependencies

   npm install

3. iOS Setup

   cd ios
   pod install
   cd ..

4. Configure Firebase

   • Add your google-services.json to android/app/
   • Add your GoogleService-Info.plist to ios/Messenger/
   • Update Firebase configuration in src/config.js

5. Configure OAuth

   • Update facebookIdentifier in src/config.js
   • Update webClientId for Google Sign-In in src/config.js

Running the App

iOS

npm run ios

Android

npm run android

Start Metro Bundler

npm start

🛠️ Tech Stack

Core

• React Native 0.64.2 - Cross-platform mobile framework
• React 17.0.1 - UI library
• Redux - State management
• Redux Toolkit - Simplified Redux logic

Backend & Authentication

• Firebase - Backend services (Auth, Messaging, Cloud Firestore)
• Socket.io - Real-time communication

Navigation

• React Navigation 5 - Navigation library with stack, tab, and drawer navigators

UI Components

• React Native Elements - Pre-built UI components
• React Native Vector Icons - Icon library
• React Native UI Lib - UI components and utilities
• Expo Modules - Camera, Image Picker, Location, AV

Media Handling

• React Native Image Crop Picker - Image selection and cropping
• React Native Fast Image - Optimized image loading
• React Native Video - Video playback
• React Native FFmpeg - Video processing

Authentication Providers

• Google Sign-In
• Facebook Login
• Apple Authentication
• Firebase Auth (Email/Password, Phone)

Other Key Libraries

• Formik & Yup - Form handling and validation
• Moment.js - Date manipulation
• i18n-js - Internationalization
• Lodash - Utility functions

📁 Project Structure

chatapp/
├── android/                 # Android native code
├── ios/                     # iOS native code
├── assets/                  # Static assets (fonts, icons)
├── src/
│   ├── components/          # Reusable UI components
│   ├── Core/                # Core modules
│   │   ├── api/             # API layer (Firebase, local)
│   │   ├── chat/            # Chat functionality
│   │   ├── helpers/         # Utility functions
│   │   ├── localization/    # i18n configuration
│   │   ├── location/        # Location services
│   │   ├── mentions/        # User mentions
│   │   ├── notifications/   # Push notifications
│   │   ├── onboarding/      # User onboarding flow
│   │   ├── profile/         # User profiles
│   │   ├── socialgraph/     # Friend connections
│   │   ├── ui/              # Core UI components
│   │   ├── user-reporting/  # Content reporting
│   │   └── users/           # User management
│   ├── navigations/         # Navigation configuration
│   ├── redux/               # Redux store and slices
│   ├── screens/             # App screens
│   ├── Translations/        # Translation files
│   ├── utils/               # Utility functions
│   ├── config.js            # App configuration
│   └── DynamicAppStyles.js  # Theme and styling
├── App.js                   # Root component
└── package.json             # Dependencies

⚙️ Configuration

Update src/config.js to customize:

• App identifier
• Firebase configuration
• OAuth credentials (Facebook, Google)
• Onboarding screens
• Navigation menu items
• Sign-up fields
• Profile fields
• User settings
• Terms of Service link

🌐 Internationalization

The app supports multiple languages. Translation files are located in src/Translations/:

• en.json - English
• fr.json - French
• ar.json - Arabic

Add more languages by creating new JSON files and updating the localization configuration.

🎨 Theming

The app supports both light and dark modes. Theme configuration is in src/DynamicAppStyles.js. The app automatically detects and adapts to the system appearance setting.

📝 Scripts

• npm start - Start Metro bundler
• npm run ios - Run on iOS simulator
• npm run android - Build and run on Android
• npm test - Run tests
• npm run lint - Run ESLint
• npm run prettier - Format code with Prettier

🔐 Security

• Firebase security rules should be configured for production
• Store sensitive keys in environment variables
• Update keystore files with your own for release builds
• Configure ProGuard rules for Android obfuscation

📦 Build for Production

Android

cd android
./gradlew assembleRelease

iOS

1. Open ios/Messenger.xcworkspace in Xcode
2. Select "Product" > "Archive"
3. Follow the App Store submission process

🐛 Troubleshooting

Common Issues

Metro bundler issues

npm start -- --reset-cache

iOS build fails

cd ios
pod deintegrate
pod install
cd ..

Android build fails

cd android
./gradlew clean
cd ..

Clear all caches

watchman watch-del-all
rm -rf node_modules
npm install

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request