title: Trigger a function when an animation is completed in React Native?
body: <p>I'm implementing a <strong>Splash Screen</strong> using React Native and i'm simply using a <strong>StackNavigator</strong> to change the <strong>route</strong> to the <strong>Main</strong> activity when the animations in <strong>Splash Screen</strong> are completed. To do this, I'm trying to find a way for triggering the <strong>this.props.navigation.navigate('Main')</strong> function.</p>
  
  <blockquote>
    <p>The question is that how i can implement the <strong>onComplete</strong> function in my animation class?</p>
  </blockquote>
  
  <p>Here is my animation code:</p>
  
  <pre><code>import React from 'react';
  import { Animated, Text, View } from 'react-native';
  
  class FadeInView extends React.Component {
  state = {
      fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }
  
  componentDidMount() {
      Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
          toValue: 1,                   // Animate to opacity: 1 (opaque)
          duration: 1000,              // Make it take a while
      }
      ).start();                        // Starts the animation
  }
  
  render() {
      let { fadeAnim } = this.state;
  
      return (
      &lt;Animated.View                 // Special animatable View
          style={{
          ...this.props.style,
          opacity: fadeAnim,         // Bind opacity to animated value
          }}
      &gt;
          {this.props.children}
      &lt;/Animated.View&gt;
      );
  }
  }
  
  export default FadeInView
  </code></pre>
  
  <p>and my <strong>SplashScreen</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
  StyleSheet,
  Text,
  View,
  Image
  } from 'react-native';
  import FadeInView from '../Animations/FadeInAnimation';
  import { StackNavigator } from 'react-navigation';
  import RanjoorMain from './RanjoorMain';
  
  class SplashScreen extends Component {
  render() {
      return (
      &lt;View style={styles.container}&gt;
          &lt;View style={{flex:1}}&gt;&lt;/View&gt;
          &lt;FadeInView style={{width: 230, height: 230, backgroundColor: 'transparent'}}&gt;
              &lt;Image style={styles.introLogo}
              source={require('../Images/Logo/Ranjoor.png')}
              /&gt;
          &lt;/FadeInView&gt;
          &lt;View style={{flex:1}}&gt;&lt;/View&gt;
      &lt;/View&gt;
      );
  }
  }
  
  const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#3863cc',
  },
  welcome: {
      fontSize: 45,
      textAlign: 'center',
      margin: 10,
  },
  instructions: {
      textAlign: 'center',
      color: '#242329',
      marginBottom: 5,
  },
  introLogo: {
      width: 230,
      height: 230
  }
  });
  
  /* This StackNavigator will change the route to the RanjoorMain.js after a couple of ms */
  const GoToRanjoorMain = StackNavigator({
      Splash: { screen: Splas },
      Main: { screen: RanjoorMain }
  })
  
  GoToRanjoorMain.navigationOptions = {
  title: 'Ranjoor', 
  };
  
  export default SplashScreen
  </code></pre>