Refrescar pantalla al volver en React Native

Tiempo de lectura: < 1 minuto

Si queremos refrescar una pantalla al volver desde otra pantalla usando React Native, tenemos que hacer lo siguiente:

Primero importamos react-navigation

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

Después lo añadimos en nuestro render:

 useFocusEffect(
      React.useCallback(() => {
        
      }, [])
    );

Y dentro de React.useCallback, realizamos las llamadas que queramos refrescar. En [] podemos poner la variable que cambia al regresar de otra pantalla por ejemplo [codigo].

 useFocusEffect(
      React.useCallback(() => {
        console.log("Codigo cambia a: " + codigo)
      }, [codigo])
    );

Otra opción o si tenemos distintos navigation:

useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            console.log('In Navigation Add Listener Block');
            refresh();
            return unsubscribe;
        }, [navigation]);
    }, [navigation]);

Este suscribirá a cambios producidos por navigation y solo invocará useEffects cuando haya cambios en navigation.

Si tenemos dos navigation podemos duplicar el código de la siguiente forma:

    useEffect(() => {
        const unsubscribe = navigationInicial.addListener('focus', () => {
            //console.log('In Navigation INICIAL Add Listener Block');
            refresh();
            return unsubscribe;
        }, [navigationInicial]);

    }, [navigationInicial]);

    useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            //console.log('In Navigation Add Listener Block');
            refresh();
            return unsubscribe;
        }, [navigation]);
    }, [navigation]);