From 885ae2c29fbda921ccc87614cc384455f4c65479 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Thu, 27 Jul 2023 15:10:22 +0300
Subject: [PATCH] Fix keyboard overlap with recent search items in the search
 tab (#7465) (#7474)

* Fix keyboard overlap recent search item in search tab

* Set the behavior of KeyboardAvoidingView on Android to 'undefined' to avoid losing some content at the bottom

(cherry picked from commit 79994bf159c375c383fd21751940853f4132f5d6)

Co-authored-by: namanh-asher <namanhmhn@gmail.com>
---
 app/screens/home/search/search.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/screens/home/search/search.tsx b/app/screens/home/search/search.tsx
index a18515820..cfa0107b4 100644
--- a/app/screens/home/search/search.tsx
+++ b/app/screens/home/search/search.tsx
@@ -4,7 +4,7 @@
 import {useIsFocused, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {FlatList, type LayoutChangeEvent, Platform, StyleSheet, type ViewStyle} from 'react-native';
+import {FlatList, type LayoutChangeEvent, Platform, StyleSheet, type ViewStyle, KeyboardAvoidingView} from 'react-native';
 import HWKeyboardEvent from 'react-native-hw-keyboard-event';
 import Animated, {useAnimatedStyle, useDerivedValue, withTiming} from 'react-native-reanimated';
 import {type Edge, SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
@@ -363,10 +363,14 @@ const SearchScreen = ({teamId, teams}: Props) => {
                 onLayout={onLayout}
                 testID='search_messages.screen'
             >
-                <Animated.View style={animated}>
-                    <Animated.View style={headerTopStyle}>
-                        <RoundedHeaderContext/>
-                        {lastSearchedValue && !loading &&
+                <KeyboardAvoidingView
+                    style={styles.flex}
+                    behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                >
+                    <Animated.View style={animated}>
+                        <Animated.View style={headerTopStyle}>
+                            <RoundedHeaderContext/>
+                            {lastSearchedValue && !loading &&
                             <Header
                                 teamId={searchTeamId}
                                 setTeamId={handleResultsTeamChange}
@@ -376,9 +380,9 @@ const SearchScreen = ({teamId, teams}: Props) => {
                                 selectedFilter={filter}
                                 teams={teams}
                             />
-                        }
-                    </Animated.View>
-                    {!showResults &&
+                            }
+                        </Animated.View>
+                        {!showResults &&
                         <AnimatedFlatList
                             onLayout={onFlatLayout}
                             data={dummyData}
@@ -395,8 +399,8 @@ const SearchScreen = ({teamId, teams}: Props) => {
                             ref={scrollRef}
                             renderItem={renderInitialOrLoadingItem}
                         />
-                    }
-                    {showResults && !loading &&
+                        }
+                        {showResults && !loading &&
                         <Results
                             loading={resultsLoading}
                             selectedTab={selectedTab}
@@ -407,8 +411,9 @@ const SearchScreen = ({teamId, teams}: Props) => {
                             scrollPaddingTop={lockValue.value}
                             fileChannelIds={fileChannelIds}
                         />
-                    }
-                </Animated.View>
+                        }
+                    </Animated.View>
+                </KeyboardAvoidingView>
             </SafeAreaView>
             {searchIsFocused &&
             <Autocomplete