title: In React Native - How to move View element in parallely while ScrollView scrolls
body: <p>I'm developing a <code>TimeLine</code> component. There are <code>Views</code> list inside horizontal <code>ScrollView</code> that represents half an hour blocks. And I have a Component called <code>TimeRangeSelector</code>, which I use to select a range of time in <code>TimeLine</code> <code>ScrollView</code>. So while I scroll the <code>ScrollView</code> I need to move the <code>TimeRangeSelector</code> in parallel without any lag. Below is the <code>TimeLine</code> component. You can see the 30mins blocks are filled inside <code>ScrollView</code>. The yellow color one is the <code>TimeRangeSelector</code> which is a Animated.View. And the left position of the <code>TimeRangeSelector</code> is set using the scroll position. Each time <code>ScrollView</code> moves im setting the state as below. <br> <br></p>
  
  <pre><code>&lt;ScrollView
        horizontal={true}
        onScroll={this.onScrollFunc}
      &gt;
      {timelineElements}
  &lt;/ScrollView&gt;
  
  onScrollFunc = (event, gesture) =&gt; {
    this.setState({
      contentOffsetX: event.nativeEvent.contentOffset.x,
      scrollStopped: false
    });
  };
  </code></pre>
  
  <p>And Im passing the scrollBarPosition as props to the TimeRangeSelector and setting its left position style as shown in below code<br></p>
  
  <pre><code>&lt;TimeRangeSelector
        scrollBarPosition={this.state.contentOffsetX}
      /&gt;
  
  let styles= [
    {
      position: "absolute",
      left: this.props.scrollBarPosition,
      backgroundColor: backgroundColor,
      marginTop: 20,
      marginLeft: 1,
      width: this.state.selectionWidth,
      height: 100
    }
  ];
  </code></pre>
  
  <p>But the issue is when I scroll the <code>ScrollView</code> the <code>TimeRangeSelector</code> moves with it, but it has a delay.. when I scroll faster the distance between where it should be and where it is, is becoming high. Can anyone give me some ideas according to your knowledge. </p>
  
  <p>My assumption: According to my understanding, I think the lag is because of it takes several instances to reach the <code>setState</code> in and set the <code>ScrollBarPosition</code> as below steps.</p>
  
  <ol>
  <li><code>ScrollView</code> moved 1 frame.</li>
  <li><code>ScrollView</code> fires the <code>onScroll</code> function and emmits the event with new x point. </li>
  <li>Then in the <code>onScroll</code> function it sets the State. </li>
  </ol>
  
  <p>As I understand it takes some time to happen all these steps from JavaScript thread all the way to Native Thread and come back to JS thread again.</p>
  
  <p><a href="https://i.stack.imgur.com/vHSAu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vHSAu.jpg" alt="enter image description here"></a></p>