From 6c488cc613be381521875c801749dd38a7f8a189 Mon Sep 17 00:00:00 2001
From: Lyubo Marinov <lmarinov@atlassian.com>
Date: Tue, 25 Jul 2017 13:57:15 -0500
Subject: [PATCH] [RN] Simplify hiding Container components

---
 .../base/react/components/native/Container.js | 47 ++++++++-----------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/react/features/base/react/components/native/Container.js b/react/features/base/react/components/native/Container.js
index e9cdb2940..4b79bf41b 100644
--- a/react/features/base/react/components/native/Container.js
+++ b/react/features/base/react/components/native/Container.js
@@ -29,42 +29,35 @@ export default class Container extends AbstractContainer {
      * @returns {ReactElement}
      */
     render() {
-        // eslint-disable-next-line prefer-const
-        let { onClick, style, touchFeedback, visible, ...props } = this.props;
-
-        // onClick & touchFeedback
-        (typeof touchFeedback === 'undefined') && (touchFeedback = onClick);
+        const {
+            onClick,
+            touchFeedback = onClick,
+            visible = true,
+            ...props
+        } = this.props;
 
         // visible
-
-        // The following property is responsible to hide/show this Container by
-        // 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 (hidden) {
-            style = {
-                ...style,
+        if (!visible) {
+            // Intentionally hide this Container without destroying it.
+            // TODO Replace with display: 'none' supported in RN >= 0.43.
+            props.style = {
+                ...props.style,
                 height: 0,
                 width: 0
             };
         }
 
-        // eslint-disable-next-line object-property-newline
-        let component = super._render(View, { ...props, style });
+        let element = super._render(View, props);
 
-        if (!hidden && (touchFeedback || onClick)) {
-            const parentType
-                = touchFeedback ? TouchableHighlight : TouchableWithoutFeedback;
-            const parentProps = {};
-
-            onClick && (parentProps.onPress = onClick);
-
-            component = React.createElement(parentType, parentProps, component);
+        // onClick & touchFeedback
+        if (visible && (onClick || touchFeedback)) {
+            element = React.createElement(
+                touchFeedback ? TouchableHighlight : TouchableWithoutFeedback,
+                { onPress: onClick },
+                element
+            );
         }
 
-        return component;
+        return element;
     }
 }