fix(live-streaming): show stream key validation in mobile

react/features/recording/components/LiveStream/native/StreamKeyForm.js

@@ -52,15 +52,28 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                     placeholderTextColor = { PLACEHOLDER_COLOR }
                     style = { styles.streamKeyInput }
                     value = { this.props.value } />
-                <TouchableOpacity
-                    onPress = { this._onOpenHelp }
-                    style = { styles.streamKeyHelp } >
-                    <Text style = { styles.text }>
-                        {
-                            t('liveStreaming.streamIdHelp')
-                        }
-                    </Text>
-                </TouchableOpacity>
+                <View style = { styles.formFooter }>
+                    {
+                        this.state.showValidationError
+                            ? <View style = { styles.formFooterItem }>
+                                <Text style = { styles.warningText }>
+                                    { t('liveStreaming.invalidStreamKey') }
+                                </Text>
+                            </View>
+                            : null
+                    }
+                    <View style = { styles.formFooterItem }>
+                        <TouchableOpacity
+                            onPress = { this._onOpenHelp }
+                            style = { styles.streamKeyHelp } >
+                            <Text style = { styles.text }>
+                                {
+                                    t('liveStreaming.streamIdHelp')
+                                }
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
             </View>
         );
     }

react/features/recording/components/LiveStream/native/styles.js

@@ -48,6 +48,20 @@ export default createStyleSheet({
         padding: BoxModel.padding
     },
 
+    /**
+     * Wrapper for the last element in the form.
+     */
+    formFooter: {
+        flexDirection: 'row'
+    },
+
+    /**
+     * Wrapper for individual children in the last element of the form.
+     */
+    formFooterItem: {
+        flex: 1
+    },
+
     /**
      * Explaining text on the top of the sign in form.
      */
@@ -133,6 +147,12 @@ export default createStyleSheet({
 
     text: {
         color: ColorPalette.white
-    }
+    },
 
+    /**
+     * A different colored text to indicate information needing attention.
+     */
+    warningText: {
+        color: ColorPalette.Y200
+    }
 });

react/features/recording/components/LiveStream/web/StreamKeyForm.js

@@ -53,11 +53,12 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                     type = 'text'
                     value = { this.props.value } />
                 <div className = 'form-footer'>
-                    { this.state.showValidationError
-                        ? <span className = 'validation-error'>
-                            { t('liveStreaming.invalidStreamKey') }
-                        </span>
-                        : null
+                    {
+                        this.state.showValidationError
+                            ? <span className = 'validation-error'>
+                                { t('liveStreaming.invalidStreamKey') }
+                            </span>
+                            : null
                     }
                     { this.helpURL
                         ? <a