title: View overlay Image in ScrollView
body: <p>I'm having some trouble creating the desired UX effect in React Native and I'm looking for some guidance on how I can go about creating the desired effect. I've found a lot of different parallax libraries, but none of them supports the overlay effect (See drawing below - Round corners).</p>
  
  <p><a href="https://i.stack.imgur.com/P8biP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P8biP.png" alt="Mockup of idea"></a>
  The left screen is the initial screen. Where the orange view overlays the background image. When a user starts to scroll down the image should disappear and the header should appear like the right image. The 'back' button and the 'done' button should be static and not move an inch.</p>
  
  <p><strong>End result:</strong></p>
  
  <p>I'm looking for something like this: <a href="https://github.com/kyaroru/RNParallax" rel="nofollow noreferrer">https://github.com/kyaroru/RNParallax</a> just where the white area overlays the image and has round corners as depicted below.</p>
  
  <p><strong>What I have tried so far:</strong></p>
  
  <p>I've tried to use the code snippet below to create the effect. I have then applied styling to the 'orange view' e.g. <code>top: -40</code> to create the overlay effect. This just has the side effect of over scrolling aka. over scrolls with 40.</p>
  
  <pre><code>getInitialState: function() {
      return {
          scrollY: new Animated.Value(0)
      }
  },
  render() {
      return (
          &lt;ScrollView
              scrollEventThrottle={16}
              onScroll={Animated.event(
                              [{nativeEvent: 
                              {contentOffset: 
                                  {y: this.state.scrollY}
                              }
                              }]
              )}&gt;
      // etc ...
  }
  </code></pre>