Smaller PARALLAX_HEADER_HEIGHT causing extra spacing when scrolling down

[paulwcy]

Updated PARALLAX_HEADER_HEIGHT in the example to 200, and when scrolling down, there's an increasing gap between the list items and parallax image. Anything above 350 seems fine.

[pavb74]

+1

[Shakarang]

@paulwcy Did you find a solution?

[charleyw]

...
              scale: interpolate(scrollY, {
                inputRange: [-viewHeight, 0],
                outputRange: [5, 1],
                extrapolate: 'clamp'
              })
...

It is due the hard coded number 5 in the line outputRange: [5, 1]. I tried to copy the src to my project, and try to adjust the number, and everything goes fine.

But i dont have much knownledge in react native animation, not sure why using 5, and how to determine what number should be used.

Edit: I m using 16:9 image as background, then I adjust the number to 7, everything goes fine.

[ghost]

There really need to be a clear-cut answer to this, as changing the number here does nothing for me.

[Amurmurmur]

Same issue here, tride 7 I can still see the gap :/ Tried to set the background color for the parallax header, but it then overlaps the actual background :/

[eard7]

I've solved this temporary wrapping the Listview in a View with a backgroundColor equals to contentBackgroundColor in ParallaxScrollView. With this, the gap will looks like as if were part of the content

<View style={{backgroundColor: 'rgb(240,240,240)', flex: 1}}>
    <ListView
         .....
         renderScrollComponent={props=> (
                 <ParallaxScrollView
                 ...
            contentBackgroundColor="rgb(240,240,240)"
                  />
          )
          />
</View>

[brycelund]

This can now be solved by setting the prop outputScaleValue={7} in the ParallaxScrollView