React-native-web: <Text> onPress inside a <TouchableX> with onPress trigger both of them

[MathieuUrstein]

The problem
Pressing a Text component with an onPress props into a TouchableX component will trigger both onPress while nested Touchable only triggers the inner Touchable

How to reproduce
Simplified test case: https://codesandbox.io/s/eloquent-boyd-53z02

Steps to reproduce:

1. Create a <TouchableOpacity> or <Touchable Highlight> with a functional onPress prop
2. Create a <Text> with a functional onPress prop inside the previously created touchable
3. Press the <Text>
4. Both onPress props are triggered

Expected behavior
Only the <Text> onPress props should be triggered (As in iOS & Android)

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.11.x
• React (version): 16.12.0
• Browser: Chrome Version 80.0.3987.163 (Official Build) (64-bit)

[necolas]

This is not easy to fix right now because I've decided not to implement Text as it is in RN. RN basically makes Text a Touchable and Touchable uses heuristics around when a pointer was released to trigger onPress (ie it doesn't use click events). All of that is kind of bad because it overloads Text and forces a bundle and runtime dependency on Touchable. Touchable also has performance and accuracy problems. Instead RN should have View and Text-backed Touchables/Pressables rather than doing too much in Text.

But this will probably be fixed in 0.13 because I'm going to rewrite Touchable/Pressability to use click events for onPress, at which point stopPropagation can be used to prevent the click event bubbling up to Pressables without Text pulling in that as a dependency

https://github.com/necolas/react-native-web/pull/1272#issuecomment-539217703