I want the opacity to go to 0 as I start to scroll down and the opposite as I scroll up. My code currently achieves a similar effect, but not as responsive. First, it goes to opacity: 1 abruptly, not gradually, and 2) the change happens late no matter how much I change the inputRange.

    const [inputAnimation] = useState(new Animated.Value(0))
    const inputInterpolate = inputAnimation.interpolate({
        inputRange: [0, 10],
        outputRange: [1, 0]
    })

    const animatedInputStyles = {
        opacity: inputInterpolate
    }

return (
        <View
            style={[styles.upperContainer]}
        >
            <View style={styles.textInputContainer}>
                <Animated.View style={animatedInputStyles}>
                    <TextInput
                        style={styles.textInput}
                        onChangeText={text => onChangeText(text)}
                        value={value}
                    />
                </Animated.View>
            </View>
        </View>
        <HeaderImageScrollView
            contentContainerStyle={styles.container}
            maxHeight={400}
            minHeight={0}
            onScrollBeginDrag={Animated.event([
                {
                    nativeEvent: {
                        contentOffset: {
                            y: inputAnimation
                        }
                    }
                }
            ])}
        >
        </HeaderImageScrollView>
)

How do I make the opacity animation more responsive?

1. Put a gif for basic usage

In https://github.com/bamlab/react-native-image-header-scroll-view#basic-usage, there is no gif so the user looks at demo gif which is not related

2. Triggering view

When reading the commentary I did not understand what is happening and why this is for.

Maybe a schematic of how the view is used like this:

and an small sentence about why : "triggering view is a spy view you put on the page that will can call various callback during the scroll" or something like this.

Hi there, this component works great but we have one issue with it: our app supports multiple languages and some of them need different max header heights to fit the header content. Would be nice to be able to grow the header if the content inside pushes its boundaries

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>

With the new versions of react native many methods become obsolete, do you plan to update the library?
Thank you!

on rotating the phone these problems appear:

1. image won't resize to fit the full width.
2. if the nav title is visible and you rotate the phone it will stay and won't animate to hidden anymore.

b773058
When will this release be released, please. Do I take the 0.6.1 version or the previous code?

I made a Header using react native-base library to control better the Left and Right position. By doing this, the onPress function inside a Button (again, from native base) doesn't do anything

<HeaderScrolLView
    renderHeader={() => (
        <Header>
            <Left>
                <Button onPress={() => this.someFunction(someProps) >
                    <Icon name='arrow-back' />
                </Button>
            </Left>
        </Header>
    )}
>
{ . . . }
</HeaderScrollView>

I'm getting an UNMET PEER DEPENDENCY [email protected] during install..

I have:
"react": "16.0.0-alpha.12",
"react-native": "^0.47.0",

I've used a server data to load an image. It shows blank for a moment. How can I add the placeholder image here?

<HeaderImageScrollView
headerImage={{uri: ('http://zzz.com/' + this.state.img)}}
>
	<Text style={styles.title}>The Village Cafe</Text>
	
</HeaderImageScrollView>

Hi There,

I want to customise renderHeader prop by passing carousel component.
renderHeader={() => <View style={{width: '100%', height:'100%', backgroundColor:'#2E343D'}}> <Carousel ref={(c) => { this._carousel = c; }} data={this.state.entries} renderItem={this._renderItem} sliderWidth={Dimensions.get('window').width} itemWidth={Dimensions.get('window').width} onSnapToItem={(index) => this.setState({ activeSlide: index }) } /> </View>}

But the horizontal scroll doesn't work in it. However if pass the same carousel component in renderForeground prop then it works.

Could you please advice on it?

Hello, i'm trying to use the header scroll but the header is not rendering anything, I can change the Heights, Overlays and the headerContainerStyle, but when i try to put some text in the renderForeground it doesn't show or renderFixedForeground, what am I missing?

{
"react": "16.6.3",
"react-native": "0.58.4"
}

<HeaderScrollView 
  bounces={false}
  minHeight={80}
  maxHeight={300}
  minOverlayOpacity={0}
  maxOverlayOpacity={0}
  headerContainerStyle={{backgroundColor: '#F4511E'}}               
  renderForeground={() => {
    <View style={{ height: 150, justifyContent: "center", alignItems: "center" }} >
      <TouchableOpacity onPress={() => console.log("tap!!")}>
        <Text style={{ backgroundColor: "transparent" }}>Tap Me!</Text>
      </TouchableOpacity>
    </View>
  }}
>
   {this.props.children}
</HeaderScrollView>

How make ‘View’ foreground of ‘renderFixedForeground’ and make active element?
Like on second screenshot but slider active.

Need

This component works great out of the box, however, I've added a form below the header and wrapped a KeyboardAvoidingView (behavior="position") around that. This works, but the header stays in place instead of moving with the rest of the view. Some ideas on how to make those compatible would be welcome.

On the following line:
https://github.com/bamlab/react-native-image-header-scroll-view/blob/master/src/ImageHeaderScrollView.js#L258

MarginTop is set, so whenever SectionList with sticky headers gets scrolled, sticky headers stick to the bottom of the header image.
Im not too sure if interpolating the marginTop depending on a Scroll position is the right approach.
@bamlab-bot

I was hoping to customize the header... maybe have a few buttons.
But the touches don't seem to persist on the renderHeader section, is there a possible workaround for that.

Is there any way that I can set max or min overlay color seperately?

I am trying to use react-native-tab-view
inside the ImageHeaderScrollView component but couldn't ..
I can see that one of that components props is ScrollViewComponent of type ScrollView,
But still couldn't do it ,

screen that I am working on

TabView to nest in ImageHeaderScrollView

Hi, tanks for this amazing component.
I'm having an issue tapping on a button inside the renderFixedForeground.
When I scroll down and the header collapses, it works perfectly.

In the following example you can see that the button is not tappable until you scroll all the way down.
Thanks in advance.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Button
} from 'react-native';
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';

