Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to catch the tap down event on React Native?

Tags:

react-native

I want to catch the event when a user taps on the view. Currently, I use the TouchableXXX components to catch user onPress (seems like onPress catches the onTapDown event only).

like image 904
Tuan Chau Avatar asked Feb 12 '18 07:02

Tuan Chau


People also ask

How do you get touch events in React Native?

You will need to wrap your view object with TouchableOpacity or one of the other Touchable components. With TouchableOpacity you have the onPress prop that is passed a press event. From this press event you have access to the x,y coordinates of the press.

Can touch out side a view component be detected in React Native?

As Andrew said: You can wrap your View with TouchableWithoutFeedback and adding a onPress you can detect when the view is tapped.

Which callback is called when a button is tapped in React Native?

Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button. This is an API that works both on Android and iOS and can show static alerts.


2 Answers

You can set onTouchStart and onTouchEnd handlers on any View via props, for example:

<View onTouchStart={() => this.doSomething()} />

For general information about RN touches see the Handling Touches guide. In case you need a more complex, or custom touch handling, see the Gesture Responder System guide.

like image 62
Artal Avatar answered Sep 24 '22 05:09

Artal


The accepted answer does not work anymore. The correct way is to use Touchable's onPressIn()

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#onpressin

like image 30
Alt Eisen Avatar answered Sep 22 '22 05:09

Alt Eisen