How to fade Out Text automatically after some time by using react-native Animation

Question

By using following code I am able to fade in some text,

class AnimatedClass extends Component {
   constructor(props) {
      super(props);

      this.state = {fadeIn: new Animated.Value(0),
                    fadeOut: new Animated.Value(1),
                   };
   }

   fadeIn() {
     this.state.fadeIn.setValue(0)                  
     Animated.timing(
       this.state.fadeIn,           
       {
         toValue: 1,                   
         duration: 3000,              
       }
     ).start(() => this.fadeOut());                        
  }

  fadeOut() {
    this.state.fadeOut.setValue(1)
    Animated.timing(                  
       this.state.fadeOut,            
       {
         toValue: 0,                   
         duration: 3000,              
       }
    ).start();                        
  }

  render() {
    return(
       <View style={{flex: 1, backgroundColor: '#efefef'}}>
           <TouchableOpacity 
               onPress={() => this.fadeIn()} 
               style={Styles.submitButtonStyle}
               activeOpacity={0.5}
           >
               <Text style={Styles.submitTextStyle}>Submit</Text>
           </TouchableOpacity>

           <Animated.View                 
              style={{opacity: this.state.fadeIn}}
           >
              <View style={Styles.textContainer}>
                <Text style={{fontSize: 20, textAlign: 'center'}}>Your order has been submitted</Text>
             </View>
           </Animated.View>
       </View>
   );

 }
}

But, Anyway Text is not getting faded out automatically after some time. In fact, I set time after how many seconds Text should be faded out. But it's not working.

Any help is appreciated. Thanks in Advance.

Answer 1

You're basing the opacity on this.state.fadeIn but modifying this.state.fadeOut in your fadeOut().

Try:

fadeOut() {
    Animated.timing(                  
       this.state.fadeIn,            
       {
         toValue: 0,                   
         duration: 3000,              
       }
    ).start();                        
  }

and maybe change the variable name to just fadeValue or something more clear for future you.