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.

react/features/base/react/components/native/SideBar.js

 // @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';
 /**
  * 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.
      *
     }
 
     /**
-     * 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);
     }
 
     /**
      * @returns {void}
      */
     _setShow(show) {
-        show && this.setState({ showOverlay: true });
-
         Animated
             .timing(
                 /* value */ this.state.sliderAnimation,