import React, { useState, useEffect } from 'react'; import { View, Text, TouchableOpacity, TextInput, ScrollView, Image, Modal, FlatList } from 'react-native'; import { Check, ChevronDown, ChevronRight, Edit3, Image as ImageIcon, Phone, Video, Search, MoreVertical, Smile, Paperclip, Mic, Send } from 'lucide-react-native'; const WhatsAppClone = () => { const [currentScreen, setCurrentScreen] = useState('splash'); const [selectedCountry, setSelectedCountry] = useState({ name: 'India', code: '+91', flag: '🇮🇳' }); const [phoneNumber, setPhoneNumber] = useState(''); const [showCountryModal, setShowCountryModal] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); const [otp, setOtp] = useState(['', '', '', '', '', '']); const [profileName, setProfileName] = useState(''); const [showEmojiKeyboard, setShowEmojiKeyboard] = useState(false); const [message, setMessage] = useState(''); const [messages, setMessages] = useState([ { id: '1', text: 'Hey there! 👋', time: '10:30 AM', sender: 'other' }, { id: '2', text: 'Hello! How are you?', time: '10:32 AM', sender: 'me' }, { id: '3', text: "I'm doing great! Just finished the new design", time: '10:35 AM', sender: 'other' }, ]); // Countries data const countries = [ { name: 'United States', code: '+1', flag: '🇺🇸' }, { name: 'United Kingdom', code: '+44', flag: '🇬🇧' }, { name: 'India', code: '+91', flag: '🇮🇳' }, { name: 'Canada', code: '+1', flag: '🇨🇦' }, { name: 'Australia', code: '+61', flag: '🇦🇺' }, { name: 'Germany', code: '+49', flag: '🇩🇪' }, { name: 'France', code: '+33', flag: '🇫🇷' }, { name: 'Japan', code: '+81', flag: '🇯🇵' }, { name: 'Brazil', code: '+55', flag: '🇧🇷' }, { name: 'South Korea', code: '+82', flag: '🇰🇷' }, ]; // Splash Screen useEffect(() => { if (currentScreen === 'splash') { const timer = setTimeout(() => { setCurrentScreen('welcome'); }, 2000); return () => clearTimeout(timer); } }, [currentScreen]); const handleOtpChange = (index: number, value: string) => { const newOtp = [...otp]; newOtp[index] = value; setOtp(newOtp); }; const renderSplashScreen = () => ( W ); const renderWelcomeScreen = () => ( W Welcome to WhatsApp Read our Privacy Policy. Tap "Agree and continue" to accept the Terms of Service. setCurrentScreen('phone')} > AGREE AND CONTINUE English ); const renderPhoneScreen = () => ( Enter your phone number WhatsApp will need to verify your phone number. setShowCountryModal(true)} > {selectedCountry.flag} {selectedCountry.name} {selectedCountry.code} setShowConfirmation(true)} disabled={!phoneNumber} > NEXT ); const renderCountryModal = () => ( setShowCountryModal(false)} > Select country item.code} renderItem={({ item }) => ( { setSelectedCountry(item); setShowCountryModal(false); }} > {item.flag} {item.name} {item.code} {selectedCountry.code === item.code && ( )} )} /> ); const renderConfirmationScreen = () => ( Is this OK? {selectedCountry.code} {phoneNumber} setShowConfirmation(false)} > EDIT setCurrentScreen('otp')} > YES ); const renderOtpScreen = () => ( Verifying your number You may receive an SMS to verify your phone number. {selectedCountry.code} {phoneNumber} {otp.map((digit, index) => ( handleOtpChange(index, value)} keyboardType="numeric" maxLength={1} /> ))} setCurrentScreen('profile')} > NEXT ); const renderProfileScreen = () => ( Profile info Enter your name setCurrentScreen('chat')} disabled={!profileName} > NEXT ); const renderChatScreen = () => ( {/* Chat Header */} U User Name online

{/* Messages */} {messages.map((msg) => ( {msg.text} {msg.time} ))} {/* Message Input */} {message ? ( ) : ( )} ); return ( {currentScreen === 'splash' && renderSplashScreen()} {currentScreen === 'welcome' && renderWelcomeScreen()} {currentScreen === 'phone' && renderPhoneScreen()} {currentScreen === 'confirmation' && renderConfirmationScreen()} {currentScreen === 'otp' && renderOtpScreen()} {currentScreen === 'profile' && renderProfileScreen()} {currentScreen === 'chat' && renderChatScreen()} {showCountryModal && renderCountryModal()} {showConfirmation && ( Is this OK? {selectedCountry.code} {phoneNumber} setShowConfirmation(false)} > EDIT { setShowConfirmation(false); setCurrentScreen('otp'); }} > YES )} ); }; export default WhatsAppClone;

React Native WhatsApp Clone App Preview

Project Screens for WhatsApp Clone App