Add feature flag to hide the participant name editing field on the prejoin page

react/features/base/flags/constants.ts

@@ -172,6 +172,12 @@ export const PIP_WHILE_SCREEN_SHARING_ENABLED = 'pip-while-screen-sharing.enable
  */
 export const PREJOIN_PAGE_ENABLED = 'prejoinpage.enabled';
 
+/**
+ * Flag indicating if the participant name editing field should be displayed on the prejoin page.
+ * Default: disabled (false).
+ */
+export const PREJOIN_PAGE_HIDE_DISPLAY_NAME = 'prejoinpage.hideDisplayName';
+
 /**
  * Flag indicating if raise hand feature should be enabled.
  * Default: enabled.

react/features/prejoin/components/native/Prejoin.tsx

@@ -19,6 +19,8 @@ import { IReduxState } from '../../../app/types';
 import { setAudioOnly } from '../../../base/audio-only/actions';
 import { getConferenceName } from '../../../base/conference/functions';
 import { connect } from '../../../base/connection/actions.native';
+import { PREJOIN_PAGE_HIDE_DISPLAY_NAME } from '../../../base/flags/constants';
+import { getFeatureFlag } from '../../../base/flags/functions';
 import { IconCloseLarge } from '../../../base/icons/svg';
 // @ts-ignore
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
@@ -58,6 +60,8 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     );
     const localParticipant = useSelector((state: IReduxState) => getLocalParticipant(state));
     const isDisplayNameMandatory = useSelector((state: IReduxState) => isDisplayNameRequired(state));
+    const isDisplayNameVisible
+        = useSelector((state: IReduxState) => !getFeatureFlag(state, PREJOIN_PAGE_HIDE_DISPLAY_NAME, false));
     const roomName = useSelector((state: IReduxState) => getConferenceName(state));
     const participantName = localParticipant?.name;
     const [ displayName, setDisplayName ]
@@ -166,12 +170,15 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                         // @ts-ignore
                         styles = { styles.buttonStylesBorderless } />
                 </View>
-                <Input
-                    // @ts-ignore
-                    customStyles = {{ input: styles.customInput }}
-                    onChange = { onChangeDisplayName }
-                    placeholder = { t('dialog.enterDisplayName') }
-                    value = { displayName } />
+                {
+                    isDisplayNameVisible
+                    && <Input
+                        // @ts-ignore
+                        customStyles = {{ input: styles.customInput }}
+                        onChange = { onChangeDisplayName }
+                        placeholder = { t('dialog.enterDisplayName') }
+                        value = { displayName } />
+                }
                 <Button
                     accessibilityLabel = 'prejoin.joinMeeting'
                     disabled = { joinButtonDisabled }