title: How to: Animate 9gag's "add button" by using React Native
body: <p>So I wanted to challange myself and try to implement the blue button from 9gag which allows you to add content. Its on the right bottom cornern and every time you scroll down and reach a specific "speed" it disappears. And when you scroll up again, it appears again until you scroll down again with that specific "speed". I tried my best but couldnt make it. Here is the link to the video how it should look:</p>
  
  <p><a href="https://www.youtube.com/watch?v=ieT4hZJST5I&amp;feature=youtu.be" rel="nofollow noreferrer">https://www.youtube.com/watch?v=ieT4hZJST5I&amp;feature=youtu.be</a></p>
  
  <p>So far I was able to make that button on the right postion. But I dont know how to change his visibility onScroll:</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>&lt;TouchableOpacity 
        activeOpacity={0.6}
        style={{
            position: 'absolute',
            right: addContentButtonRight,
            bottom: addContentButtonBottom,
            opacity: addContentButtonOpacity
        }}
        // onPress={this.onAddPress}
        &gt;
          &lt;Image style={{width: 65, height: 65}} source={iconSource} /&gt;
  &lt;/TouchableOpacity&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this here is what was my idea for it:</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>//using state to be able to update opacity
  const [addContentButtonOpacity, setAddContentButtonOpacity] = useState(1);
  
  //when the scrollView is scrolled I would call this function with onScroll(). 
  //It sets the new value to opacity by using opacity - 0.1
  //In this way the further you scroll, the more invisible it bacomes
  const addContentButtonOpacityChange = () =&gt; {
      setAddContentButtonOpacity(addContentButtonOpacity-0.1);
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And also if this would work and my button becomes invisible, how would I make it not touchable so that the invisable button cant be clicked by mistake/randomly?
  Any idea how to implement this?</p>