0

Me gustaría cambiar un valor cuando una función de fadeOut termine.

La función es la siguiente:

    const fadeOut = (duration: number = 300) => {
        Animated.timing(
            opacity,
            {
                toValue: 0,
                duration,
                useNativeDriver: true
            }
        ).start();
    }

Y la llamo de esta manera:

const fadeOutScreen = () => {
    fadeOut(1000);

    // El valor debería de ser true cuando el fadeOut termina
    setHide(true);
}

Pero el valor cambia antes de que termine la función de fadeout.

1
  • Si Animated.timing.(...).start() es asíncrona debería tener un callback que pudieras usar para saber cuándo terminó. Qué librería estás usando allí? el 2 mar. 2022 a las 16:32

1 respuesta 1

0

El método start recibe un callback que puedes usar para esto, este callback se activa en cuanto se inicia la animación y cuando termina, la diferencia en cada caso es el parámetro finished que al inicio tendrá un valor false y al final true. Con eso una forma de lograr la animación sería usando promesas así:

const fadeOut = async (duration: number = 300) => {
    return new Promise < void> ((resolve) => {
        Animated.timing(
            opacity,
            {
                toValue: 0,
                duration,
                useNativeDriver: true
            }
        ).start((finished: boolean) => {
            if (finished) {
                resolve();
            }
        });
    });
}

const fadeOutScreen = async () => {
    await fadeOut(1000);
    setHide(true);
};

O con un simple callback, lo podrias estructurar asi:

const fadeOut = (duration: number = 300, callback) => {
    Animated.timing(
        opacity,
        {
            toValue: 0,
            duration,
            useNativeDriver: true
        }
    ).start(callback);
}

fadeOut(1000, (finished: boolean) => {
    if (finished) {
        setHide(true);
    }
})

Más info de la función start: https://reactnative.dev/docs/animated#start

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.