feat(chat/native): fixed keyboard overlapping chat input bar (#13984)

* feat(chat/native): fixed keyboard overlapping chat input bar
jitsi · Oct 30, 2023 · 29d02f0 · 29d02f0
1 parent c780f9b
commit 29d02f0
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/react/features/chat/components/native/Chat.tsx b/react/features/chat/components/native/Chat.tsx
@@ -59,13 +59,17 @@ class Chat extends Component<IProps> {
         return (
             <JitsiScreen
                 disableForcedKeyboardDismiss = { true }
+
+                /* eslint-disable react/jsx-no-bind */
+                footerComponent = { () =>
+                    <ChatInputBar onSend = { this._onSendMessage } />
+                }
                 hasBottomTextInput = { true }
                 hasTabNavigator = { true }
                 style = { styles.chatContainer }>
                 {/* @ts-ignore */}
                 <MessageContainer messages = { _messages } />
                 <MessageRecipient privateMessageRecipient = { privateMessageRecipient } />
-                <ChatInputBar onSend = { this._onSendMessage } />
             </JitsiScreen>
         );
     }

diff --git a/react/features/chat/components/native/ChatInputBar.tsx b/react/features/chat/components/native/ChatInputBar.tsx
@@ -1,18 +1,26 @@
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
-import { Platform, ViewStyle } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Platform, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { IconSend } from '../../../base/icons/svg';
+import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
 import IconButton from '../../../base/ui/components/native/IconButton';
 import Input from '../../../base/ui/components/native/Input';
 import { BUTTON_TYPES } from '../../../base/ui/constants.native';
 
 import styles from './styles';
 
+
 interface IProps extends WithTranslation {
 
+    /**
+     * Application's aspect ratio.
+     */
+    aspectRatio: Symbol;
+
     /**
      * Callback to invoke on message send.
      */
@@ -66,11 +74,18 @@ class ChatInputBar extends Component<IProps, IState> {
      * @inheritdoc
      */
     render() {
+        let inputBarStyles;
+
+        if (this.props.aspectRatio === ASPECT_RATIO_WIDE) {
+            inputBarStyles = styles.inputBarWide;
+        } else {
+            inputBarStyles = styles.inputBarNarrow;
+        }
+
         return (
-            <SafeAreaView
-                edges = { [ 'bottom' ] }
+            <View
                 style = { [
-                    styles.inputBar,
+                    inputBarStyles,
                     this.state.addPadding ? styles.extraBarPadding : null
                 ] as ViewStyle[] }>
                 <Input
@@ -88,9 +103,8 @@ class ChatInputBar extends Component<IProps, IState> {
                     disabled = { !this.state.message }
                     onPress = { this._onSubmit }
                     src = { IconSend }
-                    style = { styles.sendButton }
                     type = { BUTTON_TYPES.PRIMARY } />
-            </SafeAreaView>
+            </View>
         );
     }
 
@@ -137,4 +151,19 @@ class ChatInputBar extends Component<IProps, IState> {
     }
 }
 
-export default translate(ChatInputBar);
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const { aspectRatio } = state['features/base/responsive-ui'];
+
+    return {
+        aspectRatio
+    };
+}
+
+export default translate(connect(_mapStateToProps)(ChatInputBar));
diff --git a/react/features/chat/components/native/styles.ts b/react/features/chat/components/native/styles.ts
@@ -14,6 +14,12 @@ const recipientContainer = {
     padding: BaseTheme.spacing[2]
 };
 
+const inputBar = {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+};
+
 /**
  * The styles of the feature chat.
  *
@@ -116,12 +122,16 @@ export default {
         paddingBottom: 30
     },
 
-    inputBar: {
-        alignItems: 'center',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginLeft: BaseTheme.spacing[3],
-        width: '100%'
+    inputBarNarrow: {
+        ...inputBar,
+        height: 112,
+        marginHorizontal: BaseTheme.spacing[3]
+    },
+
+    inputBarWide: {
+        ...inputBar,
+        height: 88,
+        marginHorizontal: BaseTheme.spacing[9]
     },
 
     customInputContainer: {
@@ -157,10 +167,6 @@ export default {
         flexDirection: 'row'
     },
 
-    sendButton: {
-        marginRight: BaseTheme.spacing[5]
-    },
-
     /**
      * Style modifier for system (error) messages.
      */