react native use of debounce doesnt work on android device

Question

The wrapper component below works fine for IOS but doesnt actually debounce when run on android. i.e if I pound the opacity it generates lots of calls

any clues?

I havent been able to find anything that says it shouldnt work on Android

constructor(props) {
  super(props)

  this.onPressDebounced = _.debounce((...params) => this.onPressed(...params), 500, {
    'leading': true,
    'trailing': false
  })
}

onPressed(...params) {
  if (this.props.onPress) {
    this.props.onPress(...params)
  }
}

render() {
  return ( <TouchableHighlight { ...this.props } onPress = { this.onPressDebounced }> {this.props.children} </TouchableHighlight>
  )
}

Answer 1

I met this problem today. And I found a simple solution to avoid touch bounce.

So I check the variable this.lockSubmit before execute core service codes. Exit function if it is a falsy value, because it means there have another unfinished touch invoke.

The next statement is set this.lockSubmit to true.

And then I can execute async operation or navigate operation after this.lockSubmit = true

After service codes has been callback or finished. I set this.lockSubmit to false. this statement means a touch invoke is finished. But sometimes the service codes will finish quickly, so I add setTimeout to relase this lock variable delay.

class PageA extends React.Component {
    // also work well with async function
    onSubmit() {
        if(this.lockSubmit) return;
        this.lockSubmit = true;

        // validate form
        if(this.form.validate()) {
            // jump to another page
            this.props.navigation.push('Uploading');
        }

        this.setTimeout(() => this.lockSubmit = false, 500);
    }

    render() {
        return (
            <TouchableOpacity onPress={this.onSubmit.bind(this)}>
                <Text>Submit</Text>
            </TouchableOpacity>
        );
    }
}