Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

258
Visualizações
How use navigation event to reload in react native

I have homeScreen , this screen has useEffect and data filteration has in it. HomeScreen to profilescreen and data update in profile screen and return to homescreen. this updated data need to show in homescreen. I want to know is can navigation event focus reload this homescreen? How can make this

 useEffect(()=>{

     let unsub;

     const fetchCard = async ()=>{
            
      // // user
           const uRef = query(doc(db,'users',user.uid))
           const udata = await getDoc(uRef)
          .then((snapshot)=>snapshot.data())

      //     console.log(udata.age)
         
      // //users

      //     const usRef = query(collection(db,'users'))
      //     const usdata =await getDocs(usRef)
      //     .then((snapshot)=>snapshot.docs.map(doc=>({
      //       id:doc.id,
      //       ...doc.data()
      //     })))

      //     console.log(usdata[0].age)


      const swipeRef = collection(db,'users',user.uid,'swipes')
      const myswipeid = await getDocs(swipeRef)
      .then((snapshot)=>snapshot.docs.map(doc=>doc.id))
      
     
      const swipeuserId = myswipeid.length>0?myswipeid :['test'];
     
 
  
      unsub = onSnapshot(query(collection(db,'users'),where('gender','==',udata.interestIn),where("id","not-in",[...swipeuserId])),
            snapshot=>{
                    setProfiles(
                      snapshot.docs
                     
                      .map(doc=>({
                        id :doc.id,
                        ...doc.data()
                      })
                     
                     )
                    )
                  }
      )
     }
     fetchCard()
     return unsub
  },[setProfiles])
   


how can reload this useEffect by navigation back. can someone show me example

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

If you using react native navigation then use useFocusEffect https://reactnavigation.org/docs/function-after-focusing-screen/ this hook call when you come back to the screen(when the current screen is visible or focused)

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(()=>{

 let unsub;

 const fetchCard = async ()=>{
        
  // // user
       const uRef = query(doc(db,'users',user.uid))
       const udata = await getDoc(uRef)
      .then((snapshot)=>snapshot.data())

  //     console.log(udata.age)
     
  // //users

  //     const usRef = query(collection(db,'users'))
  //     const usdata =await getDocs(usRef)
  //     .then((snapshot)=>snapshot.docs.map(doc=>({
  //       id:doc.id,
  //       ...doc.data()
  //     })))

  //     console.log(usdata[0].age)


  const swipeRef = collection(db,'users',user.uid,'swipes')
  const myswipeid = await getDocs(swipeRef)
  .then((snapshot)=>snapshot.docs.map(doc=>doc.id))
  
 
  const swipeuserId = myswipeid.length>0?myswipeid :['test'];
 


  unsub = onSnapshot(query(collection(db,'users'),where('gender','==',udata.interestIn),where("id","not-in",[...swipeuserId])),
        snapshot=>{
                setProfiles(
                  snapshot.docs
                 
                  .map(doc=>({
                    id :doc.id,
                    ...doc.data()
                  })
                 
                 )
                )
              }
  )
 }
 fetchCard()
 return unsub

},[])

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda