From 99e2fa54b67f9e4e0939a4d175f0045b71b3510c Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Tue, 29 Sep 2020 18:04:05 -0700
Subject: [PATCH] Make sure to only bind on keyboard event listener and just
 hide the side bar links instead of completely re-rendering them which is
 expensive.

---
 src/page/home/report/ReportActionsView.js | 13 +++++--
 src/page/home/sidebar/SidebarLinks.js     | 41 ++++++++++++-----------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/page/home/report/ReportActionsView.js b/src/page/home/report/ReportActionsView.js
index 91adb86252a2..93378ac29b1a 100644
--- a/src/page/home/report/ReportActionsView.js
+++ b/src/page/home/report/ReportActionsView.js
@@ -48,7 +48,10 @@ class ReportActionsView extends React.Component {
     }
 
     componentDidMount() {
-        this.keyboardEvent = Keyboard.addListener('keyboardDidShow', this.scrollToListBottom);
+        if (this.props.isActiveReport) {
+            this.keyboardEvent = Keyboard.addListener('keyboardDidShow', this.scrollToListBottom);
+        }
+
         fetchActions(this.props.reportID);
     }
 
@@ -69,14 +72,18 @@ class ReportActionsView extends React.Component {
             return;
         }
 
-        // If we are switching from not active to active report then mark comments as read
+        // If we are switching from not active to active report then mark comments as
+        // read and bind the keyboard listener for this report
         if (!prevProps.isActiveReport && this.props.isActiveReport) {
             this.recordMaxAction();
+            this.keyboardEvent = Keyboard.addListener('keyboardDidShow', this.scrollToListBottom);
         }
     }
 
     componentWillUnmount() {
-        this.keyboardEvent.remove();
+        if (this.keyboardEvent) {
+            this.keyboardEvent.remove();
+        }
     }
 
     /**
diff --git a/src/page/home/sidebar/SidebarLinks.js b/src/page/home/sidebar/SidebarLinks.js
index 2dd7c39881d2..b188c42ae433 100644
--- a/src/page/home/sidebar/SidebarLinks.js
+++ b/src/page/home/sidebar/SidebarLinks.js
@@ -65,6 +65,11 @@ class SidebarLinks extends React.Component {
         // Updates the page title to indicate there are unread reports
         PageTitleUpdater(_.any(reports, report => report.isUnread));
 
+        // Update styles to hide the report links if they should not be visible
+        const sidebarLinksStyle = this.state.areReportLinksVisible
+            ? [styles.sidebarListContainer]
+            : [styles.sidebarListContainer, styles.dNone];
+
         return (
             <View style={[styles.flex1, {marginTop: this.props.insets.top}]}>
                 <View style={[styles.sidebarHeader]}>
@@ -80,26 +85,24 @@ class SidebarLinks extends React.Component {
                     />
                 </View>
 
-                {this.state.areReportLinksVisible && (
-                    <View style={[styles.sidebarListContainer]}>
-                        <View style={[styles.sidebarListItem]}>
-                            <Text style={[styles.sidebarListHeader]}>
-                                Chats
-                            </Text>
-                        </View>
-                        {/* A report will not have a report name if it hasn't been fetched from the server yet */}
-                        {/* so nothing is rendered */}
-                        {_.map(reportsToDisplay, report => report.reportName && (
-                            <SidebarLink
-                                key={report.reportID}
-                                reportID={report.reportID}
-                                reportName={report.reportName}
-                                isUnread={report.isUnread}
-                                onLinkClick={onLinkClick}
-                            />
-                        ))}
+                <View style={sidebarLinksStyle}>
+                    <View style={[styles.sidebarListItem]}>
+                        <Text style={[styles.sidebarListHeader]}>
+                            Chats
+                        </Text>
                     </View>
-                )}
+                    {/* A report will not have a report name if it hasn't been fetched from the server yet */}
+                    {/* so nothing is rendered */}
+                    {_.map(reportsToDisplay, report => report.reportName && (
+                        <SidebarLink
+                            key={report.reportID}
+                            reportID={report.reportID}
+                            reportName={report.reportName}
+                            isUnread={report.isUnread}
+                            onLinkClick={onLinkClick}
+                        />
+                    ))}
+                </View>
             </View>
         );
     }