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,6 +83,7 @@ const NewMessageView = () => {
 
 	return (
 		<SafeAreaView testID='new-message-view'>
+			<KeyboardView>
 				<StatusBar />
 				<FlatList
 					data={search.length > 0 ? search : chats}
@@ -105,6 +107,7 @@ const NewMessageView = () => {
 					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'>,
+StackNavigationProp<ChatsStackParamList, 'RoomsListView'>,
-	CompositeNavigationProp<StackNavigationProp<ChatsStackParamList>, StackNavigationProp<DrawerParamList>>
+CompositeNavigationProp<StackNavigationProp<ChatsStackParamList>, StackNavigationProp<DrawerParamList>>
 >;
 
 interface IRoomsListViewProps {
@@ -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 }}>
+				<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,6 +328,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 		return (
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
 				<StatusBar />
+				<KeyboardView>
 					<View style={styles.searchContainer}>
 						<FormTextInput
 							autoFocus
@@ -339,6 +341,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 						<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,6 +517,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 
 		return (
 			<SafeAreaView testID='thread-messages-view'>
+				<KeyboardView>
 					<StatusBar />
 					{this.renderContent()}
 					{showFilterDropdown ? (
@@ -526,6 +528,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 							theme={theme}
 						/>
 					) : null}
+				</KeyboardView>
 			</SafeAreaView>
 		);
 	}