verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

SafeAreaView

This commit is contained in:
Diego Mello 2020-05-21 17:38:40 -03:00
parent f764527d60
commit a895d41704
40 changed files with 183 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/AppContainer.js
View File

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

6
app/containers/FormContainer.js
View File

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

4
app/containers/MessageBox/Recording.js
View File

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

5
app/containers/ReactionsModal.js
View File

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

34
app/containers/SafeAreaView.js Normal file
View File

@ -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;

6
app/views/AdminPanelView/index.js
View File

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

10
app/views/AutoTranslateView/index.js
View File

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

6
app/views/CreateChannelView.js
View File

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

6
app/views/CreateDiscussionView/index.js
View File

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

10
app/views/DefaultBrowserView.js
View File

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

6
app/views/DirectoryView/index.js
View File

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

3
app/views/DirectoryView/styles.js
View File

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

6
app/views/InviteUsersEditView/index.js
View File

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

3
app/views/InviteUsersEditView/styles.js
View File

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

10
app/views/LanguageView/index.js
View File

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

17
app/views/LegalView.js
View File

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

6
app/views/LivechatEditView.js
View File

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

11
app/views/MessagesView/index.js
View File

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

13
app/views/NewMessageView.js
View File

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

7
app/views/NotificationPreferencesView/index.js
View File

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

6
app/views/ProfileView/index.js
View File

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

10
app/views/ReadReceiptView/index.js
View File

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

3
app/views/ReadReceiptView/styles.js
View File

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

6
app/views/RoomActionsView/index.js
View File

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

6
app/views/RoomInfoEditView/index.js
View File

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

6
app/views/RoomMembersView/index.js
View File

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

12
app/views/RoomView/index.js
View File

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

34
app/views/RoomsListView/index.js
View File

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

10
app/views/ScreenLockConfigView.js
View File

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

6
app/views/SearchMessagesView/index.js
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; 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 { connect } from 'react-redux';
// import { SafeAreaView } from 'react-navigation';
import equal from 'deep-equal'; import equal from 'deep-equal';
import RCTextInput from '../../containers/TextInput'; import RCTextInput from '../../containers/TextInput';
@ -20,6 +19,7 @@ import { themes } from '../../constants/colors';
import { withTheme } from '../../theme'; import { withTheme } from '../../theme';
import { themedHeader } from '../../utils/navigation'; import { themedHeader } from '../../utils/navigation';
import { getUserSelector } from '../../selectors/login'; import { getUserSelector } from '../../selectors/login';
import SafeAreaView from '../../containers/SafeAreaView';
class SearchMessagesView extends React.Component { class SearchMessagesView extends React.Component {
static navigationOptions = ({ screenProps }) => ({ static navigationOptions = ({ screenProps }) => ({
@ -152,7 +152,7 @@ class SearchMessagesView extends React.Component {
render() { render() {
const { theme } = this.props; const { theme } = this.props;
return ( 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} /> <StatusBar theme={theme} />
<View style={styles.searchContainer}> <View style={styles.searchContainer}>
<RCTextInput <RCTextInput

3
app/views/SearchMessagesView/styles.js
View File

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

12
app/views/SelectServerView.js
View File

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

13
app/views/SelectedUsersView.js
View File

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

6
app/views/SetUsernameView.js
View File

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

11
app/views/SettingsView/index.js
View File

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

6
app/views/ShareListView/index.js
View File

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

5
app/views/SidebarView/index.js
View File

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

16
app/views/StatusView.js
View File

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

10
app/views/ThemeView.js
View File

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

6
app/views/ThreadMessagesView/index.js
View File

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