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
React Native: Require() with Dynamic String
Ruby on Rails 4 JavaScript Not Executed
Embed a JavaScript Engine in an iOS Application
Sorting a JSON Object in JavaScript
Wkwebview - Complex Communication Between JavaScript & Native Code
How to Update Single Value Inside Specific Array Item in Redux
iOS Uiwebview JavaScript - Insert Data -Receive Callbacks
Access Parent's Parent from JavaScript Object
In iOS8 Using .Focus() Will Show Virtual Keyboard and Scroll Page After Touch
How to Print Part of a Rendered HTML Page in JavaScript
JavaScript Dom Changes in Touchmove Delayed Until Scroll Ends on Mobile Safari
JavaScript with Embedded Ruby: How to Safely Assign a Ruby Value to a JavaScript Variable
Wkwebkit JavaScript Execution When Not Attached to a View Hierarchy
Jquery Clone() Not Cloning Event Bindings, Even with On()
Creating a "Sticky" Fixed-Position Item That Works on iOS Safari
How to Update Window.Location.Hash Without Jumping the Document