{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/9288","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/9288/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/9288/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/9288/events","html_url":"https://github.com/facebook/react-native/issues/9288","id":169908569,"number":9288,"title":"[Discussion] dealing with unintentional batched touch events","user":{"login":"DanielZlotin","id":6660239,"avatar_url":"https://avatars.githubusercontent.com/u/6660239?v=3","gravatar_id":"","url":"https://api.github.com/users/DanielZlotin","html_url":"https://github.com/DanielZlotin","followers_url":"https://api.github.com/users/DanielZlotin/followers","following_url":"https://api.github.com/users/DanielZlotin/following{/other_user}","gists_url":"https://api.github.com/users/DanielZlotin/gists{/gist_id}","starred_url":"https://api.github.com/users/DanielZlotin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DanielZlotin/subscriptions","organizations_url":"https://api.github.com/users/DanielZlotin/orgs","repos_url":"https://api.github.com/users/DanielZlotin/repos","events_url":"https://api.github.com/users/DanielZlotin/events{/privacy}","received_events_url":"https://api.github.com/users/DanielZlotin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-08-08T12:13:36Z","updated_at":"2016-10-19T14:35:01Z","closed_at":null,"body":"There is a problem handling quick succession of touches / clicks. This can be categorised as a performance issue.\r\n\r\n### Use case:\r\n* user clicks multiple times and quickly on a button\r\n* events handled in JS by some click handler function which performs a navigation event\r\n* by the time the navigation event gets completed (some screen is pushed, for example, which hides the button) 2 more clicks was already on their way and this same screen gets pushed multiple times\r\n\r\nThis is not a react-native specific problem but it gets compounded by the fact all touch events originate in the native's main thread, dispatched through the bridge asynchronously along with some serialisation mechanism and handled in the JS context (in a different thread).\r\n\r\nThis is very much like the problem with Android's `startActivity(Intent)` which is async, and, if the pushed screen takes too much time to appear, can cause this \"batching\" of events.\r\n\r\nI would appreciate your thoughts on this matter and how do you think it can be handled (with minimum hacks in mind).\r\n\r\nSome example solutions:\r\n* When receiving the event immediately ignore all other events (save something in the state) and enable it back once finished - this is hacky, difficult to maintain, causes the codebase to be a ball of mud, and not alway be possible.\r\n* add a new prop to all buttons (TouchableHighlight, TouchableOpacity etc) that will be called `throttle`. When you specify `throttle=1000` the button will do something like \r\n```\r\n_.throttle(onClick, 1000, {leading:true, trailing:false})\r\n```\r\nwhich just sends the first event and ignores all other touch events on this specific button in a 1000 millisecond window. See [lodash throttle](https://lodash.com/docs#throttle)\r\nThis is also hacky but much simpler to maintain.\r\n\r\nUsing react-native 0.25.1.\r\nHappens on all platforms."},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/254831678","html_url":"https://github.com/facebook/react-native/issues/9288#issuecomment-254831678","issue_url":"https://api.github.com/repos/facebook/react-native/issues/9288","id":254831678,"user":{"login":"DanielZlotin","id":6660239,"avatar_url":"https://avatars.githubusercontent.com/u/6660239?v=3","gravatar_id":"","url":"https://api.github.com/users/DanielZlotin","html_url":"https://github.com/DanielZlotin","followers_url":"https://api.github.com/users/DanielZlotin/followers","following_url":"https://api.github.com/users/DanielZlotin/following{/other_user}","gists_url":"https://api.github.com/users/DanielZlotin/gists{/gist_id}","starred_url":"https://api.github.com/users/DanielZlotin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DanielZlotin/subscriptions","organizations_url":"https://api.github.com/users/DanielZlotin/orgs","repos_url":"https://api.github.com/users/DanielZlotin/repos","events_url":"https://api.github.com/users/DanielZlotin/events{/privacy}","received_events_url":"https://api.github.com/users/DanielZlotin/received_events","type":"User","site_admin":false},"created_at":"2016-10-19T14:35:01Z","updated_at":"2016-10-19T14:35:01Z","body":"No, everything in react-native-navigation is pure native. That's our selling point 😄 "}}
{"actor":{"display_login":"DanielZlotin"}}