I would like to create a sticky header like the one in Whatsapp for Android. My approach, listen to the scroll-event and move the header right away, is stuttering, the one in Whatsapp is very smooth. And all the bounces of the ScrollView are transfered to the header, which looks ugly. The ideal solution would be to move the header first and terminate the pan responder while moving, so that the underlying ScrollView become the responders of the touch event - but this is not possbile.
Have you any suggestions to make this perfect?
Here's what i tried so far. Using Animated.views with Animated.values does not have any effect.
class scrollHeader extends Component { constructor(props) { super(props); this.state = { scrollY: 0 }; this.lastY = 0; } handleScroll(e) { let dy = e.nativeEvent.contentOffset.y - this.lastY; let scrollY = this.state.scrollY + dy; scrollY = Math.min(scrollY, 80); scrollY = Math.max(scrollY, 0); this.setState({ scrollY: scrollY }); this.lastY = e.nativeEvent.contentOffset.y; } render() { const s = StyleSheet.create({ container: { flex: 1 }, menu: { position: 'absolute', height: 160, top: this.state.scrollY * -1, left: 0, right: 0, backgroundColor: '#075e55', zIndex: 1, paddingTop: 40 }, text: { fontSize: 16, padding: 20 }, content: { paddingTop: 160 } }); return (<View style={s.container}><StatusBar translucent backgroundColor={'#06544c'} /><View style={s.menu}><Text>{'Menu Header'}</Text></View><ScrollView style={s.content} onScroll={(e) => this.handleScroll(e)}><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text><Text>{'Test'}</Text></ScrollView></View> ); }}