title: Make react-native component blink at regular time interval
body: <p>I am trying to make a component "blink" on my page. I was thinking about setting a visible: true state in my componentWillMount method and then put a timeout of 1s in componentDidUpdate to set state to the "opposite" of the previous state. As I see it the component lifecycle looks like this :</p>
  
  <p>sets state to visible to true (componentWillMount that runs only once and is not triggering a rerender)
    enters componentdidUpdate
    waits 1s 
    hides component (setstate to visible false)
    enters componentDidUpdate 
    waits 1s 
    shows component (setstate to visible true)</p>
  
  <p>However my component is blinking but the intervals of hide and show are not regular, they change and dont seem to follow the 1s logic</p>
  
  <p>Here's my component code :</p>
  
  <p>class ResumeChronoButton extends Component {</p>
  
  <pre><code>  componentWillMount(){
  
      console.log('in componentWillMount')
      this.setState({visible: true})
    }
    componentDidUpdate(){
      console.log('in componentDidUpdate')
      setTimeout(() =&gt;this.setState({visible: !this.state.visible}), 1000)
    }
  
    // componentWillUnmount(){
    //   clearInterval(this.interval)
    // }
    render(){
      const { textStyle } = styles;
      if (this.state.visible){
        return (
                &lt;TouchableOpacity onPress={this.props.onPress}&gt;
                  &lt;Pause style={{height: 50, width: 50}}/&gt;
                &lt;/TouchableOpacity&gt;
        );
      }
      else {
        return (
          &lt;View style={{height: 50, width: 50}}&gt;
          &lt;/View&gt;
        )
      }
    }
  };
  </code></pre>
  
  <p>How can I make my component blink at regular time interval.</p>