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í? Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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