rn,welcome-page: use random room name generator

react/features/welcome/components/AbstractWelcomePage.js

 import { createWelcomePageEvent, sendAnalytics } from '../../analytics';
 import { appNavigate } from '../../app';
 import { isCalendarEnabled } from '../../calendar-sync';
-import { isRoomValid } from '../../base/conference';
 
 /**
  * {@code AbstractWelcomePage}'s React {@code Component} prop types.
         clearTimeout(this.state.updateTimeoutId);
     }
 
-    /**
-     * Determines whether the 'Join' button is (to be) disabled i.e. There's no
-     * valid room name typed into the respective text input field.
-     *
-     * @protected
-     * @returns {boolean} If the 'Join' button is (to be) disabled, true;
-     * otherwise, false.
-     */
-    _isJoinDisabled() {
-        return this.state.joining || !isRoomValid(this.state.room);
-    }
-
     _onJoin: () => void;
 
     /**

react/features/welcome/components/WelcomePage.native.js

     componentDidMount() {
         super.componentDidMount();
 
+        this._updateRoomname();
+
         const { dispatch } = this.props;
 
         if (this.props._settings.startAudioOnly) {
             );
         }
 
-
-        const buttonDisabled = this._isJoinDisabled();
-
         return (
             <TouchableHighlight
                 accessibilityLabel =
                     { t('welcomepage.accessibilityLabel.join') }
-                disabled = { buttonDisabled }
                 onPress = { this._onJoin }
-                style = { [
-                    styles.button,
-                    buttonDisabled ? styles.buttonDisabled : null
-                ] }
+                style = { styles.button }
                 underlayColor = { ColorPalette.white }>
                 { children }
             </TouchableHighlight>
                     </Header>
                     <SafeAreaView style = { styles.roomContainer } >
                         <View style = { styles.joinControls } >
+                            <Text style = { styles.enterRoomText }>
+                                { t('welcomepage.roomname') }
+                            </Text>
                             <TextInput
                                 accessibilityLabel = { t(roomnameAccLabel) }
                                 autoCapitalize = 'none'
                                 onChangeText = { this._onRoomChange }
                                 onFocus = { this._onFieldFocus }
                                 onSubmitEditing = { this._onJoin }
-                                placeholder = { t('welcomepage.roomname') }
-                                placeholderTextColor = {
-                                    PLACEHOLDER_TEXT_COLOR
-                                }
+                                placeholder = { this.state.roomPlaceholder }
+                                placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
                                 returnKeyType = { 'go' }
                                 style = { styles.textInput }
                                 underlineColorAndroid = 'transparent'

react/features/welcome/components/styles.js

 
 import { BoxModel, ColorPalette } from '../../base/styles';
 
-export const PLACEHOLDER_TEXT_COLOR = 'rgba(255, 255, 255, 0.3)';
+export const PLACEHOLDER_TEXT_COLOR = 'rgba(255, 255, 255, 0.5)';
 
 export const SIDEBAR_AVATAR_SIZE = 100;
 
         paddingHorizontal: 20
     },
 
-    /**
-     * Renders the button visually disabled.
-     */
-    buttonDisabled: {
-        backgroundColor: '#cccccc',
-        borderColor: '#999999'
-    },
-
     /**
      * Join button text style.
      */
         textAlign: 'center'
     },
 
+    enterRoomText: {
+        color: TEXT_COLOR,
+        fontSize: 18,
+        marginBottom: BoxModel.margin
+    },
+
     /**
      * The welcome screen header style.
      */