diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js index 9616becef..d7dcf523b 100644 --- a/react/features/toolbox/components/native/Toolbox.js +++ b/react/features/toolbox/components/native/Toolbox.js @@ -84,6 +84,62 @@ class Toolbox extends Component { this._onLayout = this._onLayout.bind(this); } + /** + * Renders the toolbar. It will only be rendered if the {@code Toolbox} is + * visible and we have already calculated the available width. This avoids + * a weird effect in which the toolbar is displayed and then changes size. + * + * @returns {ReactElement} + */ + _renderToolbar() { + const { _visible } = this.props; + const { width } = this.state; + + if (!_visible || !width) { + return null; + } + + let buttonStyles = toolbarButtonStyles; + let toggledButtonStyles = toolbarToggledButtonStyles; + + const buttonSize = this._calculateButtonSize(); + + if (buttonSize > 0) { + const extraButtonStyle = { + borderRadius: buttonSize / 2, + height: buttonSize, + width: buttonSize + }; + + buttonStyles = { + ...buttonStyles, + style: [ buttonStyles.style, extraButtonStyle ] + }; + toggledButtonStyles = { + ...toggledButtonStyles, + style: [ toggledButtonStyles.style, extraButtonStyle ] + }; + } + + return ( + + + + + + + + ); + } + /** * Implements React's {@link Component#render()}. * @@ -96,50 +152,13 @@ class Toolbox extends Component { ? styles.toolboxNarrow : styles.toolboxWide; const { _visible } = this.props; - let buttonStyles = toolbarButtonStyles; - let toggledButtonStyles = toolbarToggledButtonStyles; - - if (_visible) { - const buttonSize = this._calculateButtonSize(); - - if (buttonSize > 0) { - const extraButtonStyle = { - borderRadius: buttonSize / 2, - height: buttonSize, - width: buttonSize - }; - - buttonStyles = { - ...buttonStyles, - style: [ buttonStyles.style, extraButtonStyle ] - }; - toggledButtonStyles = { - ...toggledButtonStyles, - style: [ toggledButtonStyles.style, extraButtonStyle ] - }; - } - } return ( - - - - - - - + { this._renderToolbar() } ); }