fade out splash screen in react-native - react-native

Question

Below is my code, I try to fade out an image and after fade out go to the login page.
It goes to login page but the animation is not working.
The image comes and wait then disappears immediately. What I am doing wrong ?
state={
fadeAmin: new Animated.Value(0),
}
componentDidMount() {
this.setState({ fadeAnim: new Animated.Value(1) },
() => {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 0, // Animate to opacity: 1 (opaque)
duration: 2000,
}
).start();
})
}
componentWillMount() {
setInterval(() => {
this.props.navigation.navigate('login');
},2000) // Starts the animation
}
render() {
let { fadeAnim } = this.state;
console.log('props', this.props)
return (
<View style = {{flex:1 , alignItems:"center", justifyContent:'center'}}>
<Login navigation={this.props.navigation}/>
<Animated.View style={{ ...this.props.style, opacity: fadeAnim }} >
{this.props.children}
<Image style= {styles.logo} source={require('../../image/dataLogo.jpeg')} />
</Animated.View>
</View>
);
}
}

Answer 1

If I understood you correctly, after the fadeout you want to navigate to the login screen, in that case I am guessing the issue is with lifecycle methods.
So componentWillMount calls before componentDidMount, now even though you gave setTimeout (you really dont need that) its about exact time as your fade animation.
So to fix this I would suggest remove the componentWillMount and do all the logic in componentDidMount. The start takes a call back, it will be called after the animation is finished, you can take this opportunity to navigate wherever you want.
Also if you want additional time, add setTimeout then navigate.
componentDidMount() {
Animated.timing( // Animate over time
this.fadeAnim, // The animated value to drive
{
toValue: 0, // Animate to opacity: 1 (opaque)
duration: 2000,
}
).start(() => {
console.log('fading out');
// this.props.navigation.navigate('login');
/* setTimeout(() => {
this.fadeOut();
}, 2000); */
});
}
Example, https://snack.expo.io/SkFnm_x8E