flex for the flatlist

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/DirectoryView/index.tsx

@@ -27,6 +27,7 @@ import { IApplicationState, IServerRoom, IUser, SubscriptionType } from '../../d
 import styles from './styles';
 import Options from './Options';
 import { Services } from '../../lib/services';
+import KeyboardView from '../../containers/KeyboardView';
 
 interface IDirectoryViewProps {
 	navigation: CompositeNavigationProp<
@@ -290,6 +291,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		const { isFederationEnabled, theme } = this.props;
 		return (
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
+				<KeyboardView>
 					<StatusBar />
 					<FlatList
 						data={data}
@@ -315,6 +317,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 							isFederationEnabled={isFederationEnabled}
 						/>
 					) : null}
+				</KeyboardView>
 			</SafeAreaView>
 		);
 	};

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';
@@ -1025,12 +1026,14 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		return (
 			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+				<KeyboardView>
 					<StatusBar />
 					{this.renderHeader()}
 					{this.renderScroll()}
 					{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
 					{/* @ts-ignore*/}
 					{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}
+				</KeyboardView>
 			</SafeAreaView>
 		);
 	};

app/views/RoomsListView/styles.ts

@@ -7,7 +7,8 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	list: {
-		width: '100%'
+		width: '100%',
+		flex: 1
 	},
 	dropdownContainerHeader: {
 		height: 41,

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>
 		);
 	}