Usando o Firestore para criar um Chat com React Native

Usando o Firestore para criar um Chat com React Native | Alura Cursos Online

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"; //* for Cloud Firestore
// Adicione aqui as suas credenciais do Firebase
const firebaseConfig = {
apiKey: "AIzaSyAGzPAA-cySp5C_xYdkdNZEiJ3NuB8MwzA",
authDomain: "chat--firebase-662ad.firebaseapp.com",
projectId: "chat--firebase-662ad",
storageBucket: "chat--firebase-662ad.appspot.com",
messagingSenderId: "504224726320",
appId: "1:504224726320:web:f554081115ca495bf79cf5"
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const database = getFirestore(app);

import { View , Text, TextInput, Button} from "react-native";
import { styles } from "./styles";
import { useState } from "react";


export default function Login({ navigation }) {
const [name, setName] = useState('');



return (
    &lt;View style={styles.container}&gt;
       
            &lt;View style={styles.boxInput}&gt;
                &lt;Text&gt;Nome de Usuário&lt;/Text&gt;
               
                &lt;TextInput
                    style={styles.input}
                    onChangeText={setName}    
                /&gt;
            &lt;/View&gt;

            &lt;Button
                title=&quot;Entrar&quot;
                onPress={() =&gt; navigation.navigate(&#39;Chat&#39;, { name: name })}
            /&gt;
        
    &lt;/View&gt;
)


}

import { useRoute } from "@react-navigation/native";


import { GiftedChat } from 'react-native-gifted-chat'
import { useCallback, useEffect, useState } from "react";


//importação do firebase e database
import { collection, addDoc,onSnapshot, query,orderBy } from "firebase/firestore";
import { database } from "../config/firebase";

    //função que aciona assim que envia a mensagem no aplicativo
    const mensagemEnviada = useCallback((messages = []) => {
        setMessages(previousMessages =>{
              GiftedChat.append(previousMessages, messages)
            }
        );
        const { _id, createdAt, text, user } = messages[0];

    addDoc(collection(database, &quot;chats&quot;), {
        _id,
        createdAt,
        text,
        user,
    });
}, []);

    useEffect(() => {
        async function getMessages() {
            const values = query(collection(database, 'chats'), orderBy('createdAt', 'desc'));
            onSnapshot(values, (snapshot) => setMessages(
                snapshot.docs.map(doc => ({
                    _id: doc.data()._id,
                    createdAt: doc.data().createdAt.toDate(),
                    text: doc.data().text,
                    user: doc.data().user,
                }))
            ));
        }
        getMessages();
    }, []);

import { useRoute } from "@react-navigation/native";


import { GiftedChat } from 'react-native-gifted-chat'
import { useCallback, useEffect, useState } from "react";




//importação do firebase e database
import { collection, addDoc,onSnapshot, query,orderBy } from "firebase/firestore";
import { database } from "../config/firebase";




export default function Chat() {
const [messages, setMessages] = useState([]);
const route = useRoute();
const { name } = route.params;



useEffect(() =&gt; {
    async function getMessages() {
        const values = query(collection(database, &#39;chats&#39;), orderBy(&#39;createdAt&#39;, &#39;desc&#39;));
        onSnapshot(values, (snapshot) =&gt; setMessages(
            snapshot.docs.map(doc =&gt; ({
                _id: doc.data()._id,
                createdAt: doc.data().createdAt.toDate(),
                text: doc.data().text,
                user: doc.data().user,
            }))
        ));
    }
    getMessages();
}, []);

//função que aciona assim que envia a mensagem no aplicativo
const mensagemEnviada = useCallback((messages = []) =&gt; {
    setMessages(previousMessages =&gt;{
          GiftedChat.append(previousMessages, messages)
        }
    );
    const { _id, createdAt, text, user } = messages[0];
    addDoc(collection(database, &quot;chats&quot;), {
        _id,
        createdAt,
        text,
        user,
    });
}, []);

return (
    &lt;GiftedChat
      messages={messages}
      onSend={msg =&gt; mensagemEnviada(msg)}
      user={{
            _id: name,
        }}
    /&gt;
)


}

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Usando o Firestore para criar um Chat com React Native

Andre Louis Souza Ribeiro

Resumo

Explore por tópico

Introdução

Criando e configurando o Firebase

Configuração do Firestore

Relembrando o que é uma biblioteca de programação

Instalando a biblioteca “react-native-gifted-chat”

Criando o nosso Chat

Instalando o Firebase no projeto

Adicionando Firebase ao projeto

Tela de autenticação

Tela do Chat

Conclusão

Andre Louis Souza Ribeiro

Inscreva-se em nossa Newsletter

Resumo

Explore por tópico

Introdução

Criando e configurando o Firebase

Configuração do Firestore

Relembrando o que é uma biblioteca de programação

Instalando a biblioteca “react-native-gifted-chat”

Criando o nosso Chat

Instalando o Firebase no projeto

Adicionando Firebase ao projeto

Tela de autenticação

Tela do Chat

Conclusão

Leia também