title: Clickable Background underneath a ScrollView [React Native]
body: <p>So, I want to create a layout similar to whats below. [Refer the Image]</p>
  <p>So the background has a full screen <code>MapView</code> (React Native Maps) with <code>Markers</code> over it, which needs to be clickable.</p>
  <p>And there is a <code>Scrollview</code> with full screen height over the <code>MapView</code> which initially has some top-margin associated with its contents.</p>
  <p>But the issue if I arrange my Views this way, the Markers on the map are not clickable in the initial state.</p>
  <pre><code>&lt;View&gt;
    &lt;MapView&gt;
      &lt;Marker clickEventHere&gt;&lt;/Marker&gt;
      &lt;Marker clickEventHere&gt;&lt;/Marker&gt;
    &lt;/MapView&gt;
    &lt;ScrollView fullscreen&gt;
       &lt;View marginTop&gt;&lt;/View&gt;
    &lt;/ScrollView&gt;
  &lt;View&gt;
  </code></pre>
  <p>I am unsure if its really possible to solve this out.</p>
  <p>Initial State
  <a href="https://i.stack.imgur.com/zkRyR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkRyR.png" alt="Initial State" /></a></p>
  <p>After Scrolling
  <a href="https://i.stack.imgur.com/bIsRW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bIsRW.png" alt="After Scrolling" /></a></p>
  <p>Solution Tried</p>
  <pre class="lang-js prettyprint-override"><code>yScrolled = event.nativeEvent.contentOffset.y;
  yValue = this.state.yValue - yScrolled;
  
  upwardScroll = yScrolled &gt; 0;
  
  if(upwardScroll &amp;&amp; (yValue &gt; 0)){
    this.setState({
      yValue: yValue
    });
  }
  
  
  if(yScrolled === 0){
    yScrolled = -10;
  }
  if(!upwardScroll &amp;&amp; (yValue &lt;= scrollViewMarginTop)){
    yValue = this.state.yValue - yScrolled;
    console.debug(&quot;UPDATE DOWNWARD&quot;);
    this.setState({
      yValue: yValue
    });
  }
  </code></pre>