How to get scrollY point in React Native - react-native

Question

I'm building a header and I want to hide the header content UNTIL the user scrolls down to the certain point.
(My Approach)
Get scrollY position (How much did user scroll vertically from top?)
if scrollY is greater than 50
show the header name.
Here is render() method. I manually built header. I'm getting scrollY value and set it to this.state.scrollY
<View style={{flex:1}}>
<View style={styles.header}>
{this._renderHeader(profile.username)}
</View>
<ScrollView style={styles.root}
onScroll={(event)=>{this.setState({scrollY: event.nativeEvent.contentOffset.y})}}>
// setting this.state.scrollY for scroll Y position
...
Here is _renderHeader function. (rendering header)
_renderHeader = (username) => {
return (
<View style={styles.headerLayout}>
<View rkCardHeader style={styles.left}>
...
<View style={{justifyContent: 'center'}}>
{this._renderUsername(username)}
// I want to show this string ONLY IF user
// scrolls down the window to the certain point.
</View>
....
</View>
);
}
(Here is the problem) This doesn't render only or it doesn't trigger _renderUsername.
_renderUsername = (username) => {
let show = (this.state.scrollY > 50) ? true : false;
if(show) {
return (
<RkText rkType='header3'>{username}</RkText>
);
} else {
return <View />
}
}

Answer 1

You can keep a track of scrollY in redux store and map it to the header component.
While rendering the header component use ternary expression to decide whether to render or not.
For example -
(From the store you will get the value this.props.scrollY)
render() {
return (
{this.props.scrollY > 50 ? <AppHeader /> : ""}
);
}