title: Problems with parallax header in react native
body: <p>Trying to write a parallax scroll view in react native. First off, this is what I have so far:</p>
  
  <p><a href="https://i.stack.imgur.com/Y58AU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y58AU.gif" alt="enter image description here"></a></p>
  
  <p>The only problem, as you can see in the GIF above, is that, children in scroll view disappear at the red line, which is the <code>ScrollView</code>'s original top border position. I've tried to change the top border position but it doesn't work, continue to read. The height of the parallax header is <code>170px</code>, after <code>100px</code> scrolled, the image stops going up, therefore, the sticky header height is <code>70px</code></p>
  
  <p>Here is the code for the GIF above:</p>
  
  <pre><code>const parallaxHeaderHeight = 170;
  const headerHeight = 70;
  const headerDiff = parallaxHeaderHeight - headerHeight;    // 100px
  
  class ParallaxScrollView extends Component {
      constructor(props) {
          super(props);
  
          this.scrollY = new Animated.Value(0);    // How many pixels scrolled
      }
  
      &lt;View style={{ flex: 1 }}&gt;
          &lt;Animated.Image
              source={{ uri: '...' }}
              style={{
                  width: ..., height: ...,
                  transform: [
                      {
                          translateY: this.scrollY.interpolate({
                              inputRange: [-1, 0, headerDiff, headerDiff + 1],
                              outputRange: [0, 0, -headerDiff, -headerDiff]
                          })
                      },
                      {
                          scale: this.scrollY.interpolate({
                              inputRange: [-1, 0, 1],
                              outputRange: [1.005, 1, 1]
                          })
                      }
                  ]
              }}
          /&gt;
          &lt;Animated.ScrollView
              scrollEventThrottle={1}
              onScroll={Animated.event(
                  [{ nativeEvent: { contentOffset: { y: this.scrollY } } }],
                  { useNativeDriver: true }
              )}
          &gt;
              // Then, render children here
          &lt;/Animated.ScrollView&gt;
      &lt;/View&gt;
  }
  </code></pre>
  
  <p>Then, I've tried to transform the top border of scroll view, but this happens:</p>
  
  <p><a href="https://i.stack.imgur.com/gIgeP.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gIgeP.gif" alt="enter image description here"></a></p>
  
  <p>Look at the first child of the scroll view, <code>0</code>, it disappears when I've scrolled <code>100px</code>, but what I want is for it to stay viewable when scrolling the first <code>100px</code>. I know why this is happening, but I can't find a solution. How should I modify my code?</p>