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,31 +291,33 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		const { isFederationEnabled, theme } = this.props;
 		return (
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
-				<StatusBar />
-				<FlatList
-					data={data}
-					style={styles.list}
-					contentContainerStyle={styles.listContainer}
-					extraData={this.state}
-					keyExtractor={item => item._id}
-					ListHeaderComponent={this.renderHeader}
-					renderItem={this.renderItem}
-					ItemSeparatorComponent={List.Separator}
-					keyboardShouldPersistTaps='always'
-					ListFooterComponent={loading ? <ActivityIndicator /> : null}
-					onEndReached={() => this.load({})}
-				/>
-				{showOptionsDropdown ? (
-					<Options
-						theme={theme}
-						type={type}
-						globalUsers={globalUsers}
-						close={this.toggleDropdown}
-						changeType={this.changeType}
-						toggleWorkspace={this.toggleWorkspace}
-						isFederationEnabled={isFederationEnabled}
+				<KeyboardView>
+					<StatusBar />
+					<FlatList
+						data={data}
+						style={styles.list}
+						contentContainerStyle={styles.listContainer}
+						extraData={this.state}
+						keyExtractor={item => item._id}
+						ListHeaderComponent={this.renderHeader}
+						renderItem={this.renderItem}
+						ItemSeparatorComponent={List.Separator}
+						keyboardShouldPersistTaps='always'
+						ListFooterComponent={loading ? <ActivityIndicator /> : null}
+						onEndReached={() => this.load({})}
 					/>
-				) : null}
+					{showOptionsDropdown ? (
+						<Options
+							theme={theme}
+							type={type}
+							globalUsers={globalUsers}
+							close={this.toggleDropdown}
+							changeType={this.changeType}
+							toggleWorkspace={this.toggleWorkspace}
+							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,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';
@@ -1025,12 +1026,14 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		return (
 			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<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>
+					<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,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>
 		);
 	}