fix(chat/native) we need to dispatch close and open chat

Fixes issue #11516

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

@@ -6,7 +6,7 @@ import React, { useEffect } from 'react';
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { connect } from '../../../base/redux';
-import { closeChat, openChat } from '../../actions.native';
+import { closeChat } from '../../actions.any';
 import AbstractChat, {
     _mapStateToProps,
     type Props as AbstractProps
@@ -69,26 +69,21 @@ class Chat extends AbstractChat<Props> {
 export default translate(connect(_mapStateToProps)(props => {
     const {
         _nbUnreadMessages,
-        dispatch,
         navigation,
-        route,
         t
     } = props;
     const isChatScreenFocused = useIsFocused();
-    const privateMessageRecipient = route.params?.privateMessageRecipient;
 
     const nrUnreadMessages
         = !isChatScreenFocused && _nbUnreadMessages > 0
             ? `(${_nbUnreadMessages})` : '';
 
     useEffect(() => {
-        dispatch(openChat(privateMessageRecipient));
-
         navigation.setOptions({
             tabBarLabel: `${t('chat.tabs.chat')} ${nrUnreadMessages}`
         });
 
-        return () => dispatch(closeChat());
+        return () => props.dispatch(closeChat());
     }, [ nrUnreadMessages ]);
 
     return (

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

@@ -6,10 +6,11 @@ import { IconMessage, IconReply } from '../../../base/icons';
 import { getParticipantById } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-import { handleLobbyChatInitialized } from '../../../chat/actions.any';
+import { handleLobbyChatInitialized, openChat } from '../../../chat/actions';
 import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../../mobile/navigation/routes';
 
+
 export type Props = AbstractButtonProps & {
 
     /**
@@ -58,7 +59,7 @@ class PrivateMessageButton extends AbstractButton<Props, any> {
     toggledIcon = IconReply;
 
     /**
-     * Handles clicking / pressing the button, and kicks the participant.
+     * Handles clicking / pressing the button.
      *
      * @private
      * @returns {void}
@@ -67,6 +68,9 @@ class PrivateMessageButton extends AbstractButton<Props, any> {
         if (this.props._isLobbyMessage) {
             this.props.dispatch(handleLobbyChatInitialized(this.props.participantID));
         }
+
+        this.props.dispatch(openChat(this.props._participant));
+
         this.props._isPollsDisabled
             ? navigate(screen.conference.chat, {
                 privateMessageRecipient: this.props._participant
@@ -102,11 +106,11 @@ class PrivateMessageButton extends AbstractButton<Props, any> {
 export function _mapStateToProps(state: Object, ownProps: Props): $Shape<Props> {
     const enabled = getFeatureFlag(state, CHAT_ENABLED, true);
     const { disablePolls } = state['features/base/config'];
-    const { visible = enabled, isLobbyMessage } = ownProps;
+    const { visible = enabled, isLobbyMessage, participantID } = ownProps;
 
     return {
         _isPollsDisabled: disablePolls,
-        _participant: getParticipantById(state, ownProps.participantID),
+        _participant: getParticipantById(state, participantID),
         _isLobbyMessage: isLobbyMessage,
         visible
     };

react/features/mobile/navigation/screenOptions.js

@@ -21,7 +21,7 @@ import { screenHeaderCloseButton } from './functions';
  */
 export const navigationContainerTheme = {
     colors: {
-        background: BaseTheme.palette.ui12
+        background: BaseTheme.palette.uiBackground
     }
 };
 

react/features/video-menu/components/native/ConnectionStatusComponent.js

@@ -14,6 +14,7 @@ import { getParticipantDisplayName } from '../../../base/participants';
 import { BaseIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
+import { getSourceNameByParticipantId } from '../../../base/tracks';
 import statsEmitter from '../../../connection-indicator/statsEmitter';
 
 import styles from './styles';