fix(rn,lobby) use a header for the main lobby screen

It allows us to place the Cancel button there, and declutter the UI of
buttons.

react/features/lobby/components/native/LobbyScreen.js

@@ -12,6 +12,8 @@ import BaseTheme from '../../../base/ui/components/BaseTheme';
 import InviteButton
     from '../../../invite/components/add-people-dialog/native/InviteButton';
 import { LargeVideo } from '../../../large-video/components';
+import HeaderNavigationButton
+    from '../../../mobile/navigation/components/HeaderNavigationButton';
 import { navigate }
     from '../../../mobile/navigation/components/lobby/LobbyNavigationContainerRef';
 import { screen } from '../../../mobile/navigation/routes';
@@ -36,6 +38,25 @@ type Props = AbstractProps & {
  * Implements a waiting screen that represents the participant being in the lobby.
  */
 class LobbyScreen extends AbstractLobbyScreen<Props> {
+    /**
+     * Implements React's {@link Component#componentDidMount()}. Invoked
+     * immediately after this component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentDidMount() {
+        const { navigation, t } = this.props;
+
+        navigation.setOptions({
+            headerLeft: () => (
+                <HeaderNavigationButton
+                    label = { t('dialog.Cancel') }
+                    onPress = { this._onCancel } />
+            )
+        });
+    }
+
     /**
      * Implements {@code PureComponent#render}.
      *
@@ -292,16 +313,6 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                         { t('lobby.enterPasswordButton') }
                     </Text>
                 </TouchableOpacity> }
-                <TouchableOpacity
-                    onPress = { this._onCancel }
-                    style = { [
-                        styles.button,
-                        styles.cancelButton
-                    ] }>
-                    <Text style = { styles.cancelButtonText }>
-                        { t('dialog.Cancel') }
-                    </Text>
-                </TouchableOpacity>
             </View>
         );
     }

react/features/lobby/components/native/styles.js

@@ -71,7 +71,7 @@ export default {
         alignItems: 'center',
         display: 'flex',
         justifyContent: 'center',
-        minHeight: '45%'
+        minHeight: '50%'
     },
 
     largeVideoContainerWide: {
@@ -214,18 +214,6 @@ export default {
         textAlign: 'center'
     },
 
-    cancelButton: {
-        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.action02Disabled,
-        marginTop: BaseTheme.spacing[4]
-    },
-
-    cancelButtonText: {
-        ...BaseTheme.typography.labelButtonLarge,
-        color: BaseTheme.palette.text01,
-        lineHeight: 30
-    },
-
     // KnockingParticipantList
 
     knockingParticipantList: {

react/features/mobile/navigation/components/lobby/components/LobbyNavigationContainer.js

@@ -7,7 +7,8 @@ import { LobbyChatScreen, LobbyScreen } from '../../../../../lobby';
 import { screen } from '../../../routes';
 import {
     lobbyChatScreenOptions,
-    lobbyScreenOptions, navigationContainerTheme
+    lobbyScreenOptions,
+    navigationContainerTheme
 } from '../../../screenOptions';
 import { lobbyNavigationContainerRef } from '../LobbyNavigationContainerRef';
 

react/features/mobile/navigation/screenOptions.js

@@ -168,11 +168,6 @@ export const helpScreenOptions = {
  */
 export const conferenceScreenOptions = fullScreenOptions;
 
-/**
- * Screen options for lobby modal.
- */
-export const lobbyScreenOptions = fullScreenOptions;
-
 /**
  * Tab bar options for chat screen.
  */
@@ -238,6 +233,11 @@ export const recordingScreenOptions = presentationScreenOptions;
  */
 export const liveStreamScreenOptions = presentationScreenOptions;
 
+/**
+ * Screen options for lobby modal.
+ */
+export const lobbyScreenOptions = presentationScreenOptions;
+
 /**
  * Screen options for lobby chat modal.
  */