diff --git a/react/features/recording/components/LiveStream/native/StreamKeyForm.js b/react/features/recording/components/LiveStream/native/StreamKeyForm.js
index 094d3aba0..b7ad959ff 100644
--- a/react/features/recording/components/LiveStream/native/StreamKeyForm.js
+++ b/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 } />
-
-
- {
- t('liveStreaming.streamIdHelp')
- }
-
-
+
+ {
+ this.state.showValidationError
+ ?
+
+ { t('liveStreaming.invalidStreamKey') }
+
+
+ : null
+ }
+
+
+
+ {
+ t('liveStreaming.streamIdHelp')
+ }
+
+
+
+
);
}
diff --git a/react/features/recording/components/LiveStream/native/styles.js b/react/features/recording/components/LiveStream/native/styles.js
index c07bb3c63..7a31c1f72 100644
--- a/react/features/recording/components/LiveStream/native/styles.js
+++ b/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
+ }
});
diff --git a/react/features/recording/components/LiveStream/web/StreamKeyForm.js b/react/features/recording/components/LiveStream/web/StreamKeyForm.js
index d8bb9c279..130e3a9f5 100644
--- a/react/features/recording/components/LiveStream/web/StreamKeyForm.js
+++ b/react/features/recording/components/LiveStream/web/StreamKeyForm.js
@@ -53,11 +53,12 @@ class StreamKeyForm extends AbstractStreamKeyForm {
type = 'text'
value = { this.props.value } />
- { this.state.showValidationError
- ?
- { t('liveStreaming.invalidStreamKey') }
-
- : null
+ {
+ this.state.showValidationError
+ ?
+ { t('liveStreaming.invalidStreamKey') }
+
+ : null
}
{ this.helpURL
?