ref: AddPeopleDialog to JitsiModal

react/features/invite/actionTypes.js

  */
 export const SET_CALLEE_INFO_VISIBLE = 'SET_CALLEE_INFO_VISIBLE';
 
-
-/**
- * The type of redux action which sets the invite dialog visible or invisible.
- *
- * {
- *     type: SET_INVITE_DIALOG_VISIBLE,
- *     visible: boolean
- * }
- */
-export const SET_INVITE_DIALOG_VISIBLE = 'SET_INVITE_DIALOG_VISIBLE';
-
 /**
  * The type of the action which signals an error occurred while requesting dial-
  * in numbers.

react/features/invite/actions.any.js

     BEGIN_ADD_PEOPLE,
     REMOVE_PENDING_INVITE_REQUESTS,
     SET_CALLEE_INFO_VISIBLE,
-    SET_INVITE_DIALOG_VISIBLE,
     UPDATE_DIAL_IN_NUMBERS_FAILED,
     UPDATE_DIAL_IN_NUMBERS_SUCCESS
 } from './actionTypes';
     };
 }
 
-/**
- * Sets the visibility of the invite dialog.
- *
- * @param {boolean} visible - The visibility to set.
- * @returns {{
- *     type: SET_INVITE_DIALOG_VISIBLE,
- *     visible: boolean
- * }}
- */
-export function setAddPeopleDialogVisible(visible: boolean) {
-    return {
-        type: SET_INVITE_DIALOG_VISIBLE,
-        visible
-    };
-}
-
 /**
  * Sets the visibility of {@code CalleeInfo}.
  *
     };
 }
 
-
 /**
  * Removes all pending invite requests.
  *

react/features/invite/actions.native.js

 import type { Dispatch } from 'redux';
 
 import { getFeatureFlag, INVITE_ENABLED } from '../base/flags';
+import { setActiveModalId } from '../base/modal';
 import { beginShareRoom } from '../share-room';
 
-import { setAddPeopleDialogVisible } from './actions.any';
 import { isAddPeopleEnabled, isDialOutEnabled } from './functions';
+import { ADD_PEOPLE_DIALOG_VIEW_ID } from './constants';
 
 export * from './actions.any';
 
             && (isAddPeopleEnabled(state) || isDialOutEnabled(state));
 
         if (addPeopleEnabled) {
-            return dispatch(setAddPeopleDialogVisible(true));
+            return dispatch(setActiveModalId(ADD_PEOPLE_DIALOG_VIEW_ID));
         }
 
         return dispatch(beginShareRoom());

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

 import {
     ActivityIndicator,
     FlatList,
-    KeyboardAvoidingView,
     Platform,
     SafeAreaView,
     TextInput,
     IconSearch,
     IconShare
 } from '../../../../base/icons';
+import { JitsiModal, setActiveModalId } from '../../../../base/modal';
 import {
     AvatarListItem,
-    HeaderWithNavigation,
-    SlidingView,
     type Item
 } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
 import { beginShareRoom } from '../../../../share-room';
 
-import { setAddPeopleDialogVisible } from '../../../actions.native';
+import { ADD_PEOPLE_DIALOG_VIEW_ID } from '../../../constants';
 
 import AbstractAddPeopleDialog, {
     type Props as AbstractProps,
         this._renderItem = this._renderItem.bind(this);
         this._renderSeparator = this._renderSeparator.bind(this);
         this._onClearField = this._onClearField.bind(this);
-        this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
         this._onInvite = this._onInvite.bind(this);
         this._onPressItem = this._onPressItem.bind(this);
         this._onShareMeeting = this._onShareMeeting.bind(this);
         this._onTypeQuery = this._onTypeQuery.bind(this);
+        this._renderShareMeetingButton = this._renderShareMeetingButton.bind(this);
         this._setFieldRef = this._setFieldRef.bind(this);
     }
 
     render() {
         const {
             _addPeopleEnabled,
-            _dialOutEnabled,
-            _headerStyles
+            _dialOutEnabled
         } = this.props;
         const { inviteItems, selectableItems } = this.state;
 
         }
 
         return (
-            <SlidingView
-                onHide = { this._onCloseAddPeopleDialog }
-                position = 'bottom'
-                show = { this.props._isVisible } >
-                <HeaderWithNavigation
-                    forwardDisabled = { this._isAddDisabled() }
-                    forwardLabelKey = 'inviteDialog.send'
-                    headerLabelKey = 'inviteDialog.header'
-                    onPressBack = { this._onCloseAddPeopleDialog }
-                    onPressForward = { this._onInvite } />
-                <KeyboardAvoidingView
-                    behavior = 'padding'
-                    style = { styles.avoidingView }>
-                    <SafeAreaView style = { styles.dialogWrapper }>
-                        <View
-                            style = { styles.searchFieldWrapper }>
-                            <View style = { styles.searchIconWrapper }>
-                                { this.state.searchInprogress
-                                    ? <ActivityIndicator
-                                        color = { DARK_GREY }
-                                        size = 'small' />
-                                    : <Icon
-                                        src = { IconSearch }
-                                        style = { styles.searchIcon } />}
-                            </View>
-                            <TextInput
-                                autoCorrect = { false }
-                                autoFocus = { false }
-                                onBlur = { this._onFocused(false) }
-                                onChangeText = { this._onTypeQuery }
-                                onFocus = { this._onFocused(true) }
-                                placeholder = {
-                                    this.props.t(`inviteDialog.${placeholderKey}`)
-                                }
-                                ref = { this._setFieldRef }
-                                style = { styles.searchField }
-                                value = { this.state.fieldValue } />
-                            { this._renderClearButton() }
-                        </View>
-                        { Boolean(inviteItems.length) && <View style = { styles.invitedList }>
-                            <FlatList
-                                data = { inviteItems }
-                                horizontal = { true }
-                                keyExtractor = { this._keyExtractor }
-                                keyboardShouldPersistTaps = 'always'
-                                renderItem = { this._renderInvitedItem } />
-                        </View> }
-                        <View style = { styles.resultList }>
-                            <FlatList
-                                ItemSeparatorComponent = { this._renderSeparator }
-                                data = { selectableItems }
-                                extraData = { inviteItems }
-                                keyExtractor = { this._keyExtractor }
-                                keyboardShouldPersistTaps = 'always'
-                                renderItem = { this._renderItem } />
-                        </View>
-                    </SafeAreaView>
-                    <SafeAreaView
-                        style = { [
-                            styles.bottomBar,
-                            _headerStyles.headerOverlay,
-                            this.state.bottomPadding ? styles.extraBarPadding : null ] }>
-                        { this._renderShareMeetingButton() }
-                    </SafeAreaView>
-                </KeyboardAvoidingView>
-            </SlidingView>
+            <JitsiModal
+                footerComponent = { this._renderShareMeetingButton }
+                headerProps = {{
+                    forwardDisabled: this._isAddDisabled(),
+                    forwardLabelKey: 'inviteDialog.send',
+                    headerLabelKey: 'inviteDialog.header',
+                    onPressForward: this._onInvite
+                }}
+                modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }>
+                <View
+                    style = { styles.searchFieldWrapper }>
+                    <View style = { styles.searchIconWrapper }>
+                        { this.state.searchInprogress
+                            ? <ActivityIndicator
+                                color = { DARK_GREY }
+                                size = 'small' />
+                            : <Icon
+                                src = { IconSearch }
+                                style = { styles.searchIcon } />}
+                    </View>
+                    <TextInput
+                        autoCorrect = { false }
+                        autoFocus = { false }
+                        onBlur = { this._onFocused(false) }
+                        onChangeText = { this._onTypeQuery }
+                        onFocus = { this._onFocused(true) }
+                        placeholder = {
+                            this.props.t(`inviteDialog.${placeholderKey}`)
+                        }
+                        ref = { this._setFieldRef }
+                        style = { styles.searchField }
+                        value = { this.state.fieldValue } />
+                    { this._renderClearButton() }
+                </View>
+                { Boolean(inviteItems.length) && <View style = { styles.invitedList }>
+                    <FlatList
+                        data = { inviteItems }
+                        horizontal = { true }
+                        keyExtractor = { this._keyExtractor }
+                        keyboardShouldPersistTaps = 'always'
+                        renderItem = { this._renderInvitedItem } />
+                </View> }
+                <View style = { styles.resultList }>
+                    <FlatList
+                        ItemSeparatorComponent = { this._renderSeparator }
+                        data = { selectableItems }
+                        extraData = { inviteItems }
+                        keyExtractor = { this._keyExtractor }
+                        keyboardShouldPersistTaps = 'always'
+                        renderItem = { this._renderItem } />
+                </View>
+            </JitsiModal>
         );
     }
 
         this._onTypeQuery('');
     }
 
-    _onCloseAddPeopleDialog: () => boolean
-
-    /**
-     * Closes the dialog.
-     *
-     * @returns {boolean}
-     */
-    _onCloseAddPeopleDialog() {
-        if (this.props._isVisible) {
-            this.props.dispatch(setAddPeopleDialogVisible(false));
-
-            return true;
-        }
-
-        return false;
-    }
-
     _onFocused: boolean => Function;
 
     /**
                     });
                     this._showFailedInviteAlert();
                 } else {
-                    this._onCloseAddPeopleDialog();
+                    this.props.dispatch(setActiveModalId());
                 }
             });
     }
         );
     }
 
+    _renderShareMeetingButton: () => React$Element<any>;
+
     /**
      * Renders a button to share the meeting info.
      *
         const { _headerStyles } = this.props;
 
         return (
-            <TouchableOpacity
-                onPress = { this._onShareMeeting }>
-                <Icon
-                    src = { IconShare }
-                    style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
-            </TouchableOpacity>
+            <SafeAreaView
+                style = { [
+                    styles.bottomBar,
+                    _headerStyles.headerOverlay,
+                    this.state.bottomPadding ? styles.extraBarPadding : null
+                ] }>
+                <TouchableOpacity
+                    onPress = { this._onShareMeeting }>
+                    <Icon
+                        src = { IconShare }
+                        style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
+                </TouchableOpacity>
+            </SafeAreaView>
         );
     }
 
     return {
         ..._abstractMapStateToProps(state),
         _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
-        _isVisible: state['features/invite'].inviteDialogVisible
+        _isVisible: state['features/base/modal'].activeModalId === ADD_PEOPLE_DIALOG_VIEW_ID
     };
 }
 

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

 // @flow
 
-import { BoxModel, ColorPalette } from '../../../../base/styles';
+import { BoxModel } from '../../../../base/styles';
 
 export const AVATAR_SIZE = 40;
 export const DARK_GREY = 'rgb(28, 32, 37)';
         fontSize: 12
     },
 
-    avoidingView: {
-        flex: 1
-    },
-
     bottomBar: {
         alignItems: 'center',
         flexDirection: 'row',
         width: 24
     },
 
-    dialogWrapper: {
-        alignItems: 'stretch',
-        backgroundColor: ColorPalette.white,
-        flex: 1,
-        flexDirection: 'column',
-        justifyContent: 'flex-start'
-    },
-
     /**
      * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
      */

