Merge pull request #567 from Expensify/marcaaron-fixDisappearingChats

Only bind a single Keyboard.addListener('keyboardDidShow') event
Expensify · Sep 30, 2020 · 87d004f · 87d004f
2 parents 9189963 + 99e2fa5
commit 87d004f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git 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);
     }
 
@@ -70,14 +73,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
@@ -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>
         );
     }