From a895d417049efdf3c5d10da8fe143e62caaa7977 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Thu, 21 May 2020 17:38:40 -0300 Subject: [PATCH] SafeAreaView --- app/AppContainer.js | 76 ++++++++++--------- app/containers/FormContainer.js | 6 +- app/containers/MessageBox/Recording.js | 4 +- app/containers/ReactionsModal.js | 5 +- app/containers/SafeAreaView.js | 34 +++++++++ app/views/AdminPanelView/index.js | 6 +- app/views/AutoTranslateView/index.js | 10 +-- app/views/CreateChannelView.js | 6 +- app/views/CreateDiscussionView/index.js | 6 +- app/views/DefaultBrowserView.js | 10 +-- app/views/DirectoryView/index.js | 6 +- app/views/DirectoryView/styles.js | 3 - app/views/InviteUsersEditView/index.js | 6 +- app/views/InviteUsersEditView/styles.js | 3 - app/views/LanguageView/index.js | 10 +-- app/views/LegalView.js | 17 +---- app/views/LivechatEditView.js | 6 +- app/views/MessagesView/index.js | 11 +-- app/views/NewMessageView.js | 13 +--- .../NotificationPreferencesView/index.js | 7 +- app/views/ProfileView/index.js | 6 +- app/views/ReadReceiptView/index.js | 10 +-- app/views/ReadReceiptView/styles.js | 3 - app/views/RoomActionsView/index.js | 6 +- app/views/RoomInfoEditView/index.js | 6 +- app/views/RoomMembersView/index.js | 6 +- app/views/RoomView/index.js | 12 +-- app/views/RoomsListView/index.js | 34 +++------ app/views/ScreenLockConfigView.js | 10 +-- app/views/SearchMessagesView/index.js | 6 +- app/views/SearchMessagesView/styles.js | 3 - app/views/SelectServerView.js | 12 +-- app/views/SelectedUsersView.js | 13 +--- app/views/SetUsernameView.js | 6 +- app/views/SettingsView/index.js | 11 +-- app/views/ShareListView/index.js | 6 +- app/views/SidebarView/index.js | 5 +- app/views/StatusView.js | 16 +--- app/views/ThemeView.js | 10 +-- app/views/ThreadMessagesView/index.js | 6 +- 40 files changed, 183 insertions(+), 249 deletions(-) create mode 100644 app/containers/SafeAreaView.js diff --git a/app/AppContainer.js b/app/AppContainer.js index f717761dd..f62f1c23a 100644 --- a/app/AppContainer.js +++ b/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 ( - { - Navigation.setTopLevelNavigator(navigatorRef); - }} - onNavigationStateChange={onNavigationStateChange} - > - - <> - {root === 'loading' ? ( - - ) : null} - {root === 'outside' ? ( - - ) : null} - {root === 'inside' ? ( - - ) : null} - {root === 'setUsername' ? ( - - ) : null} - - - + + { + Navigation.setTopLevelNavigator(navigatorRef); + }} + onNavigationStateChange={onNavigationStateChange} + > + + <> + {root === 'loading' ? ( + + ) : null} + {root === 'outside' ? ( + + ) : null} + {root === 'inside' ? ( + + ) : null} + {root === 'setUsername' ? ( + + ) : null} + + + + ); }; const mapStateToProps = state => ({ diff --git a/app/containers/FormContainer.js b/app/containers/FormContainer.js index 7938a5f9e..19b5c189f 100644 --- a/app/containers/FormContainer.js +++ b/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 }) => ( > - + {children} diff --git a/app/containers/MessageBox/Recording.js b/app/containers/MessageBox/Recording.js index c471f2d94..c3fa65ab3 100644 --- a/app/containers/MessageBox/Recording.js +++ b/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 ( { if (message && message.reactions) { return ( - + ( + + {children} + +)); + +SafeAreaView.propTypes = { + testID: PropTypes.string, + theme: PropTypes.string, + style: PropTypes.object, + children: PropTypes.element +}; + +export default SafeAreaView; diff --git a/app/views/AdminPanelView/index.js b/app/views/AdminPanelView/index.js index 4311337e4..a588a9309 100644 --- a/app/views/AdminPanelView/index.js +++ b/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 ( - + + - + { @@ -137,7 +137,7 @@ class CreateChannelView extends React.Component { keyboardVerticalOffset={128} > - + {I18n.t('Discussion_Desc')} + { @@ -230,7 +230,7 @@ class DirectoryView extends React.Component { } = this.state; const { isFederationEnabled, theme } = this.props; return ( - + + + + { keyboardVerticalOffset={128} > - + <StatusBar theme={theme} /> <FlatList diff --git a/app/views/NewMessageView.js b/app/views/NewMessageView.js index 07e77ea98..d7e1cfd89 100644 --- a/app/views/NewMessageView.js +++ b/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> diff --git a/app/views/NotificationPreferencesView/index.js b/app/views/NotificationPreferencesView/index.js index c694bb663..5c4343b42 100644 --- a/app/views/NotificationPreferencesView/index.js +++ b/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} diff --git a/app/views/ProfileView/index.js b/app/views/ProfileView/index.js index 083824d45..29050b6b3 100644 --- a/app/views/ProfileView/index.js +++ b/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' diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js index 19bbcda6a..3b4ed1a52 100644 --- a/app/views/ReadReceiptView/index.js +++ b/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 diff --git a/app/views/ReadReceiptView/styles.js b/app/views/ReadReceiptView/styles.js index a0013531c..c93754294 100644 --- a/app/views/ReadReceiptView/styles.js +++ b/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 diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js index 1bfb56279..eb68ceb1c 100644 --- a/app/views/RoomActionsView/index.js +++ b/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 }]} diff --git a/app/views/RoomInfoEditView/index.js b/app/views/RoomInfoEditView/index.js index eea35359e..38a812dd1 100644 --- a/app/views/RoomInfoEditView/index.js +++ b/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')} diff --git a/app/views/RoomMembersView/index.js b/app/views/RoomMembersView/index.js index 59e73e615..2a3b4a65b 100644 --- a/app/views/RoomMembersView/index.js +++ b/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} diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 13a4dcd99..87b84acc5 100644 --- a/app/views/RoomView/index.js +++ b/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 diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 92e83111c..3423fa505 100644 --- a/app/views/RoomsListView/index.js +++ b/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 ? ( diff --git a/app/views/ScreenLockConfigView.js b/app/views/ScreenLockConfigView.js index f57f56d57..259e52566 100644 --- a/app/views/ScreenLockConfigView.js +++ b/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} diff --git a/app/views/SearchMessagesView/index.js b/app/views/SearchMessagesView/index.js index a84ae9ca8..0b4dabbf2 100644 --- a/app/views/SearchMessagesView/index.js +++ b/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 diff --git a/app/views/SearchMessagesView/styles.js b/app/views/SearchMessagesView/styles.js index 7c5cdd82c..0d3b38d1e 100644 --- a/app/views/SearchMessagesView/styles.js +++ b/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 diff --git a/app/views/SelectServerView.js b/app/views/SelectServerView.js index f9303573a..5e3e64359 100644 --- a/app/views/SelectServerView.js +++ b/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 diff --git a/app/views/SelectedUsersView.js b/app/views/SelectedUsersView.js index 53c088b90..a61023efc 100644 --- a/app/views/SelectedUsersView.js +++ b/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} /> diff --git a/app/views/SetUsernameView.js b/app/views/SetUsernameView.js index 3303479c0..dace2b507 100644 --- a/app/views/SetUsernameView.js +++ b/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, diff --git a/app/views/SettingsView/index.js b/app/views/SettingsView/index.js index 0dcd829aa..eb6a59571 100644 --- a/app/views/SettingsView/index.js +++ b/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} diff --git a/app/views/ShareListView/index.js b/app/views/ShareListView/index.js index d15379a5e..c8f3d8165 100644 --- a/app/views/ShareListView/index.js +++ b/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> diff --git a/app/views/SidebarView/index.js b/app/views/SidebarView/index.js index bee708251..3521e69ca 100644 --- a/app/views/SidebarView/index.js +++ b/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, diff --git a/app/views/StatusView.js b/app/views/StatusView.js index 9dd927bbd..d00696583 100644 --- a/app/views/StatusView.js +++ b/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} diff --git a/app/views/ThemeView.js b/app/views/ThemeView.js index 36f567ca2..4d044a742 100644 --- a/app/views/ThemeView.js +++ b/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} diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.js index 650ef0e35..57dc310aa 100644 --- a/app/views/ThreadMessagesView/index.js +++ b/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}