En una aplicación React Native, dado que una condición es true , debería representar ComponentA , de lo contrario, ComponentB debería estar visible en su lugar.

 const ParentComponent = () => { if (condition) return <ComponentA /> if (!condition) return <ComponentB /> }

El problema que tengo es que una vez que cambia la condición, debo animar la transición entre los componentes, es decir, el ComponentA debe desaparecer y el ComponentB B debe aparecer.

Así que en ComponentA tengo algo como esto:

 useEffect(() => { return () => { Animated.timing(fadeAnim, { useNativeDriver: true, toValue: 0, duration: 1000, }).start(); }) } }

Lo que significa que cuando el componente está a punto de desmontarse, debe activar la animación de desaparición gradual. Sin embargo, esto no funciona porque en el momento en que la animación debe comenzar, el componente ya ha desaparecido, ya que la condición que permite su renderizado ya ha cambiado y el otro componente ahora se renderiza en su lugar (ver el primer fragmento de código).

¿Hay alguna forma de animar el desmontaje del componente sin bibliotecas adicionales?

Como solución alternativa, estoy renderizando ambos componentes y cambiando su opacidad: les paso la condición a ambos como accesorio, de modo que cuando la condición cambie, puedan manejar la animación para que cambie la opacidad, pero no me gusta esta solución, dado que tengo que hacer que la posición de ambos componentes sea absoluta y hacer que se superpongan uno encima del otro, idealmente me gustaría mantener la condición que administra su representación y hacer que ComponentA se desmonte con un desvanecimiento. ¿Es eso posible?