Components should be able to listen to tap events

[petehunt]

Question: how do you use touch events with React?

Answer:

• Use CommonJS
• git clone
• edit ReactDefaultInjection.js to include TapEventPlugin
• npm install; grunt
• add React.initializeTouchEvents(true) to your code in the right place

This sucks. Instead I think we should just either put TapEventPlugin on addons or create a react-mobile build which does all this by default.

[shauntrennery]

+1 for a react-mobile build

[bloodyowl]

👍 for the add-on

[appsforartists]

In the meantime, you can do this:

require('react/lib/EventPluginHub').injection.injectEventPluginsByName({
"ResponderEventPlugin": require('react-touch/lib/thirdparty/ResponderEventPlugin'),
"TapEventPlugin": require('react-touch/lib/thirdparty/TapEventPlugin')
});

React.initializeTouchEvents(true);

(I just copied this from react-touch-lib and pointed the require statements at the right files).

---

Edit: Better yet, just use injectTapEventPlugin.

[revolunet]

+1

[b0c1]

please put the TapEventPlugin to the addons (exists in react-addons package) because we want to use Material-UI without nodejs build (we want to use scala js) but we can't compile the TapEventPlugin as standalone (if you compile it will include the react core)...

[d4rky-pl]

+1 on comment above, I'm trying to use it without full nodejs stack and it's next to impossible to do without manual rewriting

[jimfb]

Tap is not a standard event, so we're probably going to rip it out of the core and let people detect taps in user land. The current implementation probably needs a bit of cleanup anyway, to detect things like double taps and long holds.

Anyway, it's only 100 lines of code, available here:
https://github.com/facebook/react/blob/bef45b0b1a98ea9b472ba664d955a039cf2f8068/src/renderers/dom/client/eventPlugins/TapEventPlugin.js

If someone wants to fix it up and publish it as an external library/module, that might be useful to people.

[revolunet]

this maybe ? https://github.com/zilverline/react-tap-event-plugin

[MoOx]

@revolunet this works like a charm for me. It only handle simple tap. Double tap and long tap needs to be "calculated" by hand from this plugin.

[antoinerousseau]

Any update on this? should we make use of the add-on or keep using https://github.com/zilverline/react-tap-event-plugin (once it's fixed for v15.0)?

[sophiebits]

We don't have any supported solution for this. In general we don't support defining custom event types for the same reason we don't have any global configuration: because it makes interoperability difficult (if you develop a component that requires TapEventPlugin, it won't work for someone who doesn't load it).

My best recommendation if you need this is to build a <Tappable onTap={}> component or similar completely in user space without depending on React internals. It should also be possible to fix up react-tap-event-plugin for v15, but we don't support that and can't guarantee that it will still work in a future release.

[antoinerousseau]

Thanks @spicyj for your quick update on this

[antoinerousseau]

Seems that react-tap-event-plugin recently got fixed for React v15 on their master branch. Just tried it and seems to work well again with material-ui. Won't be long before it reaches NPM.

zilverline#65

[0xMarkian]

Hi guys.
Update about react-tap-event-plugin: We may probably don't need to use it now.

As posted #6221(comment)

For some reason, I remembered touch events not being detected without TapEventPlugin being installed. I just tested it, and that is no longer the case. Since Chrome and Safari have both removed their tap delays for mobile pages, it's probably time to stop using TapEventPlugin and just us the onClick event.

[shishirarora3]

Hi,

I was using fastClick.js for touch based devices. Is it no more needed with react?

Regards’
Shishir Arora

On 23-Aug-2016, at 9:25 PM, Markian Ivanicho [email protected] wrote:

Hi guys.
Update about react-tap-event-plugin: We may probably don't need to use it now.

As posted here #6221 (comment)
For some reason, I remembered touch events not being detected without TapEventPlugin being installed. I just tested it, and that is no longer the case. Since Chrome and Safari have both removed their tap delays for mobile pages, it's probably time to stop using TapEventPlugin and just us the onClick event.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub #436 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/AIKvJrPnBqLjdcL8hpsIb5_3pzbOhmrhks5qixfrgaJpZM4BHEoN.

[dickeylth]

@markwain For many popular apps that relying on webview to show web pages in China, such as Weixin, Taobao, Alipay, they are still using the old UIWebView in iOS, which still has no love for removing tap delays for mobile pages, so the tap event is still necessary for several years...

[deepfriedbrain]

And I would think that older mobile devices that cannot be updated to the latest versions of Chrome/Safari would also need the plugin.

[gaearon]

I started a new thread to discuss how we can move the ecosystem to stop depending on react-tap-event-plugin. It will break for good eventually.

As @sophiebits suggested, it sounds reasonable if folks who depend on it create a userland <Tapable> component instead, and others can depend on it. Let’s discuss this effort in #11689.