npx create-expo-app ChatApp
cd ChatApp
npm install firebase expo-google-auth-session react-native-gifted-chat
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "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",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
import { useEffect, useState } from "react";
import { Button, View, Text } from "react-native";
import * as Google from "expo-auth-session/providers/google";
import { auth } from "./firebaseConfig";
import { signInWithCredential, GoogleAuthProvider } from "firebase/auth";
export default function GoogleLogin({ navigation }) {
const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId: "YOUR_EXPO_CLIENT_ID",
androidClientId: "YOUR_ANDROID_CLIENT_ID",
iosClientId: "YOUR_IOS_CLIENT_ID",
});
useEffect(() => {
if (response?.type === "success") {
const { id_token } = response.params;
const credential = GoogleAuthProvider.credential(id_token);
signInWithCredential(auth, credential)
.then(() => navigation.navigate("Chat"))
.catch((error) => console.log(error));
}
}, [response]);
return (
Login with Google
);
}
import { useState, useEffect, useCallback } from "react";
import { GiftedChat } from "react-native-gifted-chat";
import { auth, db } from "./firebaseConfig";
import { collection, addDoc, onSnapshot, orderBy, query } from "firebase/firestore";
export default function ChatScreen() {
const [messages, setMessages] = useState([]);
useEffect(() => {
const q = query(collection(db, "chats"), orderBy("createdAt", "desc"));
const unsubscribe = onSnapshot(q, (snapshot) => {
setMessages(
snapshot.docs.map((doc) => ({
_id: doc.id,
text: doc.data().text,
createdAt: doc.data().createdAt.toDate(),
user: doc.data().user,
}))
);
});
return () => unsubscribe();
}, []);
const onSend = useCallback((messages = []) => {
setMessages((previousMessages) =>
GiftedChat.append(previousMessages, messages)
);
const { _id, createdAt, text, user } = messages[0];
addDoc(collection(db, "chats"), {
_id,
createdAt,
text,
user,
});
}, []);
return onSend(messages)} user={{ _id: auth.currentUser?.uid, name: auth.currentUser?.displayName }} />;
}
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import GoogleLogin from "./GoogleLogin";
import ChatScreen from "./ChatScreen";
const Stack = createStackNavigator();
export default function App() {
return (
);
}
Poetry status
Poetry status More
Comments
Post a Comment