fix: scroll the pages New Message, Search for Rooms, Messages and Threads (#4952)

* [FIX] Scroll the pages Directory, New Message, Search for Rooms, Messages and Threads

* flex for the flatlist

* minor tweak at roomslistview and remove the keyboard from directoryview

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

app/containers/KeyboardView.tsx

@@ -6,7 +6,7 @@ import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
 interface IKeyboardViewProps extends KeyboardAwareScrollViewProps {
 	keyboardVerticalOffset?: number;
 	scrollEnabled?: boolean;
-	children: React.ReactElement[] | React.ReactElement;
+	children: React.ReactElement[] | React.ReactElement | null | (React.ReactElement | null)[];
 }
 
 const KeyboardView = ({ style, contentContainerStyle, scrollEnabled, keyboardVerticalOffset, children }: IKeyboardViewProps) => (

app/views/NewMessageView/index.tsx

@@ -5,6 +5,7 @@ import { FlatList } from 'react-native';
 import { shallowEqual } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 
+import KeyboardView from '../../containers/KeyboardView';
 import * as HeaderButton from '../../containers/HeaderButton';
 import * as List from '../../containers/List';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -82,29 +83,31 @@ const NewMessageView = () => {
 
 	return (
 		<SafeAreaView testID='new-message-view'>
-			<StatusBar />
-			<FlatList
-				data={search.length > 0 ? search : chats}
-				keyExtractor={item => item._id || item.rid}
-				ListHeaderComponent={<HeaderNewMessage maxUsers={maxUsers} onChangeText={handleSearch} />}
-				renderItem={({ item }) => {
-					const itemSearch = item as ISearch;
-					const itemModel = item as TSubscriptionModel;
+			<KeyboardView>
+				<StatusBar />
+				<FlatList
+					data={search.length > 0 ? search : chats}
+					keyExtractor={item => item._id || item.rid}
+					ListHeaderComponent={<HeaderNewMessage maxUsers={maxUsers} onChangeText={handleSearch} />}
+					renderItem={({ item }) => {
+						const itemSearch = item as ISearch;
+						const itemModel = item as TSubscriptionModel;
 
-					return (
-						<UserItem
-							name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
-							username={itemSearch.search ? itemSearch.username : itemModel.name}
-							onPress={() => goRoom(itemModel)}
-							testID={`new-message-view-item-${item.name}`}
-						/>
-					);
-				}}
-				ItemSeparatorComponent={List.Separator}
-				ListFooterComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
-				keyboardShouldPersistTaps='always'
-			/>
+						return (
+							<UserItem
+								name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
+								username={itemSearch.search ? itemSearch.username : itemModel.name}
+								onPress={() => goRoom(itemModel)}
+								testID={`new-message-view-item-${item.name}`}
+							/>
+						);
+					}}
+					ItemSeparatorComponent={List.Separator}
+					ListFooterComponent={List.Separator}
+					contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+					keyboardShouldPersistTaps='always'
+				/>
+			</KeyboardView>
 		</SafeAreaView>
 	);
 };

app/views/RoomsListView/index.tsx

@@ -11,6 +11,7 @@ import { Header } from '@react-navigation/elements';
 import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
 import { Dispatch } from 'redux';
 
+import KeyboardView from '../../containers/KeyboardView';
 import database from '../../lib/database';
 import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../containers/RoomItem';
 import log, { logEvent, events } from '../../lib/methods/helpers/log';
@@ -62,8 +63,8 @@ import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes } from
 import { Services } from '../../lib/services';
 
 type TNavigation = CompositeNavigationProp<
-	StackNavigationProp<ChatsStackParamList, 'RoomsListView'>,
-	CompositeNavigationProp<StackNavigationProp<ChatsStackParamList>, StackNavigationProp<DrawerParamList>>
+StackNavigationProp<ChatsStackParamList, 'RoomsListView'>,
+CompositeNavigationProp<StackNavigationProp<ChatsStackParamList>, StackNavigationProp<DrawerParamList>>
 >;
 
 interface IRoomsListViewProps {
@@ -479,11 +480,11 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 	internalSetState = (
 		state:
-			| ((
-					prevState: Readonly<IRoomsListViewState>,
-					props: Readonly<IRoomsListViewProps>
+		| ((
+			prevState: Readonly<IRoomsListViewState>,
+			props: Readonly<IRoomsListViewProps>
 			  ) => Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null)
-			| (Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null),
+		| (Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null),
 		callback?: () => void
 	) => {
 		if (this.animated) {
@@ -907,7 +908,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		}
 	};
 
-	getScrollRef = (ref: FlatList) => (this.scroll = ref);
+	getScrollRef = (ref: FlatList) => this.scroll = ref;
 
 	renderListHeader = () => {
 		const { searching } = this.state;
@@ -1025,9 +1026,11 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		return (
 			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<StatusBar />
-				{this.renderHeader()}
-				{this.renderScroll()}
+				<KeyboardView>
+					<StatusBar />
+					{this.renderHeader()}
+					{this.renderScroll()}
+				</KeyboardView>
 				{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
 				{/* @ts-ignore*/}
 				{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}

app/views/SearchMessagesView/index.tsx

@@ -39,6 +39,7 @@ import {
 	ICustomEmoji
 } from '../../definitions';
 import { Services } from '../../lib/services';
+import KeyboardView from '../../containers/KeyboardView';
 
 const QUERY_SIZE = 50;
 
@@ -327,18 +328,20 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 		return (
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
 				<StatusBar />
-				<View style={styles.searchContainer}>
-					<FormTextInput
-						autoFocus
-						label={I18n.t('Search')}
-						onChangeText={this.search}
-						placeholder={I18n.t('Search_Messages')}
-						testID='search-message-view-input'
-					/>
-					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
-					<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
-				</View>
-				{this.renderList()}
+				<KeyboardView>
+					<View style={styles.searchContainer}>
+						<FormTextInput
+							autoFocus
+							label={I18n.t('Search')}
+							onChangeText={this.search}
+							placeholder={I18n.t('Search_Messages')}
+							testID='search-message-view-input'
+						/>
+						<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
+						<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
+					</View>
+					{this.renderList()}
+				</KeyboardView>
 			</SafeAreaView>
 		);
 	}

app/views/ThreadMessagesView/index.tsx

@@ -35,6 +35,7 @@ import styles from './styles';
 import { IApplicationState, IBaseScreen, IMessage, SubscriptionType, TSubscriptionModel, TThreadModel } from '../../definitions';
 import { getUidDirectMessage, debounce, isIOS } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
+import KeyboardView from '../../containers/KeyboardView';
 
 const API_FETCH_COUNT = 50;
 
@@ -516,16 +517,18 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 
 		return (
 			<SafeAreaView testID='thread-messages-view'>
-				<StatusBar />
-				{this.renderContent()}
-				{showFilterDropdown ? (
-					<Dropdown
-						currentFilter={currentFilter}
-						onFilterSelected={this.onFilterSelected}
-						onClose={this.closeFilterDropdown}
-						theme={theme}
-					/>
-				) : null}
+				<KeyboardView>
+					<StatusBar />
+					{this.renderContent()}
+					{showFilterDropdown ? (
+						<Dropdown
+							currentFilter={currentFilter}
+							onFilterSelected={this.onFilterSelected}
+							onClose={this.closeFilterDropdown}
+							theme={theme}
+						/>
+					) : null}
+				</KeyboardView>
 			</SafeAreaView>
 		);
 	}