[RN] Add chat functionality

Co-authored-by: DimaG <dgeorgiev06@gmail.com>

react/features/toolbox/components/native/OverflowMenu.js

@@ -9,6 +9,7 @@ import {
     bottomSheetItemStylesCombined,
     hideDialog
 } from '../../../base/dialog';
+import { InviteButton } from '../../../invite';
 import { AudioRouteButton } from '../../../mobile/audio-mode';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { LiveStreamButton, RecordButton } from '../../../recording';
@@ -86,6 +87,7 @@ class OverflowMenu extends Component<Props> {
                 }
                 <LiveStreamButton { ...buttonProps } />
                 <TileViewButton { ...buttonProps } />
+                <InviteButton { ...buttonProps } />
                 <PictureInPictureButton { ...buttonProps } />
             </BottomSheet>
         );

react/features/toolbox/components/native/Toolbox.js

@@ -5,12 +5,13 @@ import { View } from 'react-native';
 import { connect } from 'react-redux';
 
 import { Container } from '../../../base/react';
-import { InviteButton } from '../../../invite';
+import { ChatButton } from '../../../chat';
 
 import AudioMuteButton from '../AudioMuteButton';
 import HangupButton from '../HangupButton';
 import OverflowMenuButton from './OverflowMenuButton';
 import styles, {
+    chatButtonOverride,
     hangupButtonStyles,
     toolbarButtonStyles,
     toolbarToggledButtonStyles
@@ -141,6 +142,35 @@ class Toolbox extends Component<Props, State> {
         return 2 * Math.round(buttonSize / 2);
     }
 
+    /**
+     * Constructs the toggled style of the chat button. This cannot be done by
+     * simple style inheritance due to the size calculation done in this
+     * component.
+     *
+     * @param {Object} baseStyle - The base style that was originally
+     * calculated.
+     * @returns {Object | Array}
+     */
+    _getChatButtonToggledStyle(baseStyle) {
+        if (Array.isArray(baseStyle.style)) {
+            return {
+                ...baseStyle,
+                style: [
+                    ...baseStyle.style,
+                    chatButtonOverride.toggled
+                ]
+            };
+        }
+
+        return {
+            ...baseStyle,
+            style: [
+                baseStyle.style,
+                chatButtonOverride.toggled
+            ]
+        };
+    }
+
     _onLayout: (Object) => void;
 
     /**
@@ -200,7 +230,11 @@ class Toolbox extends Component<Props, State> {
             <View
                 pointerEvents = 'box-none'
                 style = { styles.toolbar }>
-                <InviteButton styles = { buttonStyles } />
+                <ChatButton
+                    styles = { buttonStyles }
+                    toggledStyles = {
+                        this._getChatButtonToggledStyle(toggledButtonStyles)
+                    } />
                 <AudioMuteButton
                     styles = { buttonStyles }
                     toggledStyles = { toggledButtonStyles } />

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

@@ -130,3 +130,13 @@ export const toolbarToggledButtonStyles = {
     iconStyle: styles.whiteToolbarButtonIcon,
     style: styles.whiteToolbarButton
 };
+
+/**
+ * Overrides to the standard styles that we apply to the chat button, as that
+ * behaves slightly differently to other buttons.
+ */
+export const chatButtonOverride = createStyleSheet({
+    toggled: {
+        backgroundColor: ColorPalette.blue
+    }
+});