title: How to prevent setInterval in react native from blocking running animation?
body: <p>I have a react native application. There are 2 components: tickets and ticket details. In the "tickets" component there is a list of tickets. When a user clicks on a single ticket the "ticket details" component is shown. In the "tickets" component there is the setInterval which retrieves tickets from the server every 10 seconds. In the "ticket details" component there is the animated progress bar(using react native Animated module).</p>
  
  <p>Issue: every 10 seconds animation in "ticket details" component freezes. How to solve? </p>
  
  <p>I guess that is because of <code>setInterval</code> blocks main UI thread.</p>
  
  <p>I tried:
  - <a href="https://facebook.github.io/react-native/docs/interactionmanager.html" rel="nofollow noreferrer">https://facebook.github.io/react-native/docs/interactionmanager.html</a> but I didn't even manage to call runAfterInteractions on my RN 0.58.</p>
  
  <p>The next thing that comes to mind is <a href="https://github.com/joltup/react-native-threads" rel="nofollow noreferrer">https://github.com/joltup/react-native-threads</a>. But it is a native module with some scary issues like "memory leak" and additional build instructions so I don't really want to use it.</p>
  
  <p>I think I miss a way easier method to solve this issue.</p>
  
  <p>This is how I get tickets in the "tickets" component. getTickets is a redux action.</p>
  
  <pre class="lang-js prettyprint-override"><code>componentDidMount() {
  this.timer = setInterval(() =&gt; {
      const {getTickets} = this.props;
      getTickets();
   }, 10000);
  }
  </code></pre>
  
  <p>This is the animated progress bar from the "ticket details" component. I doubt that it was useful concerning this issue. Just for reference.</p>
  
  <pre><code>&lt;ProgressBarAnimated 
      value={100} 
      barAnimationDuration={progressBarAnimationDuration} 
      width={progressBarWidth}
      borderWidth={0}
      backgroundColor='#1d1e1f'
      height={8}
      borderRadius={0} /&gt;
  </code></pre>
  
  <p>I expect <code>setInterval</code> not to freeze progress bar animation.</p>
  
  <p>Once again how I see the process:</p>
  
  <ol>
  <li><p>progress bar animation is running</p></li>
  <li><p>every 10th-second <code>setInterval</code> performs HTTP request and blocks main UI thread(with progress bar animation) for ~2 seconds</p></li>
  <li><p>when the request is done animation is back to normal</p></li>
  </ol>