feat(native-participants-pane) added showHeaderWithNavigation prop to JitsiModal and created close button

react/features/base/modal/components/JitsiModal.js

@@ -66,6 +66,11 @@ type Props = {
      */
     position?: string,
 
+    /**
+     * True if the header with navigation should be shown, false otherwise.
+     */
+    showHeaderWithNavigation: boolean,
+
     /**
      * Additional style to be appended to the View containing the content of the modal.
      */
@@ -98,7 +103,17 @@ class JitsiModal extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _headerStyles, _show, _styles, children, footerComponent, headerProps, position, style } = this.props;
+        const {
+            _headerStyles,
+            _show,
+            _styles,
+            children,
+            footerComponent,
+            headerProps,
+            position,
+            showHeaderWithNavigation,
+            style
+        } = this.props;
 
         return (
             <SlidingView
@@ -117,9 +132,10 @@ class JitsiModal extends PureComponent<Props> {
                         _styles.page,
                         style
                     ] }>
-                    <HeaderWithNavigation
+                    {showHeaderWithNavigation
+                    && <HeaderWithNavigation
                         { ...headerProps }
-                        onPressBack = { this._onRequestClose } />
+                        onPressBack = { this._onRequestClose } />}
                     <SafeAreaView style = { styles.safeArea }>
                         { children }
                     </SafeAreaView>

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

@@ -44,7 +44,8 @@ class Chat extends AbstractChat<Props> {
                     headerLabelKey: 'chat.title'
                 }}
                 modalId = { CHAT_VIEW_MODAL_ID }
-                onClose = { this._onClose }>
+                onClose = { this._onClose }
+                showHeaderWithNavigation = { true }>
 
                 <MessageContainer messages = { this.props._messages } />
                 <MessageRecipient />

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

@@ -78,6 +78,7 @@ class SharedDocument extends PureComponent<Props> {
                     headerLabelKey: 'documentSharing.title'
                 }}
                 modalId = { SHARE_DOCUMENT_VIEW_ID }
+                showHeaderWithNavigation = { true }
                 style = { styles.webView }>
                 <WebView
                     onError = { this._onError }

react/features/help/components/HelpView.js

@@ -33,7 +33,8 @@ class HelpView extends PureComponent<Props> {
                 headerProps = {{
                     headerLabelKey: 'helpView.header'
                 }}
-                modalId = { HELP_VIEW_MODAL_ID }>
+                modalId = { HELP_VIEW_MODAL_ID }
+                showHeaderWithNavigation = { true }>
                 <WebView source = {{ uri: this.props._url }} />
             </JitsiModal>
         );

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

@@ -176,7 +176,8 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                     headerLabelKey: 'inviteDialog.header',
                     onPressForward: this._onInvite
                 }}
-                modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }>
+                modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }
+                showHeaderWithNavigation = { true }>
                 <View
                     style = { styles.searchFieldWrapper }>
                     <View style = { styles.searchIconWrapper }>

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

@@ -58,7 +58,8 @@ class DialInSummary extends Component<Props> {
                     headerLabelKey: 'info.label'
                 }}
                 modalId = { DIAL_IN_SUMMARY_VIEW_ID }
-                style = { styles.backDrop } >
+                showHeaderWithNavigation = { true }
+                style = { styles.backDrop }>
                 <WebView
                     onError = { this._onError }
                     onShouldStartLoadWithRequest = { this._onNavigate }

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

@@ -1,14 +1,17 @@
 // @flow
 
 import React, { useCallback } from 'react';
-import { Button, Text, withTheme } from 'react-native-paper';
+import { Button, withTheme } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
 
 import { translate } from '../../../base/i18n';
+import { Icon, IconClose } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
 import { close } from '../../actions';
 
+import styles from './styles';
+
 /**
  * {@code ParticipantsPane}'s React {@code Component} prop types.
  */
@@ -31,16 +34,25 @@ function ParticipantsPane({ theme }: Props) {
         () => dispatch(close()),
         [ dispatch ]);
 
+    const { palette } = theme;
+
     return (
         <JitsiModal
-            headerProps = {{
-                onPressBack: closePane()
-            }}>
-            {/* eslint-disable-next-line react/jsx-no-bind */}
-            <Button onPress = { closePane }> X</Button>
-            <Text>
-                OLE
-            </Text>
+            showHeaderWithNavigation = { false }
+            style = { styles.participantsPane }>
+            <Button
+                mode = 'contained'
+                onPress = { closePane }
+                style = { styles.closeButton }
+                theme = {{
+                    colors: {
+                        primary: palette.action02
+                    }
+                }}>
+                <Icon
+                    src = { IconClose }
+                    style = { styles.closeIcon } />
+            </Button>
         </JitsiModal>
     );
 }

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

@@ -0,0 +1,26 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+/**
+ * The styles of the native components of the feature {@code participants}.
+ */
+export default {
+    participantsPane: {
+        backgroundColor: BaseTheme.palette.ui01,
+        padding: 16
+    },
+
+    closeButton: {
+        alignItems: 'center',
+        display: 'flex',
+        height: 48,
+        justifyContent: 'center',
+        marginLeft: 'auto'
+    },
+
+    closeIcon: {
+        display: 'flex',
+        flex: 1,
+        fontSize: 24,
+        justifyContent: 'center'
+    }
+};

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

@@ -158,7 +158,8 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                     headerLabelKey: 'settingsView.header'
                 }}
                 modalId = { SETTINGS_VIEW_ID }
-                onClose = { this._onClose }>
+                onClose = { this._onClose }
+                showHeaderWithNavigation = { true }>
                 <ScrollView>
                     <FormSectionAccordion
                         accordion = { false }