init

react/features/mobile/navigation/components/lobby/LobbyNavigationContainerRef.ts

@@ -0,0 +1,24 @@
+import { NavigationContainerRef } from '@react-navigation/native';
+import React from 'react';
+
+export const lobbyNavigationContainerRef = React.createRef<NavigationContainerRef<any>>();
+
+/**
+ * User defined navigation action included inside the reference to the container.
+ *
+ * @param {string} name - Destination name of the route that has been defined somewhere.
+ * @param {Object} params - Params to pass to the destination route.
+ * @returns {Function}
+ */
+export function navigate(name: string, params?: Object) {
+    return lobbyNavigationContainerRef.current?.navigate(name, params);
+}
+
+/**
+ * User defined navigation action included inside the reference to the container.
+ *
+ * @returns {Function}
+ */
+export function goBack() {
+    return lobbyNavigationContainerRef.current?.goBack();
+}

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

@@ -0,0 +1,52 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../../../app/types';
+import LobbyChatScreen from '../../../../../lobby/components/native/LobbyChatScreen';
+import LobbyScreen from '../../../../../lobby/components/native/LobbyScreen';
+import { screen } from '../../../routes';
+import {
+    lobbyChatScreenOptions,
+    lobbyScreenOptions,
+    navigationContainerTheme
+} from '../../../screenOptions';
+import { lobbyNavigationContainerRef } from '../LobbyNavigationContainerRef';
+
+const LobbyStack = createStackNavigator();
+
+
+const LobbyNavigationContainer = () => {
+    const { isLobbyChatActive }
+        = useSelector((state: IReduxState) => state['features/chat']);
+
+    return (
+        <NavigationContainer
+            independent = { true }
+            ref = { lobbyNavigationContainerRef }
+
+            // @ts-ignore
+            theme = { navigationContainerTheme }>
+            <LobbyStack.Navigator
+                screenOptions = {{
+                    presentation: 'modal'
+                }}>
+                <LobbyStack.Screen
+                    component = { LobbyScreen }
+                    name = { screen.lobby.main }
+                    options = { lobbyScreenOptions } />
+                {
+                    isLobbyChatActive
+                    && <LobbyStack.Screen
+                        component = { LobbyChatScreen }
+                        name = { screen.lobby.chat }
+                        options = { lobbyChatScreenOptions } />
+                }
+            </LobbyStack.Navigator>
+        </NavigationContainer>
+    );
+
+};
+
+export default LobbyNavigationContainer;