SafeAreaView

app/AppContainer.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { connect } from 'react-redux';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+
 import { defaultHeader, onNavigationStateChange } from './utils/navigation';
 import Navigation from './lib/Navigation';
 
@@ -29,46 +31,48 @@ const SetUsernameStack = () => (
 // App
 const Stack = createStackNavigator();
 const App = ({ root }) => {
-	if (!root) {
+	if (!root || root === 'background') {
 		return null;
 	}
 
 	return (
-		<NavigationContainer
-			ref={(navigatorRef) => {
-				Navigation.setTopLevelNavigator(navigatorRef);
-			}}
-			onNavigationStateChange={onNavigationStateChange}
-		>
-			<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
-				<>
-					{root === 'loading' ? (
-						<Stack.Screen
-							name='AuthLoading'
-							component={AuthLoadingView}
-						/>
-					) : null}
-					{root === 'outside' ? (
-						<Stack.Screen
-							name='OutsideStack'
-							component={OutsideStack}
-						/>
-					) : null}
-					{root === 'inside' ? (
-						<Stack.Screen
-							name='InsideStack'
-							component={InsideStack}
-						/>
-					) : null}
-					{root === 'setUsername' ? (
-						<Stack.Screen
-							name='SetUsernameStack'
-							component={SetUsernameStack}
-						/>
-					) : null}
-				</>
-			</Stack.Navigator>
-		</NavigationContainer>
+		<SafeAreaProvider initialMetrics={initialWindowMetrics}>
+			<NavigationContainer
+				ref={(navigatorRef) => {
+					Navigation.setTopLevelNavigator(navigatorRef);
+				}}
+				onNavigationStateChange={onNavigationStateChange}
+			>
+				<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
+					<>
+						{root === 'loading' ? (
+							<Stack.Screen
+								name='AuthLoading'
+								component={AuthLoadingView}
+							/>
+						) : null}
+						{root === 'outside' ? (
+							<Stack.Screen
+								name='OutsideStack'
+								component={OutsideStack}
+							/>
+						) : null}
+						{root === 'inside' ? (
+							<Stack.Screen
+								name='InsideStack'
+								component={InsideStack}
+							/>
+						) : null}
+						{root === 'setUsername' ? (
+							<Stack.Screen
+								name='SetUsernameStack'
+								component={SetUsernameStack}
+							/>
+						) : null}
+					</>
+				</Stack.Navigator>
+			</NavigationContainer>
+		</SafeAreaProvider>
 	);
 };
 const mapStateToProps = state => ({

app/containers/FormContainer.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ScrollView, StyleSheet, View, SafeAreaView } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
-// import { SafeAreaView } from 'react-navigation';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -10,6 +9,7 @@ import KeyboardView from '../presentation/KeyboardView';
 import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
+import SafeAreaView from './SafeAreaView';
 
 const styles = StyleSheet.create({
 	scrollView: {
@@ -31,7 +31,7 @@ const FormContainer = ({ children, theme, testID }) => (
 	>
 		<StatusBar theme={theme} />
 		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
-			<SafeAreaView style={sharedStyles.container} forceInset={{ top: 'never' }} testID={testID}>
+			<SafeAreaView testID={testID} theme={theme} style={{ backgroundColor: themes[theme].backgroundColor }}>
 				{children}
 				<AppVersion theme={theme} />
 			</SafeAreaView>

app/containers/MessageBox/Recording.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, SafeAreaView, PermissionsAndroid, Text
+	View, PermissionsAndroid, Text
 } from 'react-native';
 import { AudioRecorder, AudioUtils } from 'react-native-audio';
 import { BorderlessButton } from 'react-native-gesture-handler';
@@ -13,6 +13,7 @@ import I18n from '../../i18n';
 import { isIOS, isAndroid } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
+import SafeAreaView from '../SafeAreaView';
 
 export const _formatTime = function(seconds) {
 	let minutes = Math.floor(seconds / 60);
@@ -134,6 +135,7 @@ export default class extends React.PureComponent {
 		return (
 			<SafeAreaView
 				testID='messagebox-recording'
+				theme={theme}
 				style={[
 					styles.textBox,
 					{ borderTopColor: themes[theme].borderColor }

app/containers/ReactionsModal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-	View, Text, FlatList, StyleSheet, SafeAreaView
+	View, Text, FlatList, StyleSheet
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
@@ -12,6 +12,7 @@ import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
+import SafeAreaView from './SafeAreaView';
 
 const styles = StyleSheet.create({
 	titleContainer: {
@@ -95,7 +96,7 @@ const ModalContent = React.memo(({
 }) => {
 	if (message && message.reactions) {
 		return (
-			<SafeAreaView style={{ flex: 1 }}>
+			<SafeAreaView theme={props.theme}>
 				<Touchable onPress={onClose}>
 					<View style={styles.titleContainer}>
 						<CustomIcon

app/containers/SafeAreaView.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { SafeAreaView as SafeAreaContext } from 'react-native-safe-area-context';
+import { themes } from '../constants/colors';
+
+const styles = StyleSheet.create({
+	view: {
+		flex: 1,
+		paddingTop: 0,
+		paddingBottom: 0
+	}
+});
+
+const SafeAreaView = React.memo(({
+	style, children, testID, theme, ...props
+}) => (
+	<SafeAreaContext
+		style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+		testID={testID}
+		{...props}
+	>
+		{children}
+	</SafeAreaContext>
+));
+
+SafeAreaView.propTypes = {
+	testID: PropTypes.string,
+	theme: PropTypes.string,
+	style: PropTypes.object,
+	children: PropTypes.element
+};
+
+export default SafeAreaView;

app/views/AdminPanelView/index.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { WebView } from 'react-native-webview';
-import { SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
 import { DrawerButton } from '../../containers/HeaderButton';
-import styles from '../Styles';
 import { themedHeader } from '../../utils/navigation';
 import { withTheme } from '../../theme';
-import { themes } from '../../constants/colors';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class AdminPanelView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => ({
@@ -32,7 +30,7 @@ class AdminPanelView extends React.Component {
 			return null;
 		}
 		return (
-			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} testID='terms-view'>
+			<SafeAreaView theme={theme}>
 				<StatusBar theme={theme} />
 				<WebView
 					source={{ uri: `${ baseUrl }/admin/info?layout=embedded` }}

app/views/AutoTranslateView/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	FlatList, Switch, View, StyleSheet, SafeAreaView, ScrollView
+	FlatList, Switch, View, StyleSheet, ScrollView
 } from 'react-native';
-// import { SafeAreaView, ScrollView } from 'react-navigation';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
@@ -16,6 +15,7 @@ import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
 	contentContainerStyle: {
@@ -163,11 +163,7 @@ class AutoTranslateView extends React.Component {
 		const { languages } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-				testID='auto-translate-view'
-			>
+			<SafeAreaView testID='auto-translate-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<ScrollView
 					{...scrollPersistTaps}

app/views/CreateChannelView.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { connect, SafeAreaView } from 'react-redux';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
 	View, Text, Switch, ScrollView, StyleSheet, FlatList
 } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 
 import TextInput from '../presentation/TextInput';
@@ -23,6 +22,7 @@ import { withTheme } from '../theme';
 import { themedHeader } from '../utils/navigation';
 import { Review } from '../utils/review';
 import { getUserSelector } from '../selectors/login';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
 	container: {
@@ -294,7 +294,7 @@ class CreateChannelView extends React.Component {
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar theme={theme} />
-				<SafeAreaView testID='create-channel-view' style={styles.container} forceInset={{ vertical: 'never' }}>
+				<SafeAreaView testID='create-channel-view' theme={theme}>
 					<ScrollView {...scrollPersistTaps}>
 						<View style={[sharedStyles.separatorVertical, { borderColor: themes[theme].separatorColor }]}>
 							<TextInput

app/views/CreateDiscussionView/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { ScrollView, Text, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { ScrollView, Text } from 'react-native';
 import isEqual from 'lodash/isEqual';
 
 import Loading from '../../containers/Loading';
@@ -25,6 +24,7 @@ import SelectChannel from './SelectChannel';
 import SelectUsers from './SelectUsers';
 
 import styles from './styles';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class CreateChannelView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -137,7 +137,7 @@ class CreateChannelView extends React.Component {
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar theme={theme} />
-				<SafeAreaView testID='create-discussion-view' style={styles.container} forceInset={{ vertical: 'never' }}>
+				<SafeAreaView testID='create-discussion-view' style={styles.container} theme={theme}>
 					<ScrollView {...scrollPersistTaps}>
 						<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Discussion_Desc')}</Text>
 						<SelectChannel

app/views/DefaultBrowserView.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	StyleSheet, FlatList, View, Text, Linking, SafeAreaView
+	StyleSheet, FlatList, View, Text, Linking
 } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
 import RNUserDefaults from 'rn-user-defaults';
 
 import I18n from '../i18n';
@@ -17,6 +16,7 @@ import ListItem from '../containers/ListItem';
 import { CustomIcon } from '../lib/Icons';
 import { DEFAULT_BROWSER_KEY } from '../utils/openLink';
 import { isIOS } from '../utils/deviceInfo';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const DEFAULT_BROWSERS = [
 	{
@@ -164,11 +164,7 @@ class DefaultBrowserView extends React.Component {
 		const { supported } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-				testID='default-browser-view'
-			>
+			<SafeAreaView testID='default-browser-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={DEFAULT_BROWSERS.concat(supported)}

app/views/DirectoryView/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, FlatList, Text, SafeAreaView
+	View, FlatList, Text
 } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 
 import Touch from '../../utils/touch';
 import RocketChat from '../../lib/rocketchat';
@@ -24,6 +23,7 @@ import { themes } from '../../constants/colors';
 import styles from './styles';
 import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class DirectoryView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -230,7 +230,7 @@ class DirectoryView extends React.Component {
 		} = this.state;
 		const { isFederationEnabled, theme } = this.props;
 		return (
-			<SafeAreaView style={[styles.safeAreaView, { backgroundColor: themes[theme].backgroundColor }]} testID='directory-view' forceInset={{ vertical: 'never' }}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={data}

app/views/DirectoryView/styles.js

@@ -3,9 +3,6 @@ import { StyleSheet } from 'react-native';
 import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
-	safeAreaView: {
-		flex: 1
-	},
 	list: {
 		flex: 1
 	},

app/views/InviteUsersEditView/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ScrollView, View, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { ScrollView, View } from 'react-native';
 import { connect } from 'react-redux';
 import RNPickerSelect from 'react-native-picker-select';
 
@@ -19,6 +18,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import Separator from '../../containers/Separator';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const OPTIONS = {
 	days: [{
@@ -111,7 +111,7 @@ class InviteUsersView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} forceInset={{ vertical: 'never' }}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} theme={theme}>
 				<ScrollView
 					{...scrollPersistTaps}
 					style={{ backgroundColor: themes[theme].auxiliaryBackground }}

app/views/InviteUsersEditView/styles.js

@@ -3,9 +3,6 @@ import { StyleSheet } from 'react-native';
 import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
-	container: {
-		flex: 1
-	},
 	innerContainer: {
 		paddingHorizontal: 20
 	},

app/views/LanguageView/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, SafeAreaView } from 'react-native';
+import { FlatList } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
@@ -20,6 +19,7 @@ import { themedHeader } from '../../utils/navigation';
 import { appStart as appStartAction } from '../../actions';
 import { getUserSelector } from '../../selectors/login';
 import database from '../../lib/database';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const LANGUAGES = [
 	{
@@ -175,11 +175,7 @@ class LanguageView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-				testID='language-view'
-			>
+			<SafeAreaView testID='language-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={LANGUAGES}

app/views/LegalView.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, ScrollView, View, StyleSheet, SafeAreaView
+	Text, ScrollView, View, StyleSheet
 } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
 import { connect } from 'react-redux';
 
 import Touch from '../utils/touch';
@@ -15,12 +14,9 @@ import StatusBar from '../containers/StatusBar';
 import { themes } from '../constants/colors';
 import openLink from '../utils/openLink';
 import { withTheme } from '../theme';
-import { themedHeader } from '../utils/navigation';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1
-	},
 	scroll: {
 		marginTop: 35,
 		borderTopWidth: StyleSheet.hairlineWidth,
@@ -83,14 +79,7 @@ class LegalView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[
-					styles.container,
-					{ backgroundColor: themes[theme].auxiliaryBackground }
-				]}
-				forceInset={{ vertical: 'never' }}
-				testID='legal-view'
-			>
+			<SafeAreaView testID='legal-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<ScrollView
 					contentContainerStyle={[

app/views/LivechatEditView.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Text, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { Text, StyleSheet, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
 import { withTheme } from '../theme';
@@ -18,6 +17,7 @@ import scrollPersistTaps from '../utils/scrollPersistTaps';
 import { getUserSelector } from '../selectors/login';
 import Chips from '../containers/UIKit/MultiSelect/Chips';
 import Button from '../containers/Button';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
 	container: {
@@ -149,7 +149,7 @@ const LivechatEditView = ({ user, navigation, theme }) => {
 			keyboardVerticalOffset={128}
 		>
 			<ScrollView {...scrollPersistTaps}>
-				<SafeAreaView style={[sharedStyles.container, styles.container]} forceInset={{ vertical: 'never' }}>
+				<SafeAreaView style={styles.container} theme={theme}>
 					<Title
 						title={visitor?.username}
 						theme={theme}

app/views/MessagesView/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text, SafeAreaView } from 'react-native';
+import { FlatList, View, Text } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import ActionSheet from 'react-native-action-sheet';
 
@@ -18,6 +17,7 @@ import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
 import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const ACTION_INDEX = 0;
 const CANCEL_INDEX = 1;
@@ -295,12 +295,9 @@ class MessagesView extends React.Component {
 
 		return (
 			<SafeAreaView
-				style={[
-					styles.list,
-					{ backgroundColor: themes[theme].backgroundColor }
-				]}
-				forceInset={{ vertical: 'never' }}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
 				testID={this.content.testID}
+				theme={theme}
 			>
 				<StatusBar theme={theme} />
 				<FlatList

app/views/NewMessageView.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import {
 	View, StyleSheet, FlatList, Text
 } from 'react-native';
-import { connect, SafeAreaView } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
+import { connect } from 'react-redux';
 import equal from 'deep-equal';
 import { orderBy } from 'lodash';
 import { Q } from '@nozbe/watermelondb';
@@ -27,11 +26,9 @@ import { getUserSelector } from '../selectors/login';
 import Navigation from '../lib/Navigation';
 import { createChannelRequest } from '../actions/createChannel';
 import { goRoom } from '../utils/goRoom';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
-	safeAreaView: {
-		flex: 1
-	},
 	separator: {
 		marginLeft: 60
 	},
@@ -256,11 +253,7 @@ class NewMessageView extends React.Component {
 	render = () => {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[styles.safeAreaView, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-				testID='new-message-view'
-			>
+			<SafeAreaView testID='new-message-view' theme={theme}>
 				<StatusBar theme={theme} />
 				{this.renderList()}
 			</SafeAreaView>

app/views/NotificationPreferencesView/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import {
-	View, ScrollView, Switch, Text, SafeAreaView
+	View, ScrollView, Switch, Text
 } from 'react-native';
 import PropTypes from 'prop-types';
-// import { SafeAreaView } from 'react-navigation';
 
 import database from '../../lib/database';
 import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
@@ -13,11 +12,11 @@ import Separator from '../../containers/Separator';
 import I18n from '../../i18n';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import styles from './styles';
-import sharedStyles from '../Styles';
 import RocketChat from '../../lib/rocketchat';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const SectionTitle = React.memo(({ title, theme }) => (
 	<Text
@@ -245,7 +244,7 @@ class NotificationPreferencesView extends React.Component {
 		const { room } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={sharedStyles.container} testID='notification-preference-view' forceInset={{ vertical: 'never' }}>
+			<SafeAreaView testID='notification-preference-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<ScrollView
 					{...scrollPersistTaps}

app/views/ProfileView/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, ScrollView, Keyboard, SafeAreaView } from 'react-native';
+import { View, ScrollView, Keyboard } from 'react-native';
 import { connect } from 'react-redux';
 import prompt from 'react-native-prompt-android';
 import SHA256 from 'js-sha256';
 import ImagePicker from 'react-native-image-crop-picker';
 import RNPickerSelect from 'react-native-picker-select';
-// import { SafeAreaView } from 'react-navigation';
 // import { HeaderBackButton } from 'react-navigation-stack';
 import equal from 'deep-equal';
 
@@ -32,6 +31,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class ProfileView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => ({
@@ -440,7 +440,7 @@ class ProfileView extends React.Component {
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar theme={theme} />
-				<SafeAreaView style={sharedStyles.container} testID='profile-view' forceInset={{ vertical: 'never' }}>
+				<SafeAreaView testID='profile-view' theme={theme}>
 					<ScrollView
 						contentContainerStyle={sharedStyles.containerScrollView}
 						testID='profile-view-list'

app/views/ReadReceiptView/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { FlatList, View, Text } from 'react-native';
 import equal from 'deep-equal';
 import moment from 'moment';
 import { connect } from 'react-redux';
@@ -16,6 +15,7 @@ import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class ReadReceiptView extends React.Component {
 	static navigationOptions = ({ screenProps }) => ({
@@ -135,11 +135,7 @@ class ReadReceiptView extends React.Component {
 		}
 
 		return (
-			<SafeAreaView
-				style={[styles.container, { backgroundColor: themes[theme].chatComponentBackground }]}
-				forceInset={{ bottom: 'always' }}
-				testID='read-receipt-view'
-			>
+			<SafeAreaView testID='read-receipt-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<View>
 					{loading

app/views/ReadReceiptView/styles.js

@@ -28,9 +28,6 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		padding: 10
 	},
-	container: {
-		flex: 1
-	},
 	list: {
 		...sharedStyles.separatorVertical,
 		marginVertical: 10

app/views/RoomActionsView/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, SectionList, Text, Alert, Share, SafeAreaView
+	View, SectionList, Text, Alert, Share
 } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import _ from 'lodash';
 
 import Touch from '../../utils/touch';
@@ -29,6 +28,7 @@ import { CloseModalButton } from '../../containers/HeaderButton';
 import { getUserSelector } from '../../selectors/login';
 import Markdown from '../../containers/markdown';
 import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class RoomActionsView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -647,7 +647,7 @@ class RoomActionsView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={styles.container} testID='room-actions-view' forceInset={{ vertical: 'never' }}>
+			<SafeAreaView testID='room-actions-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<SectionList
 					contentContainerStyle={[styles.contentContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}

app/views/RoomInfoEditView/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, View, ScrollView, TouchableOpacity, Keyboard, Alert, SafeAreaView
+	Text, View, ScrollView, TouchableOpacity, Keyboard, Alert
 } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import isEqual from 'lodash/isEqual';
@@ -32,6 +31,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { MultiSelect } from '../../containers/UIKit/MultiSelect';
 import { MessageTypeValues } from '../../utils/messageTypes';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const PERMISSION_SET_READONLY = 'set-readonly';
 const PERMISSION_SET_REACT_WHEN_READONLY = 'set-react-when-readonly';
@@ -354,7 +354,7 @@ class RoomInfoEditView extends React.Component {
 					testID='room-info-edit-view-list'
 					{...scrollPersistTaps}
 				>
-					<SafeAreaView style={sharedStyles.container} testID='room-info-edit-view' forceInset={{ vertical: 'never' }}>
+					<SafeAreaView testID='room-info-edit-view' theme={theme}>
 						<RCTextInput
 							inputRef={(e) => { this.name = e; }}
 							label={I18n.t('Name')}

app/views/RoomMembersView/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, SafeAreaView } from 'react-native';
+import { FlatList, View } from 'react-native';
 import ActionSheet from 'react-native-action-sheet';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import * as Haptics from 'expo-haptics';
 import { Q } from '@nozbe/watermelondb';
 
@@ -25,6 +24,7 @@ import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const PAGE_SIZE = 25;
 
@@ -261,7 +261,7 @@ class RoomMembersView extends React.Component {
 		} = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={styles.list} testID='room-members-view' forceInset={{ vertical: 'never' }}>
+			<SafeAreaView testID='room-members-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={filtering ? membersFiltered : members}

app/views/RoomView/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, InteractionManager, SafeAreaView } from 'react-native';
+import { Text, View, InteractionManager } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import moment from 'moment';
@@ -39,7 +38,6 @@ import { isReadOnly } from '../../utils/isReadOnly';
 import { isIOS, isTablet } from '../../utils/deviceInfo';
 import { showErrorAlert } from '../../utils/info';
 import { withTheme } from '../../theme';
-import { themedHeader } from '../../utils/navigation';
 import {
 	KEY_COMMAND,
 	handleCommandScroll,
@@ -54,6 +52,7 @@ import { getUserSelector } from '../../selectors/login';
 import { CONTAINER_TYPES } from '../../lib/methods/actions';
 import Banner from './Banner';
 import Navigation from '../../lib/Navigation';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const stateAttrsUpdate = [
 	'joined',
@@ -953,12 +952,9 @@ class RoomView extends React.Component {
 
 		return (
 			<SafeAreaView
-				style={[
-					styles.container,
-					{ backgroundColor: themes[theme].backgroundColor }
-				]}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
 				testID='room-view'
-				forceInset={{ vertical: 'never' }}
+				theme={theme}
 			>
 				<StatusBar theme={theme} />
 				<Banner

app/views/RoomsListView/index.js

@@ -7,12 +7,10 @@ import {
 	Text,
 	Keyboard,
 	Dimensions,
-	RefreshControl,
-	SafeAreaView
+	RefreshControl
 } from 'react-native';
 import { connect } from 'react-redux';
 import { isEqual, orderBy } from 'lodash';
-// import { SafeAreaView } from 'react-navigation';
 import Orientation from 'react-native-orientation-locker';
 import { Q } from '@nozbe/watermelondb';
 
@@ -47,7 +45,6 @@ import { selectServerRequest as selectServerRequestAction } from '../../actions/
 import { animateNextTransition } from '../../utils/layoutAnimation';
 import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
-import { themedHeader } from '../../utils/navigation';
 import EventEmitter from '../../utils/events';
 import {
 	KEY_COMMAND,
@@ -63,6 +60,7 @@ import { MAX_SIDEBAR_WIDTH } from '../../constants/tablet';
 import { withSplit } from '../../split';
 import { getUserSelector } from '../../selectors/login';
 import { goRoom } from '../../utils/goRoom';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const SCROLL_OFFSET = 56;
 const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
@@ -161,14 +159,7 @@ class RoomsListView extends React.Component {
 			EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}
 		Dimensions.addEventListener('change', this.onDimensionsChange);
-		this.willFocusListener = navigation.addListener('willFocus', () => {
-			// Check if there were changes while not focused (it's set on sCU)
-			if (this.shouldUpdate) {
-				this.forceUpdate();
-				this.shouldUpdate = false;
-			}
-		});
-		this.didFocusListener = navigation.addListener('didFocus', () => {
+		this.unsubscribeFocus = navigation.addListener('focus', () => {
 			Orientation.unlockAllOrientations();
 			this.animated = true;
 			// Check if there were changes while not focused (it's set on sCU)
@@ -178,7 +169,7 @@ class RoomsListView extends React.Component {
 			}
 			this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
 		});
-		this.willBlurListener = navigation.addListener('willBlur', () => {
+		this.unsubscribeBlur = navigation.addListener('blur', () => {
 			this.animated = false;
 			closeServerDropdown();
 			if (this.backHandler && this.backHandler.remove) {
@@ -286,14 +277,11 @@ class RoomsListView extends React.Component {
 		if (this.querySubscription && this.querySubscription.unsubscribe) {
 			this.querySubscription.unsubscribe();
 		}
-		if (this.willFocusListener && this.willFocusListener.remove) {
-			this.willFocusListener.remove();
+		if (this.unsubscribeFocus) {
+			this.unsubscribeFocus();
 		}
-		if (this.didFocusListener && this.didFocusListener.remove) {
-			this.didFocusListener.remove();
-		}
-		if (this.willBlurListener && this.willBlurListener.remove) {
-			this.willBlurListener.remove();
+		if (this.unsubscribeBlur) {
+			this.unsubscribeBlur();
 		}
 		if (isTablet) {
 			EventEmitter.removeListener(KEY_COMMAND, this.handleCommands);
@@ -801,11 +789,7 @@ class RoomsListView extends React.Component {
 		} = this.props;
 
 		return (
-			<SafeAreaView
-				style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}
-				testID='rooms-list-view'
-				forceInset={{ vertical: 'never' }}
-			>
+			<SafeAreaView testID='rooms-list-view' theme={theme} style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<StatusBar theme={theme} />
 				{this.renderScroll()}
 				{showSortDropdown ? (

app/views/ScreenLockConfigView.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, Switch, ScrollView, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { StyleSheet, Switch, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
 import I18n from '../i18n';
 import { themedHeader } from '../utils/navigation';
 import { withTheme } from '../theme';
 import { themes, SWITCH_TRACK_COLOR } from '../constants/colors';
-import sharedStyles from './Styles';
 import StatusBar from '../containers/StatusBar';
 import Separator from '../containers/Separator';
 import ListItem from '../containers/ListItem';
@@ -18,6 +16,7 @@ import database from '../lib/database';
 import { supportedBiometryLabel, changePasscode, checkHasPasscode } from '../utils/localAuthentication';
 import { DisclosureImage } from '../containers/DisclosureIndicator';
 import { DEFAULT_AUTO_LOCK } from '../constants/localAuthentication';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
 	listPadding: {
@@ -246,10 +245,7 @@ class ScreenLockConfigView extends React.Component {
 		const { autoLock } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-			>
+			<SafeAreaView theme={theme}>
 				<StatusBar theme={theme} />
 				<ScrollView
 					keyExtractor={item => item.value}

app/views/SearchMessagesView/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, FlatList, Text, SafeAreaView } from 'react-native';
+import { View, FlatList, Text } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 
 import RCTextInput from '../../containers/TextInput';
@@ -20,6 +19,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 class SearchMessagesView extends React.Component {
 	static navigationOptions = ({ screenProps }) => ({
@@ -152,7 +152,7 @@ class SearchMessagesView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} testID='search-messages-view' forceInset={{ vertical: 'never' }}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<View style={styles.searchContainer}>
 					<RCTextInput

app/views/SearchMessagesView/styles.js

@@ -3,9 +3,6 @@ import { StyleSheet } from 'react-native';
 import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
-	container: {
-		flex: 1
-	},
 	searchContainer: {
 		padding: 20,
 		paddingBottom: 0

app/views/SelectServerView.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import {
-	FlatList, StyleSheet, View, SafeAreaView
+	FlatList, StyleSheet, View
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
@@ -15,14 +14,12 @@ import sharedStyles from './Styles';
 import RocketChat from '../lib/rocketchat';
 import { withTheme } from '../theme';
 import { themedHeader } from '../utils/navigation';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = item => item.id;
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1
-	},
 	list: {
 		marginVertical: 32,
 		...sharedStyles.separatorVertical
@@ -88,10 +85,7 @@ class SelectServerView extends React.Component {
 		const { servers } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-			>
+			<SafeAreaView theme={theme}>
 				<StatusBar theme={theme} />
 				<View style={[styles.list, { borderColor: themes[theme].separatorColor }]}>
 					<FlatList

app/views/SelectedUsersView.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, FlatList, SafeAreaView } from 'react-native';
+import { View, StyleSheet, FlatList } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
 import { orderBy } from 'lodash';
 import { Q } from '@nozbe/watermelondb';
@@ -28,11 +27,9 @@ import {
 	removeUser as removeUserAction
 } from '../actions/selectedUsers';
 import { showErrorAlert } from '../utils/info';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
-	safeAreaView: {
-		flex: 1
-	},
 	separator: {
 		marginLeft: 60
 	}
@@ -313,11 +310,7 @@ class SelectedUsersView extends React.Component {
 	render = () => {
 		const { loading, theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[styles.safeAreaView, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-				testID='select-users-view'
-			>
+			<SafeAreaView testID='select-users-view' theme={theme}>
 				<StatusBar theme={theme} />
 				{this.renderList()}
 				<Loading visible={loading} />

app/views/SetUsernameView.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, ScrollView, StyleSheet, SafeAreaView
+	Text, ScrollView, StyleSheet
 } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import Orientation from 'react-native-orientation-locker';
 
 import { loginRequest as loginRequestAction } from '../actions/login';
@@ -22,6 +21,7 @@ import { themes } from '../constants/colors';
 import { isTablet } from '../utils/deviceInfo';
 import { getUserSelector } from '../selectors/login';
 import { showErrorAlert } from '../utils/info';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const styles = StyleSheet.create({
 	loginTitle: {
@@ -111,7 +111,7 @@ class SetUsernameView extends React.Component {
 			>
 				<StatusBar theme={theme} />
 				<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
-					<SafeAreaView style={sharedStyles.container} testID='set-username-view' forceInset={{ vertical: 'never' }}>
+					<SafeAreaView testID='set-username-view' theme={theme}>
 						<Text
 							style={[
 								sharedStyles.loginTitle,

app/views/SettingsView/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import {
-	View, Linking, ScrollView, Switch, Share, Clipboard, SafeAreaView
+	View, Linking, ScrollView, Switch, Share, Clipboard
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import AsyncStorage from '@react-native-community/async-storage';
 
 import { logout as logoutAction } from '../../actions/login';
@@ -26,7 +25,6 @@ import openLink from '../../utils/openLink';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import { showErrorAlert, showConfirmationAlert } from '../../utils/info';
 import styles from './styles';
-import sharedStyles from '../Styles';
 import { loggerConfig, analytics } from '../../utils/log';
 import { PLAY_MARKET_LINK, APP_STORE_LINK, LICENSE_LINK } from '../../constants/links';
 import { withTheme } from '../../theme';
@@ -39,6 +37,7 @@ import EventEmitter from '../../utils/events';
 import { appStart as appStartAction } from '../../actions';
 import { onReviewPress } from '../../utils/review';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const SectionSeparator = React.memo(({ theme }) => (
 	<View
@@ -183,11 +182,7 @@ class SettingsView extends React.Component {
 	render() {
 		const { server, split, theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				testID='settings-view'
-				forceInset={{ vertical: 'never' }}
-			>
+			<SafeAreaView testID='settings-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<ScrollView
 					{...scrollPersistTaps}

app/views/ShareListView/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, Text, FlatList, Keyboard, BackHandler, SafeAreaView
+	View, Text, FlatList, Keyboard, BackHandler
 } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
 import ShareExtension from 'rn-extensions-share';
 import { connect } from 'react-redux';
 import RNFetchBlob from 'rn-fetch-blob';
@@ -30,6 +29,7 @@ import { themes } from '../../constants/colors';
 import { animateNextTransition } from '../../utils/layoutAnimation';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const LIMIT = 50;
 const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
@@ -452,7 +452,7 @@ class ShareListView extends React.Component {
 		const { showError } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]} forceInset={{ vertical: 'never' }}>
+			<SafeAreaView theme={theme}>
 				<StatusBar theme={theme} />
 				{ showError ? this.renderError() : this.renderContent() }
 			</SafeAreaView>

app/views/SidebarView/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-	ScrollView, Text, View, SafeAreaView
+	ScrollView, Text, View
 } from 'react-native';
 import { connect } from 'react-redux';
 import { Q } from '@nozbe/watermelondb';
@@ -20,6 +20,7 @@ import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
 import { getUserSelector } from '../../selectors/login';
 import Navigation from '../../lib/Navigation';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const Separator = React.memo(({ theme }) => <View style={[styles.separator, { borderColor: themes[theme].separatorColor }]} />);
 Separator.propTypes = {
@@ -199,7 +200,7 @@ class Sidebar extends Component {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} theme={theme}>
 				<ScrollView
 					style={[
 						styles.container,

app/views/StatusView.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, StyleSheet, SafeAreaView } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
+import { FlatList, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 
 import I18n from '../i18n';
@@ -23,6 +22,7 @@ import { getUserSelector } from '../selectors/login';
 import { CustomHeaderButtons, Item, CancelModalButton } from '../containers/HeaderButton';
 import store from '../lib/createStore';
 import { setUser } from '../actions/login';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const STATUS = [{
 	id: 'online',
@@ -39,9 +39,6 @@ const STATUS = [{
 }];
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1
-	},
 	status: {
 		marginRight: 16
 	},
@@ -196,14 +193,7 @@ class StatusView extends React.Component {
 		const { loading } = this.state;
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[
-					styles.container,
-					{ backgroundColor: themes[theme].auxiliaryBackground }
-				]}
-				forceInset={{ vertical: 'never' }}
-				testID='status-view'
-			>
+			<SafeAreaView testID='status-view' theme={theme}>
 				<FlatList
 					data={STATUS}
 					keyExtractor={item => item.id}

app/views/ThemeView.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	FlatList, Text, View, StyleSheet, SafeAreaView
+	FlatList, Text, View, StyleSheet
 } from 'react-native';
-// import { SafeAreaView } from 'react-navigation';
 import RNUserDefaults from 'rn-user-defaults';
 
 import I18n from '../i18n';
@@ -17,6 +16,7 @@ import ListItem from '../containers/ListItem';
 import { CustomIcon } from '../lib/Icons';
 import { THEME_PREFERENCES_KEY } from '../lib/rocketchat';
 import { supportSystemTheme } from '../utils/deviceInfo';
+import SafeAreaView from '../containers/SafeAreaView';
 
 const THEME_GROUP = 'THEME_GROUP';
 const DARK_GROUP = 'DARK_GROUP';
@@ -167,11 +167,7 @@ class ThemeView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
-				style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				forceInset={{ vertical: 'never' }}
-				testID='theme-view'
-			>
+			<SafeAreaView testID='theme-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={THEMES}

app/views/ThreadMessagesView/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	FlatList, View, Text, InteractionManager, SafeAreaView
+	FlatList, View, Text, InteractionManager
 } from 'react-native';
 import { connect } from 'react-redux';
-// import { SafeAreaView } from 'react-navigation';
 import moment from 'moment';
 import orderBy from 'lodash/orderBy';
 import { Q } from '@nozbe/watermelondb';
@@ -26,6 +25,7 @@ import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import ModalNavigation from '../../lib/ModalNavigation';
 import { getUserSelector } from '../../selectors/login';
+import SafeAreaView from '../../containers/SafeAreaView';
 
 const Separator = React.memo(({ theme }) => <View style={[styles.separator, { backgroundColor: themes[theme].separatorColor }]} />);
 Separator.propTypes = {
@@ -331,7 +331,7 @@ class ThreadMessagesView extends React.Component {
 		}
 
 		return (
-			<SafeAreaView style={styles.list} testID='thread-messages-view' forceInset={{ vertical: 'never' }}>
+			<SafeAreaView testID='thread-messages-view' theme={theme}>
 				<StatusBar theme={theme} />
 				<FlatList
 					data={messages}