I'm trying to hide header when scrolling in FlatList , it's currently working, but some bugs, some blur when I scroll, I'd just like it to disappear in a smooth way.
My code is currently as follows.
state = {height: new Animated.Value(50)}
setAnimation(disable) {
Animated.timing(this.state.height, {
// Se eu deixo a duracao 1, ele demora para sumir, se eu deixo 0, ele some rapido, mas da uns bugs
duration: 1,
toValue: disable ? 0 : 50
}).start()
}
handleScroll(event) {
this.setAnimation((event.nativeEvent.contentOffset.y > 50));
this.setState({ isNavBarHidden: !this.state.isNavBarHidden });
}
<AnimatedNavigationBar style={{height: this.state.height, backgroundColor: '#f7f7f8' }}>
<Body style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('./../images/logo.png')} style={{resizeMode: 'contain', width: 90}} />
</Body>
</AnimatedNavigationBar>
<FlatList onScroll={this.handleScroll.bind(this)}></FlatList>
The error that occurs is the following (only when I leave the duration: 0 ), when scrolling the screen, holding the finger, the screen of the trembling one, if I roll by drawing the finger quickly, everything happens perfectly. >
Also, I do not know for sure if my method I'm trying to do is right.