feat(rn,app) unified navigators

react/features/app/actions.js

@@ -34,7 +34,6 @@ import {
 } from './functions';
 import logger from './logger';
 
-declare var APP: Object;
 declare var interfaceConfig: Object;
 
 

react/features/app/getRouteToRender.native.js

@@ -1,41 +1,17 @@
 
-import { isRoomValid } from '../base/conference';
-import { toState } from '../base/redux';
-import { ConferenceNavigationContainer } from '../conference';
-import RootNavigationContainer from '../welcome/components/RootNavigationContainer';
+import RootNavigationContainer from '../mobile/navigation/components/RootNavigationContainer';
+
+const route = {
+    component: RootNavigationContainer,
+    href: undefined
+};
 
 /**
  * Determines which route is to be rendered in order to depict a specific Redux
  * store.
  *
- * @param {(Function|Object)} stateful - THe redux store, state, or
- * {@code getState} function.
  * @returns {Promise<Object>}
  */
-export function _getRouteToRender(stateful) {
-    const state = toState(stateful);
-
-    return _getMobileRoute(state);
-}
-
-/**
- * Returns the {@code Route} to display on the React Native app.
- *
- * @param {Object} state - The redux state.
- * @returns {Promise}
- */
-function _getMobileRoute(state) {
-    const route = {
-        component: null,
-        href: undefined
-    };
-
-    if (isRoomValid(state['features/base/conference'].room)) {
-        route.component = ConferenceNavigationContainer;
-    } else {
-        route.component = RootNavigationContainer;
-    }
-
+export function _getRouteToRender() {
     return Promise.resolve(route);
 }
-

react/features/app/middleware.js

@@ -50,7 +50,7 @@ function _connectionEstablished(store, next, action) {
     // In the Web app we explicitly do not want to display the hash and
     // query/search URL params. Unfortunately, window.location and, more
     // importantly, its params are used not only in jitsi-meet but also in
-    // lib-jitsi-meet. Consequenlty, the time to remove the params is
+    // lib-jitsi-meet. Consequently, the time to remove the params is
     // determined by when no one needs them anymore.
     const { history, location } = window;
 

react/features/app/middlewares.native.js

@@ -8,6 +8,7 @@ import '../mobile/call-integration/middleware';
 import '../mobile/external-api/middleware';
 import '../mobile/full-screen/middleware';
 import '../mobile/incoming-call/middleware';
+import '../mobile/navigation/middleware';
 import '../mobile/permissions/middleware';
 import '../mobile/proximity/middleware';
 import '../mobile/wake-lock/middleware';

react/features/chat/components/native/ChatButton.js

@@ -7,8 +7,8 @@ import {
     AbstractButton,
     type AbstractButtonProps
 } from '../../../base/toolbox/components';
-import { navigate } from '../../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../../conference/components/native/routes';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
 import { getUnreadCount } from '../../functions';
 
 

react/features/chat/components/native/MessageRecipient.js

@@ -10,7 +10,7 @@ import { connect } from '../../../base/redux';
 import { type StyleType } from '../../../base/styles';
 import {
     setParams
-} from '../../../conference/components/native/ConferenceNavigationContainerRef';
+} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { setPrivateMessageRecipient } from '../../actions.any';
 import AbstractMessageRecipient, {
     type Props as AbstractProps

react/features/chat/components/native/PrivateMessageButton.js

@@ -6,8 +6,8 @@ import { IconMessage, IconReply } from '../../../base/icons';
 import { getParticipantById } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-import { navigate } from '../../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../../conference/components/native/routes';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
 
 export type Props = AbstractButtonProps & {
 

react/features/chat/components/native/index.js

@@ -1,6 +1,5 @@
 // @flow
 
 export { default as Chat } from './Chat';
-export { default as ChatAndPolls } from './ChatAndPolls';
 export { default as ChatButton } from './ChatButton';
 export { default as ChatPrivacyDialog } from './ChatPrivacyDialog';

react/features/conference/components/native/Conference.js

@@ -23,6 +23,9 @@ import { LargeVideo } from '../../../large-video';
 import { KnockingParticipantList } from '../../../lobby/components/native';
 import { getIsLobbyVisible } from '../../../lobby/functions';
 import { BackButtonRegistry } from '../../../mobile/back-button';
+import { navigate }
+    from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
 import { Captions } from '../../../subtitles';
 import { setToolboxVisible } from '../../../toolbox/actions';
 import { Toolbox } from '../../../toolbox/components/native';
@@ -34,12 +37,10 @@ import {
 import type { AbstractProps } from '../AbstractConference';
 
 import AlwaysOnLabels from './AlwaysOnLabels';
-import { navigate } from './ConferenceNavigationContainerRef';
 import ExpandedLabelPopup from './ExpandedLabelPopup';
 import LonelyMeetingExperience from './LonelyMeetingExperience';
 import TitleBar from './TitleBar';
 import { EXPANDED_LABEL_TIMEOUT } from './constants';
-import { screen } from './routes';
 import styles from './styles';
 
 

react/features/conference/components/native/index.js

@@ -1,6 +1,5 @@
 // @flow
 
 export { default as Conference } from './Conference';
-export { default as ConferenceNavigationContainer } from './ConferenceNavigationContainer';
 export { default as renderConferenceTimer } from './ConferenceTimerDisplay';
 export { default as InsecureRoomNameLabel } from './InsecureRoomNameLabel';

react/features/etherpad/components/SharedDocumentButton.native.js

@@ -5,8 +5,8 @@ import { translate } from '../../base/i18n';
 import { IconShareDoc } from '../../base/icons';
 import { connect } from '../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
-import { navigate } from '../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../conference/components/native/routes';
+import { navigate } from '../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../mobile/navigation/routes';
 
 
 type Props = AbstractButtonProps;

react/features/etherpad/components/native/SharedDocument.js

@@ -10,9 +10,9 @@ import { IconArrowBack } from '../../../base/icons';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
-import { goBack } from '../../../conference/components/native/ConferenceNavigationContainerRef';
 import HeaderNavigationButton
-    from '../../../conference/components/native/HeaderNavigationButton';
+    from '../../../mobile/navigation/components/HeaderNavigationButton';
+import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { getSharedDocumentUrl } from '../../functions';
 
 import styles, { INDICATOR_COLOR } from './styles';

react/features/invite/actions.native.js

@@ -3,8 +3,8 @@
 import type { Dispatch } from 'redux';
 
 import { getFeatureFlag, ADD_PEOPLE_ENABLED } from '../base/flags';
-import { navigate } from '../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../conference/components/native/routes';
+import { navigate } from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../mobile/navigation/routes';
 import { beginShareRoom } from '../share-room';
 
 import { isAddPeopleEnabled, isDialOutEnabled } from './functions';

react/features/invite/components/dial-in-summary/native/DialInSummary.js

@@ -10,8 +10,9 @@ import { translate } from '../../../../base/i18n';
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
-import { screen } from '../../../../conference/components/native/routes';
-import { renderArrowBackButton } from '../../../../welcome/functions.native';
+import { renderArrowBackButton }
+    from '../../../../mobile/navigation/components/welcome/functions';
+import { screen } from '../../../../mobile/navigation/routes';
 import { getDialInfoPageURLForURIString } from '../../../functions';
 
 import DialInSummaryErrorDialog from './DialInSummaryErrorDialog';

react/features/conference/components/native/HeaderNavigationButton.js → react/features/mobile/navigation/components/HeaderNavigationButton.js

@@ -4,8 +4,7 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { Icon } from '../../../base/icons';
-
-import styles from './styles';
+import styles from '../../../conference/components/native/styles';
 
 type Props = {
 

react/features/welcome/components/RootNavigationContainer.js → react/features/mobile/navigation/components/RootNavigationContainer.js

@@ -5,19 +5,21 @@ import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-import { connect } from '../../base/redux';
+import { connect } from '../../../base/redux';
+import { DialInSummary } from '../../../invite';
+import BlankPage from '../../../welcome/components/BlankPage';
+import { rootNavigationRef } from '../rootNavigationContainerRef';
+import { screen } from '../routes';
 import {
     dialInSummaryScreenOptions,
     drawerNavigatorScreenOptions,
     navigationContainerTheme
-} from '../../conference/components/native/ConferenceNavigatorScreenOptions';
-import { screen } from '../../conference/components/native/routes';
-import { DialInSummary } from '../../invite';
-import { isWelcomePageAppEnabled } from '../functions.native';
+} from '../screenOptions';
 
-import BlankPage from './BlankPage';
-import { rootNavigationRef } from './RootNavigationContainerRef';
-import WelcomePageNavigationContainer from './WelcomePageNavigationContainer';
+import ConferenceNavigationContainer
+    from './conference/components/ConferenceNavigationContainer';
+import WelcomePageNavigationContainer from './welcome/components/WelcomePageNavigationContainer';
+import { isWelcomePageAppEnabled } from './welcome/functions';
 
 const RootStack = createStackNavigator();
 
@@ -53,6 +55,13 @@ const RootNavigationContainer = ({ isWelcomePageAvailable }: Props) => (
                     component = { DialInSummary }
                     name = { screen.dialInSummary }
                     options = { dialInSummaryScreenOptions } />
+                <RootStack.Screen
+                    component = { ConferenceNavigationContainer }
+                    name = { screen.conference.root }
+                    options = {{
+                        gestureEnabled: false,
+                        headerShown: false
+                    }} />
             </RootStack.Navigator>
         </NavigationContainer>
     </SafeAreaProvider>

react/features/chat/components/native/ChatAndPolls.js → react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigationContainer.js

@@ -7,16 +7,16 @@ import { useSelector } from 'react-redux';
 import {
     getClientHeight,
     getClientWidth
-} from '../../../base/modal/components/functions.native';
-import { Chat } from '../../../chat';
-import { chatTabBarOptions } from '../../../conference/components/native/ConferenceNavigatorScreenOptions';
-import { screen } from '../../../conference/components/native/routes';
-import { PollsPane } from '../../../polls/components';
+} from '../../../../../base/modal/components/functions.native';
+import { Chat } from '../../../../../chat';
+import { PollsPane } from '../../../../../polls/components';
+import { screen } from '../../../routes';
+import { chatTabBarOptions } from '../../../screenOptions';
 
 const ChatTab = createMaterialTopTabNavigator();
 
 
-const ChatAndPolls = () => {
+const ChatAndPollsNavigationContainer = () => {
     const clientHeight = useSelector(getClientHeight);
     const clientWidth = useSelector(getClientWidth);
 
@@ -40,4 +40,4 @@ const ChatAndPolls = () => {
     );
 };
 
-export default ChatAndPolls;
+export default ChatAndPollsNavigationContainer;

react/features/conference/components/native/ConferenceNavigationContainer.js → react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.js

@@ -7,22 +7,19 @@ import { useTranslation } from 'react-i18next';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
-import { Chat, ChatAndPolls } from '../../../chat';
-import { SharedDocument } from '../../../etherpad';
+import { Chat } from '../../../../../chat';
+import Conference from '../../../../../conference/components/native/Conference';
+import { getDisablePolls } from '../../../../../conference/functions';
+import { SharedDocument } from '../../../../../etherpad';
 import AddPeopleDialog
-    from '../../../invite/components/add-people-dialog/native/AddPeopleDialog';
-import LobbyScreen from '../../../lobby/components/native/LobbyScreen';
-import { ParticipantsPane } from '../../../participants-pane/components/native';
+    from '../../../../../invite/components/add-people-dialog/native/AddPeopleDialog';
+import LobbyScreen from '../../../../../lobby/components/native/LobbyScreen';
+import { ParticipantsPane } from '../../../../../participants-pane/components/native';
 import SecurityDialog
-    from '../../../security/components/security-dialog/native/SecurityDialog';
+    from '../../../../../security/components/security-dialog/native/SecurityDialog';
 import SpeakerStats
-    from '../../../speaker-stats/components/native/SpeakerStats';
-import { getDisablePolls } from '../../functions';
-
-import Conference from './Conference';
-import {
-    conferenceNavigationRef
-} from './ConferenceNavigationContainerRef';
+    from '../../../../../speaker-stats/components/native/SpeakerStats';
+import { screen } from '../../../routes';
 import {
     chatScreenOptions,
     conferenceScreenOptions,
@@ -33,8 +30,12 @@ import {
     securityScreenOptions,
     sharedDocumentScreenOptions,
     speakerStatsScreenOptions
-} from './ConferenceNavigatorScreenOptions';
-import { screen } from './routes';
+} from '../../../screenOptions';
+import ChatAndPollsNavigationContainer
+    from '../../chat/components/ChatAndPollsNavigationContainer';
+import {
+    conferenceNavigationRef
+} from '../ConferenceNavigationContainerRef';
 
 const ConferenceStack = createStackNavigator();
 
@@ -50,7 +51,7 @@ const ConferenceNavigationContainer = () => {
         chatScreenName = screen.conference.chat;
         chatTitleString = 'chat.title';
     } else {
-        ChatScreen = ChatAndPolls;
+        ChatScreen = ChatAndPollsNavigationContainer;
         chatScreenName = screen.conference.chatandpolls.main;
         chatTitleString = 'chat.titleWithPolls';
     }

react/features/welcome/components/CustomDrawerContent.js → react/features/mobile/navigation/components/welcome/components/CustomDrawerContent.js

@@ -5,13 +5,12 @@ import React from 'react';
 import { ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { Avatar } from '../../base/avatar';
+import { Avatar } from '../../../../../base/avatar';
 import {
     getLocalParticipant, getParticipantDisplayName
-} from '../../base/participants';
-import { connect } from '../../base/redux';
-
-import styles, { DRAWER_AVATAR_SIZE } from './styles';
+} from '../../../../../base/participants';
+import { connect } from '../../../../../base/redux';
+import styles, { DRAWER_AVATAR_SIZE } from '../../../../../welcome/components/styles';
 
 type Props = {
 

react/features/welcome/components/WelcomePageNavigationContainer.js → react/features/mobile/navigation/components/welcome/components/WelcomePageNavigationContainer.js

@@ -4,21 +4,22 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import WelcomePage from '../../../../../welcome/components/WelcomePage';
+import HelpView from '../../../../../welcome/components/native/HelpView';
+import PrivacyView from '../../../../../welcome/components/native/PrivacyView';
+import TermsView from '../../../../../welcome/components/native/TermsView';
+import SettingsView
+    from '../../../../../welcome/components/native/settings/components/SettingsView';
+import { screen } from '../../../routes';
 import {
+    drawerContentOptions,
     helpScreenOptions,
     settingsScreenOptions,
     termsAndPrivacyScreenOptions,
     welcomeScreenOptions
-} from '../../conference/components/native/ConferenceNavigatorScreenOptions';
-import { screen } from '../../conference/components/native/routes';
-import HelpView from '../components/help/components/HelpView';
-import PrivacyView from '../components/privacy/components/PrivacyView';
-import SettingsView from '../components/settings/components/SettingsView';
-import TermsView from '../components/terms/components/TermsView';
+} from '../../../screenOptions';
 
 import CustomDrawerContent from './CustomDrawerContent';
-import WelcomePage from './WelcomePage.native';
-import { drawerContentOptions } from './constants';
 
 
 const DrawerStack = createDrawerNavigator();

react/features/welcome/components/WelcomePageTabs.js → react/features/mobile/navigation/components/welcome/components/WelcomePageTabs.js

@@ -4,14 +4,14 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
-import { CalendarList, isCalendarEnabled } from '../../calendar-sync';
-import { screen } from '../../conference/components/native/routes';
-import { RecentList } from '../../recent-list';
+import { CalendarList, isCalendarEnabled } from '../../../../../calendar-sync';
+import { RecentList } from '../../../../../recent-list';
 import {
     calendarListTabBarOptions,
     recentListTabBarOptions,
     tabBarOptions
-} from '../constants';
+} from '../../../../../welcome/constants';
+import { screen } from '../../../routes';
 
 const WelcomePage = createBottomTabNavigator();
 

react/features/welcome/functions.native.js → react/features/mobile/navigation/components/welcome/functions.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import { getFeatureFlag, WELCOME_PAGE_ENABLED } from '../base/flags';
-import { IconArrowBack } from '../base/icons';
+import { getFeatureFlag, WELCOME_PAGE_ENABLED } from '../../../../base/flags';
+import { IconArrowBack } from '../../../../base/icons';
 import HeaderNavigationButton
-    from '../conference/components/native/HeaderNavigationButton';
+    from '../HeaderNavigationButton';
 
 /**
  * Determines whether the {@code WelcomePage} is enabled by the app itself

react/features/mobile/navigation/middleware.js

@@ -0,0 +1,46 @@
+// @flow
+
+import { SET_ROOM } from '../../base/conference/actionTypes';
+import { MiddlewareRegistry } from '../../base/redux';
+
+import { navigateRoot } from './rootNavigationContainerRef';
+import { screen } from './routes';
+
+
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case SET_ROOM:
+        return _setRoom(store, next, action);
+    }
+
+    return next(action);
+});
+
+
+/**
+ * Notifies the feature base/conference that the action
+ * {@code SET_ROOM} is being dispatched within a specific
+ *  redux store.
+ *
+ * @param {Store} store - The redux store in which the specified {@code action}
+ * is being dispatched.
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
+ * specified {@code action} to the specified {@code store}.
+ * @param {Action} action - The redux action {@code SET_ROOM}
+ * which is being dispatched in the specified {@code store}.
+ * @private
+ * @returns {Object} The value returned by {@code next(action)}.
+ */
+function _setRoom(store, next, action) {
+    const { room: oldRoom } = store.getState()['features/base/conference'];
+    const result = next(action);
+    const { room: newRoom } = store.getState()['features/base/conference'];
+
+    if (!oldRoom && newRoom) {
+        navigateRoot(screen.conference.root);
+    } else if (oldRoom && !newRoom) {
+        navigateRoot(screen.root);
+    }
+
+    return result;
+}

react/features/welcome/components/RootNavigationContainerRef.js → react/features/mobile/navigation/rootNavigationContainerRef.js

@@ -12,7 +12,7 @@ export const rootNavigationRef = React.createRef();
  * @param {Object} params - Params to pass to the destination route.
  * @returns {Function}
  */
-export function navigate(name: string, params: Object) {
+export function navigateRoot(name: string, params: Object) {
     // $FlowExpectedError
     return rootNavigationRef.current?.navigate(name, params);
 }

react/features/conference/components/native/routes.js → react/features/mobile/navigation/routes.js

@@ -1,5 +1,5 @@
 export const screen = {
-    root: 'Root',
+    root: 'Main root',
     welcome: {
         main: 'Home',
         tabs: {
@@ -13,6 +13,7 @@ export const screen = {
     },
     dialInSummary: 'Dial-In Info',
     conference: {
+        root: 'Conference root',
         main: 'Conference',
         chat: 'Chat',
         chatandpolls: {

react/features/conference/components/native/ConferenceNavigatorScreenOptions.js → react/features/mobile/navigation/screenOptions.js

@@ -12,11 +12,11 @@ import {
     IconHome,
     IconInfo,
     IconSettings
-} from '../../../base/icons';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+} from '../../base/icons';
+import BaseTheme from '../../base/ui/components/BaseTheme';
 
-import { goBack } from './ConferenceNavigationContainerRef';
-import HeaderNavigationButton from './HeaderNavigationButton';
+import HeaderNavigationButton from './components/HeaderNavigationButton';
+import { goBack } from './components/conference/ConferenceNavigationContainerRef';
 
 /**
  * Navigation container theme.
@@ -82,6 +82,21 @@ export const drawerScreenOptions = {
     }
 };
 
+/**
+ * Drawer content options.
+ */
+export const drawerContentOptions = {
+    drawerActiveBackgroundColor: BaseTheme.palette.ui12,
+    drawerActiveTintColor: BaseTheme.palette.screen01Header,
+    drawerLabelStyle: {
+        marginLeft: BaseTheme.spacing[2]
+    },
+    drawerStyle: {
+        backgroundColor: BaseTheme.palette.ui12,
+        width: '54%'
+    }
+};
+
 /**
  * Screen options for welcome page.
  */

react/features/participants-pane/components/native/ParticipantsPaneButton.js

@@ -7,8 +7,8 @@ import { IconParticipants } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 import { navigate }
-    from '../../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../../conference/components/native/routes';
+    from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
 
 type Props = AbstractButtonProps & {
 

react/features/recent-list/components/ShowDialInInfoButton.native.js

@@ -4,8 +4,8 @@ import { translate } from '../../base/i18n';
 import { IconInfo } from '../../base/icons';
 import { connect } from '../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
-import { screen } from '../../conference/components/native/routes';
-import { navigate } from '../../welcome/components/RootNavigationContainerRef';
+import { navigateRoot } from '../../mobile/navigation/rootNavigationContainerRef';
+import { screen } from '../../mobile/navigation/routes';
 
 export type Props = AbstractButtonProps & {
 
@@ -42,7 +42,7 @@ class ShowDialInInfoButton extends AbstractButton<Props, *> {
     _handleClick() {
         const { itemId } = this.props;
 
-        navigate(screen.dialInSummary, {
+        navigateRoot(screen.dialInSummary, {
             summaryUrl: itemId.url
         });
     }

react/features/security/components/security-dialog/native/SecurityDialog.js

@@ -21,12 +21,13 @@ import { connect } from '../../../../base/redux';
 import { StyleType } from '../../../../base/styles';
 import BaseTheme from '../../../../base/ui/components/BaseTheme';
 import { isInBreakoutRoom } from '../../../../breakout-rooms/functions';
-import { goBack } from '../../../../conference/components/native/ConferenceNavigationContainerRef';
-import HeaderNavigationButton
-    from '../../../../conference/components/native/HeaderNavigationButton';
 import { toggleLobbyMode } from '../../../../lobby/actions.any';
 import LobbyModeSwitch
     from '../../../../lobby/components/native/LobbyModeSwitch';
+import HeaderNavigationButton
+    from '../../../../mobile/navigation/components/HeaderNavigationButton';
+import { goBack }
+    from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { LOCKED_LOCALLY, LOCKED_REMOTELY } from '../../../../room-lock';
 import {
     endRoomLockRequest,

react/features/security/components/security-dialog/native/SecurityDialogButton.js

@@ -2,8 +2,8 @@
 
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
-import { navigate } from '../../../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../../../conference/components/native/routes';
+import { navigate } from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../../mobile/navigation/routes';
 import AbstractSecurityDialogButton, {
     _mapStateToProps as _abstractMapStateToProps,
     type Props as AbstractSecurityDialogButtonProps

react/features/speaker-stats/components/native/SpeakerStatsButton.js

@@ -4,8 +4,8 @@ import { createToolbarEvent, sendAnalytics } from '../../../analytics';
 import { getFeatureFlag, SPEAKERSTATS_ENABLED } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
-import { navigate } from '../../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../../conference/components/native/routes';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
 import AbstractSpeakerStatsButton from '../AbstractSpeakerStatsButton';
 
 /**

react/features/welcome/components/AbstractWelcomePage.js

@@ -59,17 +59,6 @@ export type Props = {
 export class AbstractWelcomePage<P: Props> extends Component<P, *> {
     _mounted: ?boolean;
 
-    /**
-     * Implements React's {@link Component#getDerivedStateFromProps()}.
-     *
-     * @inheritdoc
-     */
-    static getDerivedStateFromProps(props: P, state: Object) {
-        return {
-            room: props._room || state.room
-        };
-    }
-
     /**
      * Save room name into component's local state.
      *

react/features/welcome/components/LocalVideoTrackUnderlay.native.js

@@ -1,80 +0,0 @@
-// @flow
-
-import React, { Component } from 'react';
-import { View } from 'react-native';
-
-import { VideoTrack } from '../../base/media';
-import { TintedView } from '../../base/react';
-import { connect } from '../../base/redux';
-import { getLocalVideoTrack } from '../../base/tracks';
-
-import styles from './styles';
-
-/**
- * The type of the React {@code Component} props of
- * {@link LocalVideoTrackUnderlay}.
- */
-type Props = {
-
-    /**
-     * The redux representation of the local participant's video track.
-     */
-    _localVideoTrack: Object,
-
-    /**
-     * React Elements to display within the component.
-     */
-    children: React$Node,
-
-    /**
-     * The style, if any, to apply to {@link LocalVideoTrackUnderlay} in
-     * addition to its default style.
-     */
-    style: Object
-};
-
-/**
- * Implements a React {@code Component} which underlays the local video track,
- * if any, underneath its children.
- */
-class LocalVideoTrackUnderlay extends Component<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @override
-     * @returns {ReactElement}
-     */
-    render() {
-        return (
-            <View
-                style = { [
-                    styles.localVideoTrackUnderlay,
-                    this.props.style
-                ] }>
-                <VideoTrack videoTrack = { this.props._localVideoTrack } />
-                <TintedView>
-                    { this.props.children }
-                </TintedView>
-            </View>
-        );
-    }
-}
-
-/**
- * Maps (parts of) the redux state to the React {@code Component} props of
- * {@code LocalVideoTrackUnderlay}.
- *
- * @param {Object} state - The redux state.
- * @private
- * @returns {{
- *     _localVideoTrack: (Track|undefined)
- * }}
- */
-function _mapStateToProps(state) {
-    return {
-        _localVideoTrack: getLocalVideoTrack(state['features/base/tracks'])
-    };
-}
-
-export default connect(_mapStateToProps)(LocalVideoTrackUnderlay);

react/features/welcome/components/WelcomePage.native.js

@@ -18,7 +18,9 @@ import { Icon, IconMenu, IconWarning } from '../../base/icons';
 import JitsiStatusBar from '../../base/modal/components/JitsiStatusBar';
 import { LoadingIndicator, Text } from '../../base/react';
 import { connect } from '../../base/redux';
-import BaseTheme from '../../base/ui/components/BaseTheme.native';
+import BaseTheme from '../../base/ui/components/BaseTheme';
+import WelcomePageTabs
+    from '../../mobile/navigation/components/welcome/components/WelcomePageTabs';
 
 import {
     AbstractWelcomePage,
@@ -26,7 +28,6 @@ import {
     type Props as AbstractProps
 } from './AbstractWelcomePage';
 import VideoSwitch from './VideoSwitch';
-import WelcomePageTabs from './WelcomePageTabs';
 import styles, { PLACEHOLDER_TEXT_COLOR } from './styles';
 
 
@@ -42,11 +43,6 @@ type Props = AbstractProps & {
      */
     navigation: Object,
 
-    /**
-     * Default prop for navigating between screen components(React Navigation).
-     */
-    route: Object,
-
     /**
      * The translate function.
      */
@@ -103,8 +99,6 @@ class WelcomePage extends AbstractWelcomePage<*> {
     componentDidMount() {
         super.componentDidMount();
 
-        this._updateRoomname();
-
         const {
             _headerStyles,
             navigation
@@ -115,7 +109,8 @@ class WelcomePage extends AbstractWelcomePage<*> {
                 <TouchableOpacity
                     /* eslint-disable-next-line react/jsx-no-bind */
                     onPress = { () =>
-                        navigation.dispatch(DrawerActions.openDrawer()) }
+                        navigation.dispatch(DrawerActions.openDrawer())
+                    }
                     style = { styles.drawerNavigationIcon }>
                     <Icon
                         size = { 20 }
@@ -127,6 +122,20 @@ class WelcomePage extends AbstractWelcomePage<*> {
             headerRight: () =>
                 <VideoSwitch />
         });
+
+        navigation.addListener('focus', () => {
+            this._updateRoomname();
+        });
+
+        navigation.addListener('blur', () => {
+            this._clearTimeouts();
+
+            this.setState({
+                generatedRoomname: '',
+                insecureRoomName: false,
+                room: ''
+            });
+        });
     }
 
     /**

react/features/welcome/components/constants.js

@@ -1,16 +0,0 @@
-// @flow
-
-import BaseTheme from '../../base/ui/components/BaseTheme';
-
-
-export const drawerContentOptions = {
-    drawerActiveBackgroundColor: BaseTheme.palette.ui12,
-    drawerActiveTintColor: BaseTheme.palette.screen01Header,
-    drawerLabelStyle: {
-        marginLeft: BaseTheme.spacing[2]
-    },
-    drawerStyle: {
-        backgroundColor: BaseTheme.palette.ui12,
-        width: '54%'
-    }
-};

react/features/welcome/components/help/components/styles.js

@@ -1,12 +0,0 @@
-/**
- * The styles of the native components of the feature {@code settings}.
- */
-export default {
-
-    /**
-     * Style for screen container.
-     */
-    helpViewContainer: {
-        flex: 1
-    }
-};

react/features/welcome/components/help/components/HelpView.js → react/features/welcome/components/native/HelpView.js

@@ -2,14 +2,13 @@
 
 import React, { PureComponent } from 'react';
 
-import JitsiScreenWebView from '../../../../base/modal/components/JitsiScreenWebView';
-import JitsiStatusBar from '../../../../base/modal/components/JitsiStatusBar';
-import { connect } from '../../../../base/redux';
-import { screen } from '../../../../conference/components/native/routes';
-import { renderArrowBackButton } from '../../../../welcome/functions.native';
-
-
-import styles from './styles';
+import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
+import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
+import { connect } from '../../../base/redux';
+import { renderArrowBackButton }
+    from '../../../mobile/navigation/components/welcome/functions';
+import { screen } from '../../../mobile/navigation/routes';
+import styles from '../styles';
 
 
 const DEFAULT_HELP_CENTRE_URL = 'https://web-cdn.jitsi.net/faq/meet-faq.html';
@@ -62,7 +61,7 @@ class HelpView extends PureComponent<Props> {
                 <JitsiStatusBar />
                 <JitsiScreenWebView
                     source = { this.props._url }
-                    style = { styles.helpViewContainer } />
+                    style = { styles.screenContainer } />
             </>
         );
     }

react/features/welcome/components/privacy/components/PrivacyView.js → react/features/welcome/components/native/PrivacyView.js

@@ -2,12 +2,12 @@
 
 import React, { useEffect } from 'react';
 
-import JitsiScreenWebView from '../../../../base/modal/components/JitsiScreenWebView';
-import JitsiStatusBar from '../../../../base/modal/components/JitsiStatusBar';
-import { screen } from '../../../../conference/components/native/routes';
-import { renderArrowBackButton } from '../../../../welcome/functions.native';
-
-import styles from './styles';
+import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
+import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
+import { renderArrowBackButton }
+    from '../../../mobile/navigation/components/welcome/functions';
+import { screen } from '../../../mobile/navigation/routes';
+import styles from '../styles';
 
 
 type Props = {
@@ -38,7 +38,7 @@ const PrivacyView = ({ navigation }: Props) => {
             <JitsiStatusBar />
             <JitsiScreenWebView
                 source = { PRIVACY_URL }
-                style = { styles.privacyViewContainer } />
+                style = { styles.screenContainer } />
         </>
     );
 };

react/features/welcome/components/terms/components/TermsView.js → react/features/welcome/components/native/TermsView.js

@@ -2,12 +2,12 @@
 
 import React, { useEffect } from 'react';
 
-import JitsiScreenWebView from '../../../../base/modal/components/JitsiScreenWebView';
-import JitsiStatusBar from '../../../../base/modal/components/JitsiStatusBar';
-import { screen } from '../../../../conference/components/native/routes';
-import { renderArrowBackButton } from '../../../../welcome/functions.native';
-
-import styles from './styles';
+import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
+import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
+import { renderArrowBackButton }
+    from '../../../mobile/navigation/components/welcome/functions';
+import { screen } from '../../../mobile/navigation/routes';
+import styles from '../styles';
 
 
 type Props = {
@@ -38,7 +38,7 @@ const TermsView = ({ navigation }: Props) => {
             <JitsiStatusBar />
             <JitsiScreenWebView
                 source = { TERMS_URL }
-                style = { styles.termsViewContainer } />
+                style = { styles.screenContainer } />
         </>
     );
 };

react/features/welcome/components/settings/components/FormRow.js → react/features/welcome/components/native/settings/components/FormRow.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
-import { translate } from '../../../../base/i18n';
+import { translate } from '../../../../../base/i18n';
 
 import styles, { ANDROID_UNDERLINE_COLOR, PLACEHOLDER_COLOR } from './styles';
 

react/features/welcome/components/settings/components/FormSectionAccordion.js → react/features/welcome/components/native/settings/components/FormSectionAccordion.js

@@ -3,8 +3,8 @@
 import React, { useCallback, useState } from 'react';
 import { List } from 'react-native-paper';
 
-import { translate } from '../../../../base/i18n';
-import { Icon, IconArrowDown, IconArrowUp } from '../../../../base/icons';
+import { translate } from '../../../../../base/i18n';
+import { Icon, IconArrowDown, IconArrowUp } from '../../../../../base/icons';
 
 import styles from './styles';
 

react/features/welcome/components/settings/components/SettingsView.js → react/features/welcome/components/native/settings/components/SettingsView.js

@@ -10,17 +10,18 @@ import {
 } from 'react-native';
 import { Divider, Switch, TextInput, withTheme } from 'react-native-paper';
 
-import { translate } from '../../../../base/i18n';
-import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
-import { connect } from '../../../../base/redux';
-import { screen } from '../../../../conference/components/native/routes';
+import { translate } from '../../../../../base/i18n';
+import JitsiScreen from '../../../../../base/modal/components/JitsiScreen';
+import { connect } from '../../../../../base/redux';
+import { renderArrowBackButton }
+    from '../../../../../mobile/navigation/components/welcome/functions';
+import { screen } from '../../../../../mobile/navigation/routes';
 import {
     AbstractSettingsView,
     _mapStateToProps as _abstractMapStateToProps,
     type Props as AbstractProps
-} from '../../../../settings/components/AbstractSettingsView';
-import { normalizeUserInputURL, isServerURLChangeEnabled } from '../../../../settings/functions';
-import { renderArrowBackButton } from '../../../../welcome/functions.native';
+} from '../../../../../settings/components/AbstractSettingsView';
+import { normalizeUserInputURL, isServerURLChangeEnabled } from '../../../../../settings/functions';
 
 import FormRow from './FormRow';
 import FormSectionAccordion from './FormSectionAccordion';

react/features/welcome/components/settings/components/styles.js → react/features/welcome/components/native/settings/components/styles.js

@@ -1,4 +1,4 @@
-import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
+import BaseTheme from '../../../../../base/ui/components/BaseTheme';
 export const ANDROID_UNDERLINE_COLOR = 'transparent';
 export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus;
 export const THUMB_COLOR = BaseTheme.palette.field02;

react/features/welcome/components/privacy/components/styles.js

@@ -1,12 +0,0 @@
-/**
- * The styles of the native components of the feature {@code privacy}.
- */
-export default {
-
-    /**
-     * Style for screen container.
-     */
-    privacyViewContainer: {
-        flex: 1
-    }
-};

react/features/welcome/components/styles.js

@@ -152,16 +152,6 @@ export default {
         paddingVertical: 2 * BoxModel.padding
     },
 
-    /**
-     * The style of the top-level container/{@code View} of
-     * {@code LocalVideoTrackUnderlay}.
-     */
-    localVideoTrackUnderlay: {
-        alignSelf: 'stretch',
-        backgroundColor: 'transparent',
-        flex: 1
-    },
-
     /**
      * Top-level screen style.
      */
@@ -280,5 +270,12 @@ export default {
         flex: 1,
         opacity: 0.8,
         overflow: 'hidden'
+    },
+
+    /**
+     * Style for screen container.
+     */
+    screenContainer: {
+        flex: 1
     }
 };

react/features/welcome/components/terms/components/styles.js

@@ -1,12 +0,0 @@
-/**
- * The styles of the native components of the feature {@code terms}.
- */
-export default {
-
-    /**
-     * Style for screen container.
-     */
-    termsViewContainer: {
-        flex: 1
-    }
-};