From 15fb6363aa7346970bb0cc105d106f1de0cb2256 Mon Sep 17 00:00:00 2001
From: Tanmay Thole <72058456+tanmaythole@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:20:18 +0530
Subject: [PATCH] fix: height for multiple line floating text input (#7688)

---
 app/components/floating_text_input_label/index.tsx   | 12 ++++++++----
 .../notification_auto_responder.tsx                  |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/components/floating_text_input_label/index.tsx b/app/components/floating_text_input_label/index.tsx
index 74a8bdbb2..708ac8b45 100644
--- a/app/components/floating_text_input_label/index.tsx
+++ b/app/components/floating_text_input_label/index.tsx
@@ -95,6 +95,7 @@ type FloatingTextInputProps = TextInputProps & {
     label: string;
     labelTextStyle?: TextStyle;
     multiline?: boolean;
+    multilineInputHeight?: number;
     onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
     onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
     onLayout?: (e: LayoutChangeEvent) => void;
@@ -117,6 +118,7 @@ const FloatingTextInput = forwardRef<FloatingTextInputRef, FloatingTextInputProp
     label = '',
     labelTextStyle,
     multiline,
+    multilineInputHeight,
     onBlur,
     onFocus,
     onLayout,
@@ -199,21 +201,23 @@ const FloatingTextInput = forwardRef<FloatingTextInputRef, FloatingTextInputProp
         res.push(textInputStyle);
 
         if (multiline) {
-            res.push({height: 100, textAlignVertical: 'top'});
+            const height = multilineInputHeight || 100;
+            res.push({height, textAlignVertical: 'top'});
         }
 
         return res;
-    }, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, editable]);
+    }, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, multilineInputHeight, editable]);
 
     const combinedTextInputStyle = useMemo(() => {
         const res: StyleProp<TextStyle> = [styles.textInput, styles.input, textInputStyle];
 
         if (multiline) {
-            res.push({height: 80, textAlignVertical: 'top'});
+            const height = multilineInputHeight ? multilineInputHeight - 20 : 80;
+            res.push({height, textAlignVertical: 'top'});
         }
 
         return res;
-    }, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, editable]);
+    }, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, multilineInputHeight, editable]);
 
     const textAnimatedTextStyle = useAnimatedStyle(() => {
         const inputText = placeholder || value || props.defaultValue;
diff --git a/app/screens/settings/notification_auto_responder/notification_auto_responder.tsx b/app/screens/settings/notification_auto_responder/notification_auto_responder.tsx
index eda42012b..92fcf4038 100644
--- a/app/screens/settings/notification_auto_responder/notification_auto_responder.tsx
+++ b/app/screens/settings/notification_auto_responder/notification_auto_responder.tsx
@@ -117,6 +117,7 @@ const NotificationAutoResponder = ({currentUser, componentId}: NotificationAutoR
                     keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
                     label={intl.formatMessage(label)}
                     multiline={true}
+                    multilineInputHeight={154}
                     onChangeText={setAutoResponderMessage}
                     placeholder={intl.formatMessage(label)}
                     placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}