feat(notifications): moved notifications to the bottom of the screen

react/features/conference/components/native/Conference.js

@@ -436,6 +436,7 @@ class Conference extends AbstractConference<Props, State> {
                         _shouldDisplayTileView
                         || <>
                             <Filmstrip />
+                            { this._renderNotificationsContainer() }
                             <Toolbox />
                         </>
                     }
@@ -467,7 +468,6 @@ class Conference extends AbstractConference<Props, State> {
                         {/* eslint-disable-next-line react/jsx-no-bind */}
                         <AlwaysOnLabels createOnPress = { this._createOnPress } />
                     </View>
-                    { this._renderNotificationsContainer() }
                 </SafeAreaView>
 
                 <TestConnectionInfo />
@@ -530,7 +530,8 @@ class Conference extends AbstractConference<Props, State> {
 
         return super.renderNotificationsContainer(
             {
-                style: notificationsStyle
+                style: notificationsStyle,
+                toolboxVisible: this.props._toolboxVisible
             }
         );
     }

react/features/filmstrip/components/native/Filmstrip.js

@@ -9,6 +9,7 @@ import { Platform } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 import { getHideSelfView } from '../../../base/settings/functions.any';
+import { areThereNotifications } from '../../../notifications/functions';
 import { isToolboxVisible } from '../../../toolbox/functions';
 import { setVisibleRemoteParticipants } from '../../actions';
 import {
@@ -16,12 +17,13 @@ import {
     isFilmstripVisible,
     shouldDisplayLocalThumbnailSeparately,
     shouldRemoteVideosBeVisible
-} from '../../functions';
+} from '../../functions.native';
 
 import LocalThumbnail from './LocalThumbnail';
 import Thumbnail from './Thumbnail';
 import styles from './styles';
 
+
 // Immutable reference to avoid re-renders.
 const NO_REMOTE_VIDEOS = [];
 
@@ -51,6 +53,8 @@ type Props = {
 
     _localParticipantId: string,
 
+    _notificationsAvailable: boolean,
+
     /**
      * The participants in the conference.
      */
@@ -248,6 +252,7 @@ class Filmstrip extends PureComponent<Props> {
             _disableSelfView,
             _toolboxVisible,
             _localParticipantId,
+            _notificationsAvailable,
             _participants,
             _visible
         } = this.props;
@@ -256,7 +261,7 @@ class Filmstrip extends PureComponent<Props> {
             return null;
         }
 
-        const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible;
+        const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible && !_notificationsAvailable;
         const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW;
         const filmstripStyle = isNarrowAspectRatio ? styles.filmstripNarrow : styles.filmstripWide;
         const { height, width } = this._getDimensions();
@@ -330,6 +335,7 @@ function _mapStateToProps(state) {
         _clientWidth: responsiveUI.clientWidth,
         _disableSelfView: disableSelfView,
         _localParticipantId: getLocalParticipant(state)?.id,
+        _notificationsAvailable: areThereNotifications(state),
         _participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS,
         _toolboxVisible: isToolboxVisible(state),
         _visible: enabled && isFilmstripVisible(state)

react/features/notifications/components/native/NotificationsContainer.js

@@ -1,6 +1,8 @@
 // @flow
 
 import React, { Component } from 'react';
+import { Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { connect } from '../../../base/redux';
 import { hideNotification } from '../../actions';
@@ -20,7 +22,9 @@ type Props = {
     /**
      * Invoked to update the redux store in order to remove notifications.
      */
-     dispatch: Function
+     dispatch: Function,
+
+     toolboxVisible: boolean
 };
 
 /**
@@ -165,10 +169,12 @@ class NotificationsContainer extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { _notifications } = this.props;
+        const { _notifications, toolboxVisible } = this.props;
+        const bottomEdge = Platform.OS === 'ios' && !toolboxVisible;
 
         return (
-            <>
+            <SafeAreaView
+                edges = { [ bottomEdge && 'bottom', 'left', 'right' ].filter(Boolean) }>
                 {
                     _notifications.map((notification, index) => {
                         const { props, uid } = notification;
@@ -182,7 +188,7 @@ class NotificationsContainer extends Component<Props> {
                         );
                     })
                 }
-            </>
+            </SafeAreaView>
         );
     }
 

react/features/notifications/components/native/styles.js

@@ -17,7 +17,7 @@ const notification = {
     flexDirection: 'row',
     maxHeight: 104,
     height: 'auto',
-    marginBottom: BaseTheme.spacing[3],
+    marginBottom: BaseTheme.spacing[2],
     marginHorizontal: BaseTheme.spacing[2],
     maxWidth: 400,
     width: 'auto'