Header flickers on Android

[juanmiret]

Hey! First, this component is absolutely great. Thank you for sharing it.

I'm having a little issue, in Android devices the header flickers when scrolling, it's like it has a little delay when adjusting position. Anyone having the same issue and any ideas if we can solve it?

[z4o4z]

@juanmiret Hi, thanks! Can you provide your Android device and version. And which lib's version do you use ? And will be better to have example of code.

[juanmiret]

I'm testing in an Nexus 4 emulator with android 7.1.1 and in a Moto G real device with android 6.0 and in both cases the flickering is present when you scroll. I'm using the latest release from NPM, i think it is 1.3.2

This is the code where I use the component

Some notes before:

• If header background color isn't a passed prop but 'rgba(0,0,0,1)' the flicker is present anyway

• If headerHeight isn't variable between platforms but is of a fixed height, let's say 54px, the flicker is present anyway

import React from 'react'
import { View, StyleSheet, Platform, TouchableWithoutFeedback, Image } from 'react-native'

import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

const PublicationLayout = ({ backgroundImageSource, onForegroundPress, children, backgroundColor }) => (
  <View style={[ styles.publication, { backgroundColor }]}>
    <ParallaxScroll
      parallaxHeight={300}
      headerHeight={Platform.OS == 'ios' ? 64 : 54}
      isHeaderFixed={true}
      isForegroundTouchable={true}
      fadeOutParallaxForeground={true}
      fadeOutParallaxBackground={true}
      parallaxBackgroundScrollSpeed={5}
      parallaxForegroundScrollSpeed={1}
      headerFixedBackgroundColor={backgroundColor}
      headerBackgroundColor='rgba(0,0,0,0.3)'
      renderParallaxBackground={() => (
        <Image source={backgroundImageSource} style={styles.backgroundImage} />
      )}
      renderParallaxForeground={() => (
        <TouchableWithoutFeedback onPress={onForegroundPress}>
          <View style={styles.foreground}>
          </View>
        </TouchableWithoutFeedback>
      )}
      renderHeader={() => <View style={styles.header} />}
    >
      {children}
    </ParallaxScroll>
  </View>
)

const styles = StyleSheet.create({
  publication: {
    flex: 1,
    overflow: 'hidden'
  },
  header: {
    height: Platform.OS == 'ios' ? 64 : 54,
    paddingTop: Platform.OS == 'ios' ? 20 : 0,
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  foreground: {
    height: 300,
    alignItems: 'center',
    justifyContent: 'center'
  },
})

export default PublicationLayout

[z4o4z]

@juanmiret thanks! I will try to find some solution!

[z4o4z]

@juanmiret Hi. I just tried to reproduce your problem and everything looks fine for me.

I used folowing devices: Sony Xperia Z5(Android 7.1), Samsung Galaxy Tab 2(Android 5.0), Samsung Galaxy S7 edge (Android 7.0), Asus Nexus 7(Android 6.0).

Can you ensure that you use latest version of the library? Because this problem was in the previous versions of library.