bamlab / react-native-image-header-scroll-view

ScrollView with an image in header which becomes a navbar
MIT License
997 stars 99 forks source link

Header image has no parallax effect #42

Closed bbeckk closed 5 years ago

bbeckk commented 6 years ago

The foreground image sits still and has no parallax effect. I want to move header image slowly as well until it is fixed as header. How can I do that?

See the video here The image doesn't move up slowly as the contents below it moves upward.

<HeaderImageScrollView
    maxHeight={200}
    minHeight={50}
    minOverlayOpacity={0}
    maxOverlayOpacity={0.3}
    overlayColor="#0000ff"
    overScrollMode="always"
    fadeOutForeground={true}
    renderFixedForeground={() => (
        <View style={{}}>
            <Text style={{}}>Title</Text>
        </View>
    )}
    headerImage={require('.././img.jpg')}
    foregroundParallaxRatio={3}
>
    <View >
        <View style={{ height: 100, backgroundColor: '#4CAF50' }} />
        <View style={{ height: 100, backgroundColor: '#F44336' }} />
        <View style={{ height: 100, backgroundColor: '#009688' }} />
        <View style={{ height: 100, backgroundColor: '#03A9F4' }} />
        <View style={{ height: 100, backgroundColor: '#FF9800' }} />
        <View style={{ height: 100, backgroundColor: '#673AB7' }} />
        <View style={{ height: 100, backgroundColor: '#795548' }} />
        <View style={{ height: 100, backgroundColor: '#FFEB3B' }} />
    </View>
</HeaderImageScrollView>
Nhacsam commented 5 years ago

Sorry but I didn't planned to add this feature to the library. Maybe this could help : https://github.com/i6mi6/react-native-parallax-scroll-view

dwjorgeb commented 4 years ago

This would be a great addition to this (already awesome) library. In my usage, the renderHeader displays a logo, and when it's scrolled up the logo is cut. If I could just parallax the logo a bit upwards would be perfect.