How to Enable Touch on Multiple Buttons Simultaneously in React Native

How do I enable touch on multiple buttons simultaneously in react native?

This problem can easily be resolved using onTouchStart, onTouchEnd props of View component without using gesture responder methods.

So the modified code will look like

<View>

  <View onTouchStart={()=>this.console("Button 2 Clicked")}>
    <Text>BUTTON 2</Text>
  </View>

  <View 
    onTouchStart={()=>this.console('Button 1 pressed')}
    onTouchEnd={()=>this.console('Button 1 released')}>
      <Text>BUTTON 1</Text>
  </View>

</View>

react native how to call multiple functions when onPress is clicked

There are a few ways to achieve this. One option would be to define a function that calls functionOne and functionTwo, and pass that on your onPress handler like so:

functionOne(){
// do something
}

functionTwo(){
// do something
}

functionCombined() {
    this.functionOne();
    this.functionTwo();
}  

<TouchableHighlight onPress={() => this.functionCombined()}/>

Alternatively, and more concisely, you could express functionCombined inline in your JSX like so:

functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight
 onPress={
  () => { this.functionOne(); this.functionTwo(); }
 }
/> 

      

Prevent Double tap in React native

https://snack.expo.io/@patwoz/withpreventdoubleclick

Use this HOC to extend the touchable components like TouchableHighlight, Button ...

import debounce from 'lodash.debounce'; // 4.0.8

const withPreventDoubleClick = (WrappedComponent) => {

  class PreventDoubleClick extends React.PureComponent {

    debouncedOnPress = () => {
      this.props.onPress && this.props.onPress();
    }

    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });

    render() {
      return <WrappedComponent {...this.props} onPress={this.onPress} />;
    }
  }

  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName ||WrappedComponent.name})`
  return PreventDoubleClick;
}

Usage

import { Button } from 'react-native';
import withPreventDoubleClick from './withPreventDoubleClick';

const ButtonEx = withPreventDoubleClick(Button);

<ButtonEx onPress={this.onButtonClick} title="Click here" />

---

Related Topics