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

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,
    ]);
}

score 0 · Answer 1 · answered Apr 24 '20 at 09:10

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.

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

1 Answers1