suxasgram

[suxa1]

npm install -g react-native-cli npx react-native init ChatApp cd ChatApp npm install @react-navigation/native @react-navigation/native-stack firebase ChatApp/ ├── App.js ├── components/ │ ├── ChatScreen.js │ ├── LoginScreen.js ├── firebaseConfig.js └── package.json import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore';

const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" };

if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }

export const auth = firebase.auth(); export const firestore = firebase.firestore(); import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import LoginScreen from './components/LoginScreen'; import ChatScreen from './components/ChatScreen';

const Stack = createNativeStackNavigator();

const App = () => { return (

); };

export default App; import React, { useState } from 'react'; import { View, TextInput, Button, Alert } from 'react-native'; import { auth } from '../firebaseConfig';

const LoginScreen = ({ navigation }) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState('');

const handleLogin = () => { auth.signInWithEmailAndPassword(email, password) .then(() => navigation.navigate('Chat')) .catch(error => Alert.alert(error.message)); };

return ( <View style={{ padding: 20 }}> <TextInput placeholder="Email" value={email} onChangeText={setEmail} style={{ borderWidth: 1, marginBottom: 10, padding: 10 }} /> <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry style={{ borderWidth: 1, marginBottom: 10, padding: 10 }} />

</View>

); };

export default LoginScreen; import React, { useEffect, useState } from 'react'; import { View, TextInput, Button, FlatList, Text } from 'react-native'; import { firestore } from '../firebaseConfig';

const ChatScreen = () => { const [messages, setMessages] = useState([]); const [message, setMessage] = useState('');

useEffect(() => { const unsubscribe = firestore.collection('messages') .orderBy('timestamp') .onSnapshot(snapshot => { const messagesData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); setMessages(messagesData); });

return () => unsubscribe();

}, []);

const handleSend = () => { if (message) { firestore.collection('messages').add({ content: message, timestamp: new Date(), sender: auth.currentUser.email, }); setMessage(''); } };

return ( <View style={{ padding: 20 }}> <FlatList data={messages} keyExtractor={item => item.id} renderItem={({ item }) => (

{item.sender}: {item.content}

    )}
  />
  <TextInput
    placeholder="Type a message"
    value={message}
    onChangeText={setMessage}
    style={{ borderWidth: 1, marginBottom: 10, padding: 10 }}
  />
  <Button title="Send" onPress={handleSend} />
</View>

); };

export default ChatScreen; npx react-native run-android

[suxa1]

@suxa1