Change styles view is scrolling

[monolithed]

return <ParallaxScroll { ...header }
    renderHeader={ () => {
            return <TouchableOpacity onPress={ this.onReset } style={ styles.backControlBlock } >
                        <Icon style={ styles.backControl } name='ios-arrow-back' />
                    </TouchableOpacity>;
        }}
        renderParallaxBackground={ () => {
            return <Image style={ styles.image }  source={{ uri: image }} />;
        }}
    >
        { lthis.showSearchResults() }
    </ParallaxScroll>;

Is there any way to change styles (red color) when view is scrolling?

[z4o4z]

Hi @monolithed! Yep, renderHeader method gets this object { width, height, animatedValue } as parameter, so, you can use animatedValue to make interpolation. The code will be something like that:

return (
    <ParallaxScroll { ...header }
        renderHeader={({ animatedValue }) => {
            const backgroundColor = animatedValue.interpolate({
                inputRange: [0, parallaxBackgroundHeight],
                outputRange: ['rgba(255, 0, 0, 1)', 'rgba(255, 0, 0, 0)'],
            });
            return (
                <TouchableOpacity onPress={ this.onReset } style={{ backgroundColor }} >
                    <Icon style={ styles.backControl } name='ios-arrow-back' />
                </TouchableOpacity>
            );
        }}
        renderParallaxBackground={ () => {
            return <Image style={ styles.image }  source={{ uri: image }} />;
        }}
    >
        { this.showSearchResults() }
    </ParallaxScroll>
);

[monolithed]

@z4o4z, wow, thank you so much!