title: React Native onScrollBeginDrag not very responsive to the scroll
body: <p>I want the opacity to go to 0 as I start to scroll down and the opposite as I scroll up.  My code currently achieves a similar effect, but not as responsive. First, it goes to <code>opacity: 1</code> abruptly, not gradually, and 2) the change happens late no matter how much I change the <code>inputRange</code>.  </p>
  
  <pre class="lang-js prettyprint-override"><code>    const [inputAnimation] = useState(new Animated.Value(0))
      const inputInterpolate = inputAnimation.interpolate({
          inputRange: [0, 10],
          outputRange: [1, 0]
      })
  
      const animatedInputStyles = {
          opacity: inputInterpolate
      }
  
  return (
          &lt;View
              style={[styles.upperContainer]}
          &gt;
              &lt;View style={styles.textInputContainer}&gt;
                  &lt;Animated.View style={animatedInputStyles}&gt;
                      &lt;TextInput
                          style={styles.textInput}
                          onChangeText={text =&gt; onChangeText(text)}
                          value={value}
                      /&gt;
                  &lt;/Animated.View&gt;
              &lt;/View&gt;
          &lt;/View&gt;
          &lt;ScrollView
              contentContainerStyle={styles.container}
              onScrollBeginDrag={Animated.event([
                  {
                      nativeEvent: {
                          contentOffset: {
                              y: inputAnimation
                          }
                      }
                  }
              ])}
          &gt;
          &lt;/ScrollView&gt;
  )
  </code></pre>
  
  <p>How do I make the opacity animation more responsive?</p>