feat(whiteboard/native): ui fixes

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

@@ -13,7 +13,6 @@ import { isUnsafeRoomWarningEnabled } from '../../../prejoin/functions';
 // @ts-ignore
 import WelcomePage from '../../../welcome/components/WelcomePage';
 import { isWelcomePageEnabled } from '../../../welcome/functions';
-import Whiteboard from '../../../whiteboard/components/native/Whiteboard';
 import { _ROOT_NAVIGATION_READY } from '../actionTypes';
 import { rootNavigationRef } from '../rootNavigationContainerRef';
 import { screen } from '../routes';
@@ -24,8 +23,7 @@ import {
     navigationContainerTheme,
     preJoinScreenOptions,
     unsafeMeetingScreenOptions,
-    welcomeScreenOptions,
-    whiteboardScreenOptions
+    welcomeScreenOptions
 } from '../screenOptions';
 
 import ConnectingPage from './ConnectingPage';
@@ -96,10 +94,6 @@ const RootNavigationContainer = ({ dispatch, isUnsafeRoomWarningAvailable, isWel
                     component = { ConnectingPage }
                     name = { screen.connecting }
                     options = { connectingScreenOptions } />
-                <RootStack.Screen // @ts-ignore
-                    component = { Whiteboard }
-                    name = { screen.conference.whiteboard }
-                    options = { whiteboardScreenOptions } />
                 <RootStack.Screen
                     component = { Prejoin }
                     name = { screen.preJoin }

react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx

@@ -43,6 +43,7 @@ import SpeakerStats
 import LanguageSelectorDialog
 // @ts-ignore
     from '../../../../../subtitles/components/native/LanguageSelectorDialog';
+import Whiteboard from '../../../../../whiteboard/components/native/Whiteboard';
 // @ts-ignore
 import { screen } from '../../../routes';
 import {
@@ -62,7 +63,8 @@ import {
     settingsNavigationContainerScreenOptions,
     sharedDocumentScreenOptions,
     speakerStatsScreenOptions,
-    subtitlesScreenOptions
+    subtitlesScreenOptions,
+    whiteboardScreenOptions
     // @ts-ignore
 } from '../../../screenOptions';
 // @ts-ignore
@@ -214,6 +216,14 @@ const ConferenceNavigationContainer = () => {
                         ...breakoutRoomsScreenOptions,
                         title: t('breakoutRooms.title')
                     }} />
+                <ConferenceStack.Screen
+                    // @ts-ignore
+                    component = { Whiteboard }
+                    name = { screen.conference.whiteboard }
+                    options = {{
+                        ...whiteboardScreenOptions,
+                        title: t('whiteboard.screenTitle')
+                    }} />
             </ConferenceStack.Navigator>
         </NavigationContainer>
     );

react/features/mobile/navigation/screenOptions.ts

@@ -191,15 +191,7 @@ export const connectingScreenOptions = {
 /**
  * Screen options for the whiteboard screen.
  */
-export const whiteboardScreenOptions = {
-    gestureEnabled: true,
-    headerStyle: {
-        backgroundColor: BaseTheme.palette.ui01
-    },
-    headerTitleStyle: {
-        color: BaseTheme.palette.text01
-    }
-};
+export const whiteboardScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for pre-join screen.

react/features/whiteboard/actions.native.ts

@@ -1,9 +1,12 @@
 import { createRestrictWhiteboardEvent } from '../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../analytics/functions';
 import { IStore } from '../app/types';
-import { navigateRoot } from '../mobile/navigation/rootNavigationContainerRef';
+import {
+    navigate
+} from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../mobile/navigation/routes';
 
+
 import { resetWhiteboard } from './actions.any';
 
 export * from './actions.any';
@@ -16,7 +19,7 @@ export * from './actions.any';
  */
 export const restrictWhiteboard = (shouldCloseWhiteboard = true) => (dispatch: IStore['dispatch']) => {
     if (shouldCloseWhiteboard) {
-        navigateRoot(screen.conference.root);
+        navigate(screen.conference.root);
     }
     dispatch(resetWhiteboard());
     sendAnalytics(createRestrictWhiteboardEvent());

react/features/whiteboard/components/native/Whiteboard.tsx

@@ -1,7 +1,7 @@
 import { Route } from '@react-navigation/native';
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
-import { View, ViewStyle } from 'react-native';
+import { Platform, View, ViewStyle } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { connect } from 'react-redux';
 
@@ -10,16 +10,23 @@ import { getCurrentConference } from '../../../base/conference/functions';
 import { IJitsiConference } from '../../../base/conference/reducer';
 import { openDialog } from '../../../base/dialog/actions';
 import { translate } from '../../../base/i18n/functions';
+import { IconCloseLarge } from '../../../base/icons/svg';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';
 import { safeDecodeURIComponent } from '../../../base/util/uri';
-import { setupWhiteboard } from '../../actions.any';
+import HeaderNavigationButton
+    from '../../../mobile/navigation/components/HeaderNavigationButton';
+import {
+    goBack
+} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { setupWhiteboard } from '../../actions.native';
 import { WHITEBOARD_ID } from '../../constants';
 import { getCollabServerUrl, getWhiteboardInfoForURIString } from '../../functions';
 
 import WhiteboardErrorDialog from './WhiteboardErrorDialog';
 import styles, { INDICATOR_COLOR } from './styles';
 
+
 interface IProps extends WithTranslation {
 
     /**
@@ -85,10 +92,23 @@ class Whiteboard extends PureComponent<IProps> {
      */
     componentDidMount() {
         const { navigation, t } = this.props;
-
-        navigation.setOptions({
-            headerTitle: t('whiteboard.screenTitle')
-        });
+        const headerLeft = () => {
+            if (Platform.OS === 'ios') {
+                return (
+                    <HeaderNavigationButton
+                        label = { t('dialog.close') }
+                        onPress = { goBack } />
+                );
+            }
+
+            return (
+                <HeaderNavigationButton
+                    onPress = { goBack }
+                    src = { IconCloseLarge } />
+            );
+        };
+
+        navigation.setOptions({ headerLeft });
     }
 
     /**

react/features/whiteboard/middleware.native.ts

@@ -5,7 +5,9 @@ import { hideDialog, openDialog } from '../base/dialog/actions';
 import { isDialogOpen } from '../base/dialog/functions';
 import { getLocalParticipant } from '../base/participants/functions';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
-import { navigateRoot } from '../mobile/navigation/rootNavigationContainerRef';
+import {
+    navigate
+} from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../mobile/navigation/routes';
 
 import { SET_WHITEBOARD_OPEN } from './actionTypes';
@@ -22,6 +24,7 @@ import {
 } from './functions';
 import './middleware.any';
 
+
 /**
  * Middleware which intercepts whiteboard actions to handle changes to the related state.
  *
@@ -34,6 +37,8 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action
 
     switch (action.type) {
     case SET_WHITEBOARD_OPEN: {
+        const { isOpen } = action;
+
         const enforceUserLimit = shouldEnforceUserLimit(state);
         const notifyUserLimit = shouldNotifyUserLimit(state);
 
@@ -44,7 +49,7 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action
             return next(action);
         }
 
-        if (action.isOpen) {
+        if (isOpen) {
             if (enforceUserLimit) {
                 dispatch(restrictWhiteboard());
 
@@ -63,7 +68,7 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action
             const collabServerUrl = getCollabServerUrl(state);
             const localParticipantName = getLocalParticipant(state)?.name;
 
-            navigateRoot(screen.conference.whiteboard, {
+            navigate(screen.conference.whiteboard, {
                 collabDetails,
                 collabServerUrl,
                 localParticipantName