[RN] Avoid Toolbox changing size on first render

Wait until the right button size has been calculated before rendering it.

react/features/toolbox/components/native/Toolbox.js

@@ -85,21 +85,23 @@ class Toolbox extends Component<Props, State> {
     }
 
     /**
-     * Implements React's {@link Component#render()}.
+     * 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.
      *
-     * @inheritdoc
      * @returns {ReactElement}
      */
-    render() {
-        const toolboxStyle
-            = isNarrowAspectRatio(this)
-                ? styles.toolboxNarrow
-                : styles.toolboxWide;
+    _renderToolbar() {
         const { _visible } = this.props;
+        const { width } = this.state;
+
+        if (!_visible || !width) {
+            return null;
+        }
+
         let buttonStyles = toolbarButtonStyles;
         let toggledButtonStyles = toolbarToggledButtonStyles;
 
-        if (_visible) {
         const buttonSize = this._calculateButtonSize();
 
         if (buttonSize > 0) {
@@ -118,13 +120,8 @@ class Toolbox extends Component<Props, State> {
                 style: [ toggledButtonStyles.style, extraButtonStyle ]
             };
         }
-        }
 
         return (
-            <Container
-                onLayout = { this._onLayout }
-                style = { toolboxStyle }
-                visible = { _visible }>
             <View
                 pointerEvents = 'box-none'
                 style = { styles.toolbar }>
@@ -140,6 +137,28 @@ class Toolbox extends Component<Props, State> {
                     styles = { buttonStyles }
                     toggledStyles = { toggledButtonStyles } />
             </View>
+        );
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const toolboxStyle
+            = isNarrowAspectRatio(this)
+                ? styles.toolboxNarrow
+                : styles.toolboxWide;
+        const { _visible } = this.props;
+
+        return (
+            <Container
+                onLayout = { this._onLayout }
+                style = { toolboxStyle }
+                visible = { _visible }>
+                { this._renderToolbar() }
             </Container>
         );
     }