Flickering when scrolling down

[chrissloey]

Hey

I've noticed when scrolling down, a gap appears between the header background and the content. I've made a gif to demonstrate.

Gif

Code is pretty much the non-list example code, with a backgroundColor on content to make the gap more obvious. It was recorded on the simulator, on device (iPhone 6) the issue is still there but not as pronounced.

Maybe this is just a limitation of the animated view trying to keep up with the scrolling - I couldn't figure out how to fix it.

[jaysoo]

@chrissloey Hey, thanks for reporting. I don't think there is much I can do about this at this moment because it's a limitation of the Animation API. It might be better when not running in dev mode because the JS instrumentation (for debugging) will mean less lag.

A quick solution is to provide background color to the parent component as well. See this modified render method on the NestedView example (background color is cyan).

return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 60, backgroundColor: 'green' }}/>
        <View style={{ flex: 1, backgroundColor: 'cyan', flexDirection: 'row' }}>
          <View style={{ width: 60, backgroundColor: 'red' }}/>
          <ParallaxScrollView
              style={{ flex: 1, backgroundColor: 'hotpink', overflow: 'hidden' }}
              renderBackground={() => <Image source={{ uri: `https://placekitten.com/414/350`, width: window.width, height: 350 }}/>}
              renderFixedHeader={() => <Text style={{ textAlign: 'right', color: 'white', padding: 5, fontSize: 20 }}>Hello</Text>}
              parallaxHeaderHeight={ 350 }>
            <View style={{ backgroundColor: 'cyan', alignItems: 'center' }}><Text style={{ fontSize: 30 }}>Meow!</Text></View>
          </ParallaxScrollView>
          <View style={{ width: 60, backgroundColor: 'orange' }}/>
        </View>
        <View style={{ height: 60, backgroundColor: 'blue' }}/>
      </View>
    );

[winfieldco]

Was also seeing this in simulator in dev mode. Was able to get this to work with a bit of hack, in _renderBackground, just add to the height a bit for the background, for example:

return (
  <Animated.View
    style={[styles.backgroundImage, {
        backgroundColor: backgroundColor,
        height: parallaxHeaderHeight + 100,

So basically the background image will just extend below but behind the content still, covering up the small area that appears on scroll. I added a prop to the component for this in my fork.