Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

256
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda