I am using react native(0.61) to build an app with scroll view on home screen. i have to implement header bar with auto hide and need to add refresh and infinite scroll (Like Facebook Timeline). so i implemented auto hide header with React native animation. now i cannot identify refresh and scroll to bottom gestures.
now i need to implement refresh,autohide header and infinite scroll in same screen. (i have added what i tried)
const HEADER_HEIGHT = 120;class HomeScreen extends Component { constructor(props) { super(props); this.scrollY = new Animated.Value(0); this.diffClamp = Animated.diffClamp(this.scrollY,0,HEADER_HEIGHT); this.headerY = this.diffClamp.interpolate({ inputRange: [0, HEADER_HEIGHT], outputRange: [0, -HEADER_HEIGHT], }); } onScroll(nativeEvent){ if (this.isCloseToBottom(nativeEvent)) { this.loadMoreData(); } } isCloseToBottom({layoutMeasurement, contentOffset, contentSize}) { const paddingToBottom = 100; return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom; } render(): * { return (<View><Animated.View style={{ position: 'absolute', width: '100%', top: 0, left: 0, backgroundColor: '#8c8c8c', height: HEADER_HEIGHT, transform:[ { translateY:this.headerY } ] }}><Text>Hiii ALL</Text></Animated.View><Animated.ScrollView scrollEventThrottle={16} //I have to use this due to Header disappear when user scroll down to refresh bounces={false} //i used this previously to mange refresh. its not working because bounces={false} refreshControl={<RefreshControl refreshing={this.props.refreshing} onRefresh={() => this.onRefresh()}/>} //in previous for infinte scroll onScroll={({nativeEvent}) => this.onScroll(nativeEvent)} //now need to add this way to manage Auto Hide navbar onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.scrollY, }, }, }], )} //I tried this but it does not working at all onScroll={(e)=>{ Animated.event( [{ nativeEvent: { contentOffset: { y: this.scrollY, }, }, }], ); this.onScroll(e) }}> //content</Animated.ScrollView></View> ); }}