title: How to deal with React Native animated.timing in same child components
body: <p><strong>Parent Component:</strong></p>
  
  <pre><code>routes.forEach((data, index) =&gt; {
    content.push(&lt;Item key={index} offset={688} route={route} /&gt;)
  })
  </code></pre>
  
  <p><strong><code>Item</code> Component:</strong></p>
  
  <pre><code>scrollAnimate (toValue) {
    const { offset } = this.props;
  
    Animated.timing(
      this.state.xTranslate,
      {
        toValue,
        duration: 20000,
        easing: Easing.linear,
        useNativeDriver: true
      }
    ).start((e) =&gt; {
      if (e.finished) {
        const newState = {xTranslate: new Animated.Value(offset)}
        this.setState(newState, () =&gt; { this.scrollAnimate(toValue) })
      }
    });
  }
  </code></pre>
  
  <p>I want every <code>Item</code> Component loop animate separate, but the fact is that all <code>Item</code> Components animation end and then all <code>Item</code> Component start the animation together. How can I fix it?</p>