fix(rn,dialin-summary) simplify navigation

Only havee the screen in the hierarchy if we have a welcome page, since
it's the only way to access it.

Use goBack() from the navigator directly and avoid duplicating all props
to the screen.

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

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { Linking, Platform, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { type Dispatch } from 'redux';
@@ -13,8 +13,6 @@ import { LoadingIndicator } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
 import HeaderNavigationButton
     from '../../../../mobile/navigation/components/HeaderNavigationButton';
-import { navigateRoot } from '../../../../mobile/navigation/rootNavigationContainerRef';
-import { screen } from '../../../../mobile/navigation/routes';
 import { getDialInfoPageURLForURIString } from '../../../functions';
 
 import DialInSummaryErrorDialog from './DialInSummaryErrorDialog';
@@ -43,7 +41,7 @@ type Props = {
 /**
  * Implements a React native component that displays the dial in info page for a specific room.
  */
-class DialInSummary extends Component<Props> {
+class DialInSummary extends PureComponent<Props> {
 
     /**
      * Initializes a new instance.
@@ -53,7 +51,6 @@ class DialInSummary extends Component<Props> {
     constructor(props: Props) {
         super(props);
 
-        this._onNavigateToRoot = this._onNavigateToRoot.bind(this);
         this._onError = this._onError.bind(this);
         this._onNavigate = this._onNavigate.bind(this);
         this._renderLoading = this._renderLoading.bind(this);
@@ -68,6 +65,9 @@ class DialInSummary extends Component<Props> {
      */
     componentDidMount() {
         const { navigation, t } = this.props;
+        const onNavigationClose = () => {
+            navigation.goBack();
+        };
 
         navigation.setOptions({
             headerLeft: () => {
@@ -75,13 +75,15 @@ class DialInSummary extends Component<Props> {
                     return (
                         <HeaderNavigationButton
                             label = { t('dialog.close') }
-                            onPress = { this._onNavigateToRoot } />
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onPress = { onNavigationClose } />
                     );
                 }
 
                 return (
                     <HeaderNavigationButton
-                        onPress = { this._onNavigateToRoot }
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onPress = { onNavigationClose }
                         src = { IconClose } />
                 );
             }
@@ -112,17 +114,6 @@ class DialInSummary extends Component<Props> {
         );
     }
 
-    _onNavigateToRoot: () => void;
-
-    /**
-     * Callback to handle navigation back to root.
-     *
-     * @returns {void}
-     */
-    _onNavigateToRoot() {
-        navigateRoot(screen.root);
-    }
-
     _onError: () => void;
 
     /**

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

@@ -45,10 +45,16 @@ const RootNavigationContainer = ({ isWelcomePageAvailable }: Props) => {
                     initialRouteName = { initialRouteName }>
                     {
                         isWelcomePageAvailable
-                            && <RootStack.Screen
-                                component = { WelcomePageNavigationContainer }
-                                name = { screen.root }
-                                options = { drawerNavigatorScreenOptions } />
+                            && <>
+                                <RootStack.Screen
+                                    component = { WelcomePageNavigationContainer }
+                                    name = { screen.root }
+                                    options = { drawerNavigatorScreenOptions } />
+                                <RootStack.Screen
+                                    component = { DialInSummary }
+                                    name = { screen.dialInSummary }
+                                    options = { dialInSummaryScreenOptions } />
+                            </>
                     }
                     <RootStack.Screen
                         component = { ConnectingPage }
@@ -57,10 +63,6 @@ const RootNavigationContainer = ({ isWelcomePageAvailable }: Props) => {
                             gestureEnabled: false,
                             headerShown: false
                         }} />
-                    <RootStack.Screen
-                        component = { DialInSummary }
-                        name = { screen.dialInSummary }
-                        options = { dialInSummaryScreenOptions } />
                     <RootStack.Screen
                         component = { ConferenceNavigationContainer }
                         name = { screen.conference.root }

react/features/mobile/navigation/screenOptions.js

@@ -43,21 +43,6 @@ export const fullScreenOptions = {
 };
 
 
-/**
- * Dial-IN Info screen options and transition types.
- */
-export const dialInSummaryScreenOptions = {
-    ...TransitionPresets.ModalTransition,
-    gestureEnabled: true,
-    headerShown: true,
-    headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
-    },
-    headerTitleStyle: {
-        color: BaseTheme.palette.text01
-    }
-};
-
 /**
  * Drawer navigator screens options and transition types.
  */
@@ -203,6 +188,14 @@ export const presentationScreenOptions = {
  */
 export const chatScreenOptions = presentationScreenOptions;
 
+/**
+ * Dial-IN Info screen options and transition types.
+ */
+export const dialInSummaryScreenOptions = {
+    ...presentationScreenOptions,
+    headerLeft: undefined
+};
+
 /**
  * Screen options for invite modal.
  */