My reanimated works more than once. How can make this animation work for once? - react-native

Question

I'm trying to make my tabbar dissappear while scrolling down with animation. onScroll sends boolean value if last y coord is bigger than current y coord its scrolling up and otherwise scrolling down. If I continue to scroll down onScroll still sends true value to my function and animaton works more than once. How can i disable position so only toValue is gonna work and my function will not trigger again and again while returning boolean value is same from onScroll.
function runTiming(value, dest) {
const clock = new Clock();
const state = {
finished: new Value(0),
position: new Value(0),
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 200,
toValue: new Value(0),
easing: Easing.inOut(Easing.cubic),
};
return block([
cond(clockRunning(clock), 0, [
set(state.finished, 0),
set(state.time, 0),
set(state.position, value),
set(state.frameTime, 0),
set(config.toValue, dest),
startClock(clock),
]),
timing(clock, state, config),
cond(state.finished, debug('stop clock', stopClock(clock))),
state.position,
]);
}

Answer 1

This might be due to the onScroll event being fired more than once.
I just coded this yesterday and will give you the code that is working and has been tested:
export const throttle = (func, limit) => {
let inThrottle
return function() {
const args = arguments
const context = this
if (!inThrottle) {
func.apply(context, args)
inThrottle = true
setTimeout(() => inThrottle = false, limit)
}
}
}
class MainComponent extends PureComponent {
constructor(props) {
super(props);
this.offset = 0;
this.isAnimatingMenu = false;
this.onScroll = this.onScroll.bind(this)
};
onScroll = throttle(event => {
const currentOffset = event.nativeEvent.contentOffset.y;
const direction = currentOffset > this.offset ? 'down' : 'up';
const diff = currentOffset - this.offset;
if (direction === 'down' && diff > 9 && !this.isAnimatingMenu) {
this.isAnimatingMenu = true
this.onHideMenu(() => this.isAnimatingMenu = false)
}
if (direction === 'up' && diff < -9 && !this.isAnimatingMenu) {
this.isAnimatingMenu = true
this.onShowMenu(() => this.isAnimatingMenu = false)
}
this.offset = currentOffset;
}, 75)
render() {
<FlatList
windowSize={1}
bounces={false}
style={styles.flex1}
scrollEventThrottle={75}
onScroll={this.onScroll}
renderItem={this.renderItem}
data={this.deriveHomeWidgetsDataFromProps()}
/>
}
}
In the functions onHideMenu and onShowMenu call your animation function to show/hide the menu. onScroll can be implemented on ScrollView or SectionList aswell. If you need more help let me know.