From f13cfe70f3b7b9ad825d4cc53c7f49b24d198454 Mon Sep 17 00:00:00 2001
From: Leonard Kim <virtuacoplenny@gmail.com>
Date: Fri, 2 Nov 2018 16:19:42 -0700
Subject: [PATCH] ref(sidebar): derive showOverlay state

- Derive the showOverlay state. When the sidebar should be hidden,
  the internal showOverlay state should remain true until the
  animation hides it. When the sidebar should show, the showOverlay
  state should become true immediately.
- Use PureComponent to prevent additional animation triggers
  instead of explicitly checking changes to the "show" prop.
---
 .../base/react/components/native/SideBar.js   | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/react/features/base/react/components/native/SideBar.js b/react/features/base/react/components/native/SideBar.js
index 7999fb625..4086df6d2 100644
--- a/react/features/base/react/components/native/SideBar.js
+++ b/react/features/base/react/components/native/SideBar.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component, type Node } from 'react';
+import React, { PureComponent, type Node } from 'react';
 import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 
 import styles, { SIDEBAR_WIDTH } from './styles';
@@ -46,7 +46,18 @@ type State = {
 /**
  * A generic animated side bar to be used for left-side, hamburger-style menus.
  */
-export default class SideBar extends Component<Props, State> {
+export default class SideBar extends PureComponent<Props, State> {
+    /**
+     * Implements React's {@link Component#getDerivedStateFromProps()}.
+     *
+     * @inheritdoc
+     */
+    static getDerivedStateFromProps(props: Props, prevState: State) {
+        return {
+            showOverlay: props.show || prevState.showOverlay
+        };
+    }
+
     /**
      * Initializes a new {@code SideBar} instance.
      *
@@ -74,12 +85,12 @@ export default class SideBar extends Component<Props, State> {
     }
 
     /**
-     * Implements React's {@link Component#componentWillReceiveProps()}.
+     * Implements React's {@link Component#componentDidUpdate()}.
      *
      * @inheritdoc
      */
-    componentWillReceiveProps({ show }: Props) {
-        (show === this.props.show) || this._setShow(show);
+    componentDidUpdate() {
+        this._setShow(this.props.show);
     }
 
     /**
@@ -148,8 +159,6 @@ export default class SideBar extends Component<Props, State> {
      * @returns {void}
      */
     _setShow(show) {
-        show && this.setState({ showOverlay: true });
-
         Animated
             .timing(
                 /* value */ this.state.sliderAnimation,