export default class imageScroll extends Component {
  render() {
    return (
      <HeaderImageScrollView
        maxHeight={200}
        minHeight={58}
      
        renderFixedForeground={() => {
          return(
          <View style={styles.header}>
            <Button title="TEST" onPress={() => console.log('tap!!')}/>
          </View>)
           
        }}
        renderHeader={() => (
          <Image source={require('./photo.jpg')} style={styles.image} />
        )}
      >
        <View style={{ height: 1000 }}>
          <TriggeringView onHide={() => console.log('text hidden')} >
            <Text>Scroll Me!</Text>
            
          </TriggeringView>
        </View>
      </HeaderImageScrollView>
    );
  }
}

const styles = StyleSheet.create({
  header :{
        flex: 1,
        height: 56,
        padding: 10,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        justifyContent: 'center',
  }
});

AppRegistry.registerComponent('imageScroll', () => imageScroll);

I would like to add a callback onScrollBegin et onAnimationEnd onRescrollToTop et onReachTop on the ImageHeaderScrollView component

I am trying to add pull to refresh functionality using RefreshControl as shown in this example: http://facebook.github.io/react-native/docs/refreshcontrol

The control appears inside the header instead of as part of the content itself even though the scroll view component has marginTop set to the current height of the header. I was wondering if anyone had any insight on how to achieve this?

Hello, it appears that the latest version on npm is 0.5.2, which has problems with React 16. I noticed it's been fixed here in the repo in version 0.6.2. Could someone update the package on npm for me?

Thanks in advance!

I also noticed that ImageHeaderScrollView.js is still importing PropTypes from prop-types even though it's not being used, and is not a dependency in package.json, so it's likely to cause some troubles :)

Is it possible that we can somehow make the scrolling happen even if you swipe on the header? In my app I have it so the image is 80% and the content is 20%, and most people naturally try to swipe up on the middle of the page.

Hello
I'm using the react-native-spring-scrollview lib as a custom ScrollViewComponent, this library helped me a lot with the bounces prop, i.e. it complemented your library in my project. Have you tried it?

how can I remove/disable the bounce and zoom effect while scrolling/ pulling down. I just want to disable that part in iOS.

thanks,

TriggeringView nested FlatList,Two scrolling conflicts.If you touch FlatList block,your react-native-image-header-scroll-view doesn't work.How to solve it.

Thank you for this awesome package.

It works well on IOS, but i found that there is no Grow effect on Android. Is it because of React Native restrictions about ScrollView behaviour on Android?
Is it possible to enable grow effect on android somehow?

Thanks in advance

TriggeringView onHide and onDisplay are not being called as described in the documentation.

