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

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

@@ -52,6 +52,17 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                     placeholderTextColor = { PLACEHOLDER_COLOR }
                     style = { styles.streamKeyInput }
                     value = { this.props.value } />
+                <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 } >
@@ -62,6 +73,8 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                             </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,7 +53,8 @@ class StreamKeyForm extends AbstractStreamKeyForm {
                     type = 'text'
                     value = { this.props.value } />
                 <div className = 'form-footer'>
-                    { this.state.showValidationError
+                    {
+                        this.state.showValidationError
                             ? <span className = 'validation-error'>
                                 { t('liveStreaming.invalidStreamKey') }
                             </span>