title: Using Animated.Flatlist and Animated.ScrollView to animate an Animated.View is not smooth
body: <p>I am would like to make an animated header.</p>
  
  <ol>
  <li>I Created an animated component of FlatList, </li>
  <li>Used the <code>onScroll</code> function to update the animated value. </li>
  <li>Placed a view (Animated.View) as the header above the animated FlatList using position absolute.</li>
  <li>Finally, interpolate the animated value to change the view (Animated.View) using transform properties.</li>
  </ol>
  
  <p>The animation works fine, but the animation is not smooth at all.</p>
  
  <p>I <a href="https://github.com/facebook/react-native/issues/14037" rel="noreferrer">saw this issue</a> of how using <code>scrollEventThrottle</code> helps the smoothness. So I thought using FlatList would be smooth but it's not. If your scroll while pressing, it's smooth. But if you scroll and leave the finger, it's jumpy ( I don't know how to describe it. Sorry). The scrolling is smooth but the animated view (Header) animation is not smooth at all.</p>
  
  <p><strong>Environment</strong></p>
  
  <ul>
  <li>react: 16.0.0-alpha.12,</li>
  <li>react-native: ^0.47.0,</li>
  <li>node: v7.7.3</li>
  <li>npm: 4.1.2</li>
  <li>yarn: 0.21.3</li>
  </ul>
  
  <p><strong>Target Platform:</strong> iOS and Android</p>
  
  <p><strong>Build tools:</strong> expo</p>
  
  <p><a href="https://snack.expo.io/HySw-PtY-" rel="noreferrer">Link to snack demo</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class AnimatedHeader extends React.Component {
   state = {
    animatedValue: new Animated.Value(0),
   };
   
   _renderItem = ({item}) =&gt; {
    return (
     &lt;View style={styles.nonsenseItem}&gt;
      &lt;Text style={styles.itemText}&gt;{item}&lt;/Text&gt;
     &lt;/View&gt;
    )
   };
   
   render() {
    let scaleY = this.state.animatedValue.interpolate({
     inputRange: [0, 180],
     outputRange: [1, 0.5],
     extrapolate: 'clamp',
    });
    
    let translateY = this.state.animatedValue.interpolate({
     inputRange: [0, 180],
     outputRange: [0, -100],
     extrapolate: 'clamp',
    });
    
    return (
     &lt;View style={styles.container}&gt;
      &lt;AnimatedFlatList
       contentContainerStyle={{marginTop: 200}}
       scrollEventThrottle={16} // &lt;-- Use 1 here to make sure no events are ever missed
       onScroll={Animated.event(
        [{nativeEvent: {contentOffset: {y: this.state.animatedValue}}}],
        {useNativeDriver: true} // &lt;-- Add this
       )}
       data={data}
       renderItem={this._renderItem}
       keyExtractor={(item, i) =&gt; i}/&gt;
      &lt;Animated.View style={[styles.headerWrapper, {transform: [{scaleY}, {translateY}]}]}/&gt;
     &lt;/View&gt;
    )
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong></p>
  
  <p>So, I tried to implement the same functionality using ScrollView. However, I think, its event worse using ScrollView when compared to FlatList.</p>
  
  <p><a href="https://snack.expo.io/BJYG3iFFZ" rel="noreferrer">Here is the expo snack demo: Animated ScrollView Header</a></p>
  
  <p>I think I need to mention how I got here at the first place. So, I tried to implement this by a very nice <a href="https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e" rel="noreferrer">tutorial in Medium</a>, and also by watching this <a href="https://www.youtube.com/watch?v=pZCriZRuaow" rel="noreferrer">awesome youtube react conf viedo by Brent</a>. However, the exact code used on youtube video has the same effect. Also, on the Medium tutorial, the author has given a Link to his <a href="https://exp.host/@janic/scrollable-header" rel="noreferrer">expo Animated header link</a>, which works very smoothly. But the same code doesn't work smoothly when I copy paste the code. So, I think the problem is with the react or react native version. I will update if I have any new update. Thank you.</p>