<View style={{flex: 1}}>
    <HeaderImageScrollView
        maxHeight={150}
        minHeight={60}
        maxOverlayOpacity={1}
        minOverlayOpacity={0}
        overlayColor={'#f4f4f4'}
        foregroundParallaxRatio={1}
        fadeOutForeground
        renderHeader={() => (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 10, backgroundColor: 'blue'}}>
                <Text>MAIN HEADER</Text>
            </View>
        )}
        renderFixedForeground={() => (
            <Animatable.View style={{flex: 1, height: 60}} ref={fixedForegroundView => {this.fixedForegroundView = fixedForegroundView;}}>
                <Text style={{backgroundColor:'red', height: 60}}>SCROLLED HEADER</Text>
            </Animatable.View>
        )}>
        <View style={{flex: 1, height: 600, paddingVertical: 15, backgroundColor:'yellow'}}>
            <TriggeringView
                onHide={() => this.fixedForegroundView.fadeInUp(200)}
                onDisplay={() => this.fixedForegroundView.fadeOut(100)}>
                <View style={{flex: 1}}>
                    <Text>MAIN CONTENT</Text>
                </View>
            </TriggeringView>
        </View>
    </HeaderImageScrollView>
</View>

"react": "^16.2.0",
"react-native": "0.49.5",
"react-native-image-header-scroll-view": "^0.7.0",

Hey, first of all, thank you for this amazing work!

I'm using it in a special scenario where the header component height is calculated dynamically (using react-native-auto-height-image).

This would be my code:

import React, {Component} from "react";
import {Text, View} from "react-native";

import AutoHeightImage from 'react-native-auto-height-image';
import HeaderImageScrollView, {TriggeringView} from 'react-native-image-header-scroll-view';

const DEFAULT_HEADER_HEIGHT = 500;

export default class WallScreen extends Component {

    componentWillMount() {
        this._setHeaderHeight(DEFAULT_HEADER_HEIGHT);
    }

    render() {

        return (
            <View style={styles.container}>

                <HeaderImageScrollView
                    maxHeight={this.props.headerHeight} // Prop coming from redux state.
                    minHeight={0}
                    fadeOutForeground={true}
                    renderHeader={this._renderHeader.bind(this)}
                >

                    <TriggeringView
                        onHide={this._onHide.bind(this)}
                        onDisplay={this._onDisplay.bind(this)}
                    >
                    </TriggeringView>

                    <Text>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores at commodi cumque
                        dolor dolorum, ea eaque est excepturi nam, perferendis perspiciatis, porro! A illo ipsa itaque
                        quae rerum unde?
                    </Text>

                </HeaderImageScrollView>

            </View>
        );

    }

    _setHeaderHeight(height){
        // Here I would dispatch the redux action to update 'headerHeight'.
    }

    _renderHeader() {
        return (
            <View>
                <AutoHeightImage
                    width={360} // Hardcoded, not important for this example
                    imageURL='https://example.com'
                    onHeightChange={this._setHeaderHeight.bind(this)}
                />
            </View>
        );
    }

    _onHide() {
        console.log('On hide called');
    }

    _onDisplay() {
        console.log('On display called')
    }

}

Until now, all great! All the layout works great out of the box and my code updates the header height correctly!

BUT the problem comes with TriggeringView.
As you can see, the header height is initialized at 500. Well, as I update the headerHeight prop via redux, TriggeringView will still trigger the onHide and onDisplay callbacks using the 500 initial height.

I took a look at the source and saw that the triggering threshold is based in the initialPageY property, and this property is calculated in the onLayout hook.
So the problem is this that hook is not triggered when the header height changes.

PS: I fixed this adding a new dynamicHeaderHeight prop to HeaderScrollView. Will submit a PR today!

Thanks!

For example, I want to change the navita library of react native to download the images and be able to pass a library like:
https://github.com/DylanVann/react-native-fast-image

and to be able to put a preload:
https://github.com/oblador/react-native-image-progress

For if not lose the effect of interpolation of the image when it is mobilized.
since the properties to be able to make a custom headerRender are not exported or propagated to the renderHeader function.

Hello, you have a small typo in declaration file at 36:32

in interface HeaderImageScrollViewProps
foregroundExtrapolate: ?string;

I found one more :)

interface SourceObjectProps at 10:21

uri?: string,

Is there a way to trigger the bounce/zoom when the user scrolls down by touching the header as well?

Is there a way to make the foreground have transparent background?
I want to have a list of cards floating above the header, but my content always have a white background and I haven't found any way to remove it.

Hi, I was using the 0.6version and it was working fine, although sometimes the component was not rendering but only seldom. Then I upgraded Android Studio and compiled a release apk and it was not working anymore. Went back to dev mode and still not working. Upgraded to latest version .8something just now and still not rendering. The component is showing in dev tools. I am using Android 5.0 on a Note3, RN 0.50, react 16.0.0-alpha.12. Haven t tested on a newer device yet. Any idea what is happening? I am out of options. Thanks!

