A UI-only clone of the classic WhatsApp app built using React Native, Expo, and TypeScript. This project mimics the old WhatsApp layout for chats, status, calls, and authentication flow. Fully responsive across Android and iOS platforms.
⚠️ This is a frontend-only build – no backend or real-time database integration is included yet.
- 🟢 Classic WhatsApp UI
- 📥 Splash screen with app icon and loading animation
- 🙋 Welcome screen with privacy policy prompt
- ☎️ Phone number entry and OTP input (UI only)
- 🗨️ Chat list with message preview, unread badge, time
- 📸 Status screen with recent updates
- 📞 Calls tab with incoming/outgoing/missed call indicators
Images are stored in the
/Screenshotsfolder.
| Splash Screen | Activity Indicator Animation | Welcome Screen | Phone Input |
|---|---|---|---|
 |
 |
 |
 |
| OTP Screen | Chats Tab | Status Tab | Calls Tab |
|---|---|---|---|
 |
 |
 |
 |
src/
├── app/
│ ├── (auth)/ # Screens: splash, Welcome, Phone, OTP
│ ├── (main)/ # Screens: Main Screen
│ └── \_layout.tsx # Expo Router config
├── assets/ # App icons, images
├── components/
│ ├── atom/ # Custom Status Bar
│ └── molecule/ # Screens: Calls,Chats,Status,Message Card
├── constants/ # Logo,Pics
- React Native (Expo)
- TypeScript
- Expo Router
- Atomic Design pattern
git clone https://github.com/italhazahid/whatsapp-ui-clone.git
cd whatsapp-clonenpm install
# or
yarn installnpx expo startScan the QR code with Expo Go on your mobile device to preview.
- 🔐 Firebase for phone authentication
- 💬 Real-time chat functionality
- 📁 Media upload & file sharing
- 🔔 Push notifications
- 🌗 System-based dark/light theme toggle
MIT © 2025 Talha Zahid
This app UI is recreated for learning and personal project purposes, inspired by WhatsApp’s original design.