[RN] Render bold text in WaitForOwnerDialog

react/features/authentication/components/LoginDialog.native.js

@@ -159,15 +159,15 @@ class LoginDialog extends Component {
                         autoCorrect = { false }
                         onChangeText = { this._onUsernameChange }
                         placeholder = { 'user@domain.com' }
-                        style = { styles.loginDialogTextInput }
+                        style = { styles.dialogTextInput }
                         value = { this.state.username } />
                     <TextInput
                         onChangeText = { this._onPasswordChange }
                         placeholder = { t('dialog.userPassword') }
                         secureTextEntry = { true }
-                        style = { styles.loginDialogTextInput }
+                        style = { styles.dialogTextInput }
                         value = { this.state.password } />
-                    <Text style = { styles.loginDialogText }>
+                    <Text style = { styles.dialogText }>
                         {
                             messageKey
                                 ? t(messageKey, messageOptions || {})

react/features/authentication/components/WaitForOwnerDialog.native.js

@@ -104,13 +104,49 @@ class WaitForOwnerDialog extends Component {
      *
      * @param {string} html - The <tt>string</tt> which may contain HTML to
      * render.
-     * @returns {string}
+     * @returns {ReactElement[]|string}
      */
     _renderHTML(html) {
         if (typeof html === 'string') {
-            // TODO Limited styling may easily be provided by utilizing Text
-            // with style.
-            return html.replace(/<\/?b>/gi, '');
+            // At the time of this writing, the specified HTML contains a couple
+            // of spaces one after the other. They do not cause a visible
+            // problem on Web, because the specified HTML is rendered as, well,
+            // HTML. However, we're not rendering HTML here.
+
+            // eslint-disable-next-line no-param-reassign
+            html = html.replace(/\s{2,}/gi, ' ');
+
+            // Render text in <b>text</b> in bold.
+            const opening = /<\s*b\s*>/gi;
+            const closing = /<\s*\/\s*b\s*>/gi;
+            let o;
+            let c;
+            let prevClosingLastIndex = 0;
+            const r = [];
+
+            // eslint-disable-next-line no-cond-assign
+            while (o = opening.exec(html)) {
+                closing.lastIndex = opening.lastIndex;
+
+                // eslint-disable-next-line no-cond-assign
+                if (c = closing.exec(html)) {
+                    r.push(html.substring(prevClosingLastIndex, o.index));
+                    r.push(
+                        <Text style = { styles.boldDialogText }>
+                            { html.substring(opening.lastIndex, c.index) }
+                        </Text>);
+                    opening.lastIndex
+                        = prevClosingLastIndex
+                        = closing.lastIndex;
+                } else {
+                    break;
+                }
+            }
+            if (prevClosingLastIndex < html.length) {
+                r.push(html.substring(prevClosingLastIndex));
+            }
+
+            return r;
         }
 
         return html;

react/features/authentication/components/styles.js

@@ -19,6 +19,34 @@ const text = {
  * The styles of the authentication feature.
  */
 export default createStyleSheet({
+    /**
+     * The style of bold <tt>Text</tt> rendered by the <tt>Dialog</tt>s of the
+     * feature authentication.
+     */
+    boldDialogText: {
+        ...text,
+        fontWeight: 'bold'
+    },
+
+    /**
+     * The style of <tt>Text</tt> rendered by the <tt>Dialog</tt>s of the
+     * feature authentication.
+     */
+    dialogText: {
+        ...text
+    },
+
+    /**
+     * The style of <tt>TextInput</tt> rendered by the <tt>Dialog</tt>s of the
+     * feature authentication.
+     */
+    dialogTextInput: {
+        // XXX Matches react-native-prompt's dialogInput because base/dialog's
+        // Dialog is implemented using react-native-prompt.
+        fontSize: 18,
+        height: 50
+    },
+
     /**
      * The style of <tt>LoginDialog</tt>.
      */
@@ -28,23 +56,6 @@ export default createStyleSheet({
         flexDirection: 'column'
     },
 
-    /**
-     * The style of <tt>Text</tt> rendered by <tt>LoginDialog</tt>.
-     */
-    loginDialogText: {
-        ...text
-    },
-
-    /**
-     * The style of <tt>TextInput</tt> rendered by <tt>LoginDialog</tt>.
-     */
-    loginDialogTextInput: {
-        // XXX Matches react-native-prompt's dialogInput because base/dialog's
-        // Dialog is implemented using react-native-prompt.
-        fontSize: 18,
-        height: 50
-    },
-
     /**
      * The style of <tt>WaitForOwnerDialog</tt>.
      */