[CHORE] Update react-native-safe-area-view

app/containers/FileModal.js

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import {
-	View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet, SafeAreaView
+	View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import ImageViewer from 'react-native-image-zoom-viewer';
+import SafeAreaView from 'react-native-safe-area-view';
 import { Video } from 'expo-av';
 
 import sharedStyles from '../views/Styles';

app/containers/MessageBox/Recording.js

@@ -1,10 +1,11 @@
 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';
+import SafeAreaView from 'react-native-safe-area-view';
 import FileSystem from 'expo-file-system';
 
 import styles from './styles';

app/containers/ReactionsModal.js

@@ -1,10 +1,11 @@
 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';
 import Touchable from 'react-native-platform-touchable';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import Emoji from './message/Emoji';
 import I18n from '../i18n';

app/index.js

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import { useScreens } from 'react-native-screens'; // eslint-disable-line import/no-unresolved
 import { Linking } from 'react-native';
 import PropTypes from 'prop-types';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { appInit } from './actions';
 import { deepLinkingOpen } from './actions/deepLinking';
@@ -314,12 +315,14 @@ export default class Root extends React.Component {
 		return (
 			<Provider store={store}>
 				<LayoutAnimation>
-					<App
-						ref={(navigatorRef) => {
-							Navigation.setTopLevelNavigator(navigatorRef);
-						}}
-						onNavigationStateChange={onNavigationStateChange}
-					/>
+					<SafeAreaProvider>
+						<App
+							ref={(navigatorRef) => {
+								Navigation.setTopLevelNavigator(navigatorRef);
+							}}
+							onNavigationStateChange={onNavigationStateChange}
+						/>
+					</SafeAreaProvider>
 				</LayoutAnimation>
 			</Provider>
 		);

app/share.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { View } from 'react-native';
 import { createAppContainer, createSwitchNavigator } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { Provider } from 'react-redux';
 import RNUserDefaults from 'rn-user-defaults';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import Navigation from './lib/ShareNavigation';
 import store from './lib/createStore';
-import sharedStyles from './views/Styles';
-import { isNotch, isIOS } from './utils/deviceInfo';
+import { isIOS } from './utils/deviceInfo';
 import { defaultHeader, onNavigationStateChange } from './utils/navigation';
 import RocketChat from './lib/rocketchat';
 import LayoutAnimation from './utils/layoutAnimation';
@@ -51,9 +50,6 @@ const AppContainer = createAppContainer(createSwitchNavigator({
 class Root extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {
-			isLandscape: false
-		};
 		this.init();
 	}
 
@@ -72,18 +68,9 @@ class Root extends React.Component {
 		}
 	}
 
-	handleLayout = (event) => {
-		const { width, height } = event.nativeEvent.layout;
-		this.setState({ isLandscape: width > height });
-	}
-
 	render() {
-		const { isLandscape } = this.state;
 		return (
-			<View
-				style={[sharedStyles.container, isLandscape && isNotch ? sharedStyles.notchLandscapeContainer : {}]}
-				onLayout={this.handleLayout}
-			>
+			<SafeAreaProvider>
 				<Provider store={store}>
 					<LayoutAnimation>
 						<AppContainer
@@ -94,7 +81,7 @@ class Root extends React.Component {
 						/>
 					</LayoutAnimation>
 				</Provider>
-			</View>
+			</SafeAreaProvider>
 		);
 	}
 }

app/views/AdminPanelView/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { WebView } from 'react-native-webview';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import { connect } from 'react-redux';
 
 import I18n from '../../i18n';

app/views/AutoTranslateView/index.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import {
 	FlatList, Switch, View, StyleSheet
 } from 'react-native';
-import { SafeAreaView, ScrollView } from 'react-navigation';
+import { ScrollView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';

app/views/CreateChannelView.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {
 	View, Text, Switch, ScrollView, TextInput, StyleSheet, FlatList
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
 import Loading from '../containers/Loading';

app/views/DirectoryView/index.js

@@ -4,7 +4,7 @@ import {
 	View, FlatList, Text
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import RocketChat from '../../lib/rocketchat';
 import DirectoryItem from '../../presentation/DirectoryItem';

app/views/ForgotPasswordView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import PropTypes from 'prop-types';
 
 import KeyboardView from '../presentation/KeyboardView';

app/views/LanguageView/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FlatList } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView, NavigationActions } from 'react-navigation';
+import { NavigationActions } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';

app/views/LegalView.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
 	Text, ScrollView, View, StyleSheet
 } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import { RectButton } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
 

app/views/LoginSignupView.js

@@ -5,7 +5,7 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import { RectButton, BorderlessButton } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
 

app/views/LoginView.js

@@ -4,7 +4,7 @@ import {
 	Keyboard, Text, ScrollView, View, StyleSheet, Alert
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 import { analytics } from '../utils/log';
 

app/views/MessagesView/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FlatList, View, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 import ActionSheet from 'react-native-action-sheet';
 

app/views/NewMessageView.js

@@ -4,7 +4,7 @@ import {
 	View, StyleSheet, FlatList, Text
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 import { orderBy } from 'lodash';
 import { Q } from '@nozbe/watermelondb';

app/views/NewServerView.js

@@ -4,7 +4,7 @@ import {
 	Text, ScrollView, Keyboard, Image, StyleSheet, TouchableOpacity, View, Alert
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import * as FileSystem from 'expo-file-system';
 import DocumentPicker from 'react-native-document-picker';
 import ActionSheet from 'react-native-action-sheet';
@@ -256,8 +256,8 @@ class NewServerView extends React.Component {
 				key='login-view'
 			>
 				<StatusBar light />
-				<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
-					<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
+				<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
+					<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
 						<Image style={styles.image} source={{ uri: 'new_server' }} />
 						<Text style={styles.title}>{I18n.t('Sign_in_your_server')}</Text>
 						<TextInput
@@ -279,9 +279,9 @@ class NewServerView extends React.Component {
 							loading={connecting}
 							testID='new-server-view-button'
 						/>
-						{ isIOS ? this.renderCertificatePicker() : null }
-					</SafeAreaView>
-				</ScrollView>
+						{isIOS ? this.renderCertificatePicker() : null}
+					</ScrollView>
+				</SafeAreaView>
 				{this.renderBack()}
 			</KeyboardView>
 		);

app/views/NotificationPreferencesView/index.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import RNPickerSelect from 'react-native-picker-select';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import { SWITCH_TRACK_COLOR } from '../../constants/colors';
 import StatusBar from '../../containers/StatusBar';

app/views/OnboardingView/index.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import Orientation from 'react-native-orientation-locker';
 
 import { selectServerRequest, serverInitAdd, serverFinishAdd } from '../../actions/server';

app/views/ProfileView/index.js

@@ -6,7 +6,7 @@ import Dialog from 'react-native-dialog';
 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 SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
 import KeyboardView from '../../presentation/KeyboardView';

app/views/ReadReceiptView/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FlatList, View, Text } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 import moment from 'moment';
 import { connect } from 'react-redux';

app/views/RegisterView.js

@@ -4,7 +4,7 @@ import {
 	Keyboard, Text, ScrollView, Alert
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import RNPickerSelect from 'react-native-picker-select';
 import equal from 'deep-equal';
 

app/views/RoomActionsView/index.js

@@ -4,7 +4,7 @@ import {
 	View, SectionList, Text, Alert, Share
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import { leaveRoom as leaveRoomAction } from '../../actions/room';
 import styles from './styles';

app/views/RoomInfoEditView/index.js

@@ -4,7 +4,7 @@ import {
 	Text, View, ScrollView, TouchableOpacity, Keyboard, Alert
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
 import database from '../../lib/database';

app/views/RoomInfoView/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { View, Text, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import Status from '../../containers/Status';
 import Avatar from '../../containers/Avatar';

app/views/RoomMembersView/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FlatList, View, ActivityIndicator } from 'react-native';
 import ActionSheet from 'react-native-action-sheet';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import * as Haptics from 'expo-haptics';
 import { Q } from '@nozbe/watermelondb';
 

app/views/RoomView/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Text, View, InteractionManager } from 'react-native';
 import { connect } from 'react-redux';
 import { RectButton } from 'react-native-gesture-handler';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import { HeaderBackButton } from 'react-navigation-stack';
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import moment from 'moment';

app/views/RoomsListView/index.js

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import { isEqual, orderBy } from 'lodash';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import Orientation from 'react-native-orientation-locker';
 import { Q } from '@nozbe/watermelondb';
 

app/views/SearchMessagesView/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { View, FlatList, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 
 import RCTextInput from '../../containers/TextInput';

app/views/SelectServerView.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';

app/views/SelectedUsersView.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet, FlatList } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import equal from 'deep-equal';
 import { orderBy } from 'lodash';
 import { Q } from '@nozbe/watermelondb';

app/views/SetUsernameView.js

@@ -4,7 +4,7 @@ import {
 	Text, ScrollView, StyleSheet
 } from 'react-native';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import SafeAreaView from 'react-native-safe-area-view';
 import Orientation from 'react-native-orientation-locker';
 
 import { loginRequest as loginRequestAction } from '../actions/login';