From cb70c084b3276e30869df7158952d87635b9f72e Mon Sep 17 00:00:00 2001
From: Zoltan Bettenbuk <zoltan.bettenbuk@gmail.com>
Date: Thu, 5 Apr 2018 14:46:31 -0500
Subject: [PATCH] [RN] "The View is never the target of touch events"

In preparation for "pinch to zoom" support in desktop streams on mobile, make
certain Views not intervene in touch event handling. While the modification is
necessary for "pinch to zoom" which is coming later, it really makes sense for
the modified Views to not be involved in touching because they're used to aid
layout and/or animations and are to behave to the user as if they're not there.
---
 .../base/media/components/native/VideoTrack.js       |  4 +++-
 .../components/ParticipantView.native.js             |  6 ++++--
 .../base/react/components/native/Container.js        | 11 +++++++++--
 .../base/react/components/native/TintedView.js       | 12 +++++++++---
 .../conference/components/Conference.native.js       |  4 +++-
 react/features/toolbox/components/Toolbox.native.js  |  2 ++
 6 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/react/features/base/media/components/native/VideoTrack.js b/react/features/base/media/components/native/VideoTrack.js
index c9680f0ca..dd885fee1 100644
--- a/react/features/base/media/components/native/VideoTrack.js
+++ b/react/features/base/media/components/native/VideoTrack.js
@@ -58,7 +58,9 @@ class VideoTrack extends AbstractVideoTrack {
         return (
             <View style = { styles.video } >
                 { super.render() }
-                <Animated.View style = { animatedStyles } />
+                <Animated.View
+                    pointerEvents = 'none'
+                    style = { animatedStyles } />
             </View>
         );
     }
diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js
index e0b7d5788..72b314b22 100644
--- a/react/features/base/participants/components/ParticipantView.native.js
+++ b/react/features/base/participants/components/ParticipantView.native.js
@@ -158,8 +158,10 @@ class ParticipantView extends Component<Props> {
         };
 
         return (
-            <View style = { containerStyle } >
-                <Text style = { styles.connectionInfoText } >
+            <View
+                pointerEvents = 'box-none'
+                style = { containerStyle }>
+                <Text style = { styles.connectionInfoText }>
                     { t(messageKey, { displayName }) }
                 </Text>
             </View>
diff --git a/react/features/base/react/components/native/Container.js b/react/features/base/react/components/native/Container.js
index 0b5c2bfd9..893426300 100644
--- a/react/features/base/react/components/native/Container.js
+++ b/react/features/base/react/components/native/Container.js
@@ -43,10 +43,17 @@ export default class Container extends AbstractContainer {
             return null;
         }
 
-        let element = super._render(View, props);
+        const onClickOrTouchFeedback = onClick || touchFeedback;
+        let element
+            = super._render(
+                View,
+                {
+                    pointerEvents: onClickOrTouchFeedback ? 'auto' : 'box-none',
+                    ...props
+                });
 
         // onClick & touchFeedback
-        if (element && (onClick || touchFeedback)) {
+        if (element && onClickOrTouchFeedback) {
             element
                 = React.createElement(
                     touchFeedback
diff --git a/react/features/base/react/components/native/TintedView.js b/react/features/base/react/components/native/TintedView.js
index 883f6c4c4..5c22d645f 100644
--- a/react/features/base/react/components/native/TintedView.js
+++ b/react/features/base/react/components/native/TintedView.js
@@ -135,9 +135,15 @@ export default class TintedView extends Component<Props, State> {
     render() {
         // XXX Don't tint the children, tint the background only.
         return (
-            <View style = { BASE_STYLE }>
-                <View style = { this.state.style } />
-                <View style = { BASE_STYLE }>
+            <View
+                pointerEvents = 'box-none'
+                style = { BASE_STYLE }>
+                <View
+                    pointerEvents = 'none'
+                    style = { this.state.style } />
+                <View
+                    pointerEvents = 'box-none'
+                    style = { BASE_STYLE }>
                     { this.props.children }
                 </View>
             </View>
diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js
index be26ee8bc..e4d85b5d4 100644
--- a/react/features/conference/components/Conference.native.js
+++ b/react/features/conference/components/Conference.native.js
@@ -218,7 +218,9 @@ class Conference extends Component<Props> {
                         </TintedView>
                 }
 
-                <View style = { styles.toolboxAndFilmstripContainer } >
+                <View
+                    pointerEvents = 'box-none'
+                    style = { styles.toolboxAndFilmstripContainer }>
                     {/*
                       * The Toolbox is in a stacking layer bellow the Filmstrip.
                       */}
diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js
index 44a03a57b..f11f38ec0 100644
--- a/react/features/toolbox/components/Toolbox.native.js
+++ b/react/features/toolbox/components/Toolbox.native.js
@@ -188,6 +188,7 @@ class Toolbox extends Component<Props> {
         return (
             <View
                 key = 'primaryToolbar'
+                pointerEvents = 'box-none'
                 style = { styles.primaryToolbar }>
                 <AudioMuteButton buttonStyles = { audioButtonStyles } />
                 <HangupButton />
@@ -219,6 +220,7 @@ class Toolbox extends Component<Props> {
         return (
             <View
                 key = 'secondaryToolbar'
+                pointerEvents = 'box-none'
                 style = { styles.secondaryToolbar }>
                 {
                     AudioRouteButton