[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.

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>
         );
     }

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>

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

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>

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.
                       */}

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