From d3c408ae2ec9c7e2a5e73b8f04566c8c3a1d3936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Tue, 25 Jul 2017 17:04:53 +0200
Subject: [PATCH] [RN] Simplify hiding Container components

When a Container is not visible there is no need for it to react to touch
events, thus avoid wrapping it in a touch component.

In addition, simplify the style needed for hiding the component. Moving the view
out of the window boundaries no longer works on RN 0.42 on iOS. Seting the size
to 0 works well on both platforms, but in the future (when we upgrade to RN >=
0.43) we should switch to display: none:
https://github.com/facebook/react-native/commit/4d69f4b2d1cf4f2e8265fe5758f28086f1b67500
---
 .../base/react/components/native/Container.js | 31 ++++++-------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/react/features/base/react/components/native/Container.js b/react/features/base/react/components/native/Container.js
index 4f7a43de7f..e9cdb29409 100644
--- a/react/features/base/react/components/native/Container.js
+++ b/react/features/base/react/components/native/Container.js
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import {
-    Dimensions,
     TouchableHighlight,
     TouchableWithoutFeedback,
     View
@@ -39,41 +38,29 @@ export default class Container extends AbstractContainer {
         // visible
 
         // The following property is responsible to hide/show this Container by
-        // moving it out of site of the screen boundaries. An attempt to use the
-        // opacity property was made in order to eventually implement a
-        // fadeIn/fadeOut animation, however a known React Native problem was
-        // discovered, which allows the view to still capture touch events even
-        // if hidden.
-        let visibilityStyle;
+        // setting its size to 0. This will make the component not visible, but
+        // it won't be destroyed, all its state is preserved. This is
+        // intentional.
+        // TODO: replace with display: 'none', supported in RN >= 0.43.
+        const hidden = visible === false;  // true / undefined
 
-        if (typeof visible !== 'undefined' && !visible) {
-            const windowDimensions = Dimensions.get('window');
-
-            visibilityStyle = {
-                bottom: -windowDimensions.height,
-                right: -windowDimensions.width
-            };
-        }
-
-        const renderParent = touchFeedback || onClick;
-
-        if (!renderParent && visibilityStyle) {
+        if (hidden) {
             style = {
                 ...style,
-                ...visibilityStyle
+                height: 0,
+                width: 0
             };
         }
 
         // eslint-disable-next-line object-property-newline
         let component = super._render(View, { ...props, style });
 
-        if (renderParent) {
+        if (!hidden && (touchFeedback || onClick)) {
             const parentType
                 = touchFeedback ? TouchableHighlight : TouchableWithoutFeedback;
             const parentProps = {};
 
             onClick && (parentProps.onPress = onClick);
-            visibilityStyle && (parentProps.style = visibilityStyle);
 
             component = React.createElement(parentType, parentProps, component);
         }