react/features/invite/constants.js

+// @flow
+
+/**
+ * Modal ID for the AddPeopleDialog modal.
+ */
+export const ADD_PEOPLE_DIALOG_VIEW_ID = 'ADD_PEOPLE_DIALOG_VIEW_ID';
 
 /**
  * Modal ID for the DialInSummary modal.
  */
 export const DIAL_IN_SUMMARY_VIEW_ID = 'DIAL_IN_SUMMARY_VIEW_ID';
+
 /**
  * The identifier of the sound to be played when the status of an outgoing call
  * is expired.

react/features/invite/reducer.js

     ADD_PENDING_INVITE_REQUEST,
     REMOVE_PENDING_INVITE_REQUESTS,
     SET_CALLEE_INFO_VISIBLE,
-    SET_INVITE_DIALOG_VISIBLE,
     UPDATE_DIAL_IN_NUMBERS_FAILED,
     UPDATE_DIAL_IN_NUMBERS_SUCCESS
 } from './actionTypes';
      * @type {boolean|undefined}
      */
     calleeInfoVisible: false,
-    inviteDialogVisible: false,
     numbersEnabled: true,
     pendingInviteRequests: []
 };
             initialCalleeInfo: action.initialCalleeInfo
         };
 
-
-    case SET_INVITE_DIALOG_VISIBLE:
-        return {
-            ...state,
-            inviteDialogVisible: action.visible
-        };
-
     case UPDATE_DIAL_IN_NUMBERS_FAILED:
         return {
             ...state,