PS. I also excluded all other components to make sure there is no conflict or so.

Hi mate, First of all thank you for this awesome bundle !
Could you put here the code of your Demo GIF please ?
Thank you ;)

(Merci d'avance :) )

It will be great if you allow the user to choose a blackOverlay color.

I sent pull request, with a few changes.

Can you nest listview?

i've tried both border Bottom Left and Right Radius inside the HeaderImageScrollView, but still no result, i tested this on default navigation options on different headers and everything working fine, but this specific header scroll is having issues, i've tried inside a view, outside the headerimagescrollview, inside contentContainerStyle, inside style={} with a custom stylesheet, and nothing, i don't want to drop this awesome header and start all over again on a different component just because the radius is not showing, i've already spent an entire day figuring this out

Apparently exactly the same code for the TriggeringView doesnt work properly on an Android.

Here is the code:

<TriggeringView
    onHide={() => alert("Hide")}
    onBeginDisplayed={() => alert("Show")}
>
<View style={{ flex: 1 }}>
<Text>Show and hide me</Text>
</View>
</TriggeringView>

The exact same code works just fine on iOS.

你好，感谢你制作了这么棒的组件
问题：
我想把这项目和react-navigation的TabNavigator一起使用
类似效果：

我实现的效果：

具体实现（重现）：
链接
想要得到的帮助：
我的疑问来自于我的实现的TabNavigator不可以向下滑动，希望能告诉我是否可以这样使用

Currently, if the scroll view is at the top when user tries to scroll to the top again the image will scale with the FixedForeground element. Can I disable the scaling for the FixedForeground element? So only the background image is scaled

Hey, i do have a major performance issue on android while scrolling in header.

Are there any restrictions what content should be after the TriggeringView ?

How are you, Nhacsam?

I have to create animation header like this.
https://cdn.dribbble.com/users/194567/screenshots/1716385/movie_animation_phone2.gif

I have installed react-native-image-header-scroll-view npm package.
This is my code:

render() {
	return (
			<HeaderImageScrollView
				maxHeight={200}
				minHeight={HEADER_MIN_HEIGHT}
				minOverlayOpacity={0}
				maxOverlayOpacity={0}
				bounces={false}
				headerImage={require("../../../assets/drawer-cover.png")}
				renderForeground={() => (
					<View style={{ height: 150, justifyContent: "center", alignItems: "center" }} >
						<TouchableOpacity onPress={() => console.log("tap!!")}>
							<Text style={{ backgroundColor: "transparent" }}>Tap Me!</Text>
						</TouchableOpacity>
					</View>
				)}
				>
				<View style={{ height: 1000 }}>
					<TriggeringView onHide={() => console.log("text hidden")}>
						<Text>Scroll Me!</Text>
					</TriggeringView>
					<Text>Teenage Mutant Ninja Tutles(2014)</Text>
				</View>
				
			</HeaderImageScrollView>

	);
}

Is it possible to implement my animation by using your component?
If yes, could you please tell me how can I write code to get same animation of my thought?
I am looking forward to hearing good news from you :)

Thanks

The layout is broken to a point where unfortunately I can't use the package (at least with a flexible height of the ScrollView).

1. The height of the HeaderImageScrollView is the available space, plus the current height of the header.
2. On Android, the ScrollView content has a height content_height - (current height of the header). So if the content is smaller than the header, it isn't visible at all. If the content is taller than the header, it is visible, but minus the height of the header.
   I'm not quite sure if that's the whole story, but it's everything I could inspect. I can't wrap my head completely around it.

Here's is a screenshot of three views, each with a height of 100 and a header-height of 150, in iOS. (The header is the transparent thing above the colored views)

Here's the same on Android.

The render function is pretty straight forward:

      <View style={{ flex: 1 }}>
        <HeaderImageScrollView
          maxHeight={150}
          minHeight={80}
          renderHeader={this._renderTitleBackground}
          renderForeground={this._renderTitleForeground}
          renderFixedForeground={this._renderStickyHeader}
          fadeOutForeground
        >
          <View style={{ height: 100, backgroundColor: 'blue' }} />
          <View style={{ height: 100, backgroundColor: 'red' }} />
          <View style={{ height: 100, backgroundColor: 'green' }} />
        </HeaderImageScrollView>
      </View>

Hi, I was wondering if you guys are interested in type definitions for this library. I would gladly contribute to it as I can see you have some sort of definitions already in the readme file.