TouchableOpacity triggering <input> and <TextInput>

[bcpugh]

The problem
On safari mobile, TouchableOpacity will trigger another component at the same location when changing views (if second component is an "<input>" or "<TextInput>").

<input> example provided below. Similar behavior for a TextInput at same location; however, unable to reproduce succinctly in sandbox (using Redux Form for this implementation).

How to reproduce
https://codesandbox.io/s/6njwzqojnr
(I tried to minimize redux / router code).
If you load on mobile safari on iPhone and click the upper left of the first component (i.e.TouchableOpacity, blue) it will trigger the second component (i.e. <input>, red).

Steps to reproduce:

1. TouchableOpacity overlapping where in second view, w/ onPress triggers view change
2. User touches TouchableOpacity in the overlapping location
3. gets triggered unintentionally. Longer presses increase frequency of unexpected behavior

Expected behavior
Expected touchstart and touchend events only.
(Using safari devtools hooked up to my iPhone, recorded events are: touchstart, touchend, mouseover, mousemove, mousedown, mouseup, and click (<-- targets the input file). In my app, the final click gets fired twice, even.

RNW: 0.9.6
RN: 0.57.4
Browser: Safari (iOS12, iPhone 7)

[hushicai]

i think this is caused by mouse event, even though the emulated mouse events filter time is now 1000ms from c3cbd53, it is still happen sometimes in some browser, such as Tencent QQ.

my solution is to disable the mouse event if in touch screen.

if ('ontouchstart' in window) {
  let stop = e => {
    return e.stopPropagation();
  };

  document.body.addEventListener('mousemove', stop, true);
  document.body.addEventListener('mousedown', stop, true);
  document.body.addEventListener('mouseup', stop, true);
}

mouse event make no sense in mobile.

and if app is runnning on pc, mouse event will not be disabled because of 'ontouchstart' in window.

[necolas]

There are PC with touch screen so the single window check is not safe

[hushicai]

ok, but it works indeed.

the problem is that touch and mouse happened together.

if touch is supported on a device, then ignore mouse event; otherwise, use mouse event.

[tafelito]

I'm having a similar issue I think, where the onPress doesn't get called, most of the time, but in my case it doesn't matter what the first child is, and it happens if I'm in chrome desktop, but not in chrome mobile (responsive) neither in safari.
What I notice is that when it works, is because I try no to move the mouse, just click. If I slightly move the mouse while clicking, then the onPress event doesn't fire

related to #1124

[necolas]

Closing this issue so we can coordinate findings and solutions in #1219