SafeAreaView

RocketChat · Jul 31, 2018 · 8780ee5 · 8780ee5
1 parent 6df2445
commit 8780ee5
Show file tree

Hide file tree

Showing 29 changed files with 109 additions and 115 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -72,6 +72,10 @@ import com.android.build.OutputFile
  * ]
  */
 
+project.ext.react = [
+    entryFile: "index.android.js"
+]
+
 apply from: "../../node_modules/react-native/react.gradle"
 
 /**

diff --git a/app/containers/Sidebar.js b/app/containers/Sidebar.js
@@ -18,6 +18,10 @@ import I18n from '../i18n';
 import { NavigationActions } from '../Navigation';
 
 const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: '#fff'
+	},
 	item: {
 		flexDirection: 'row',
 		alignItems: 'center'
@@ -301,8 +305,8 @@ export default class Sidebar extends Component {
 			return null;
 		}
 		return (
-			<ScrollView style={{ backgroundColor: '#fff', flex: 1 }}>
-				<SafeAreaView testID='sidebar'>
+			<ScrollView style={styles.container}>
+				<SafeAreaView testID='sidebar' style={styles.container}>
 					<Touch
 						onPress={() => this.toggleServers()}
 						underlayColor='rgba(255, 255, 255, 0.5)'

diff --git a/app/containers/message/Image.js b/app/containers/message/Image.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import FastImage from 'react-native-fast-image';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
 
 import PhotoModal from './PhotoModal';

diff --git a/app/views/ForgotPasswordView.js b/app/views/ForgotPasswordView.js
@@ -77,8 +77,8 @@ export default class ForgotPasswordView extends LoggedView {
 				keyboardVerticalOffset={128}
 			>
 				<ScrollView {...scrollPersistTaps} contentContainerStyle={styles.containerScrollView}>
-					<SafeAreaView testID='forgot-password-view'>
-						<View style={styles.loginView}>
+					<SafeAreaView style={styles.container} testID='forgot-password-view'>
+						<View>
 							<TextInput
 								inputStyle={this.state.invalidEmail ? { borderColor: 'red' } : {}}
 								label={I18n.t('Email')}

diff --git a/app/views/ListServerView.js b/app/views/ListServerView.js
@@ -1,8 +1,7 @@
 import React from 'react';
-
 import Icon from 'react-native-vector-icons/Ionicons';
 import PropTypes from 'prop-types';
-import { View, Text, SectionList, StyleSheet } from 'react-native';
+import { View, Text, SectionList, StyleSheet, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import LoggedView from './View';
@@ -14,11 +13,8 @@ import I18n from '../i18n';
 import { iconsMap } from '../Icons';
 
 const styles = StyleSheet.create({
-	view: {
+	container: {
 		flex: 1,
-		flexDirection: 'column',
-		justifyContent: 'center',
-		alignItems: 'stretch',
 		backgroundColor: '#fff'
 	},
 	separator: {
@@ -194,7 +190,7 @@ export default class ListServerView extends LoggedView {
 
 	render() {
 		return (
-			<View style={styles.view} testID='list-server-view'>
+			<SafeAreaView style={styles.container} testID='list-server-view'>
 				<SectionList
 					style={styles.list}
 					sections={this.state.sections}
@@ -203,7 +199,7 @@ export default class ListServerView extends LoggedView {
 					keyExtractor={item => item.id}
 					ItemSeparatorComponent={this.renderSeparator}
 				/>
-			</View>
+			</SafeAreaView>
 		);
 	}
 }
diff --git a/app/views/LoginSignupView.js b/app/views/LoginSignupView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, ScrollView, TouchableOpacity, LayoutAnimation, Image, StyleSheet } from 'react-native';
+import { Text, View, ScrollView, TouchableOpacity, LayoutAnimation, Image, StyleSheet, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -279,7 +279,7 @@ export default class LoginSignupView extends LoggedView {
 				style={[sharedStyles.container, sharedStyles.containerScrollView]}
 				{...scrollPersistTaps}
 			>
-				<View testID='welcome-view'>
+				<SafeAreaView style={sharedStyles.container} testID='welcome-view'>
 					<View style={styles.container}>
 						<Image
 							source={require('../static/images/logo.png')}
@@ -307,7 +307,7 @@ export default class LoginSignupView extends LoggedView {
 						{this.renderServices()}
 					</View>
 					<Loading visible={this.props.isFetching} />
-				</View>
+				</SafeAreaView>
 			</ScrollView>
 		);
 	}

diff --git a/app/views/LoginView.js b/app/views/LoginView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Keyboard, Text, ScrollView, View } from 'react-native';
+import { Keyboard, Text, ScrollView, View, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import { Answers } from 'react-native-fabric';
 
@@ -106,7 +106,7 @@ export default class LoginView extends LoggedView {
 				key='login-view'
 			>
 				<ScrollView {...scrollPersistTaps} contentContainerStyle={styles.containerScrollView}>
-					<View testID='login-view'>
+					<SafeAreaView style={styles.container} testID='login-view'>
 						<Text style={[styles.loginText, styles.loginTitle]}>Login</Text>
 						<TextInput
 							label={I18n.t('Username')}
@@ -158,7 +158,7 @@ export default class LoginView extends LoggedView {
 
 						{this.props.failure ? <Text style={styles.error}>{this.props.reason}</Text> : null}
 						<Loading visible={this.props.isFetching} />
-					</View>
+					</SafeAreaView>
 				</ScrollView>
 			</KeyboardView>
 		);

diff --git a/app/views/MentionedMessagesView/index.js b/app/views/MentionedMessagesView/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text } from 'react-native';
+import { FlatList, View, Text, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import LoggedView from '../View';
@@ -102,10 +102,8 @@ export default class MentionedMessagesView extends LoggedView {
 		}
 
 		return (
-			[
+			<SafeAreaView style={styles.list} testID='mentioned-messages-view'>
 				<FlatList
-					key='mentioned-messages-view-list'
-					testID='mentioned-messages-view'
 					data={messages}
 					renderItem={this.renderItem}
 					style={styles.list}
@@ -114,7 +112,7 @@ export default class MentionedMessagesView extends LoggedView {
 					ListHeaderComponent={loading ? <RCActivityIndicator /> : null}
 					ListFooterComponent={loadingMore ? <RCActivityIndicator /> : null}
 				/>
-			]
+			</SafeAreaView>
 		);
 	}
 }
diff --git a/app/views/NewServerView.js b/app/views/NewServerView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, ScrollView, View, Keyboard } from 'react-native';
+import { Text, ScrollView, View, Keyboard, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import { serverRequest, addServer } from '../actions/server';
@@ -112,7 +112,7 @@ export default class NewServerView extends LoggedView {
 				keyboardVerticalOffset={128}
 			>
 				<ScrollView {...scrollPersistTaps} contentContainerStyle={styles.containerScrollView}>
-					<View testID='new-server-view'>
+					<SafeAreaView style={styles.container} testID='new-server-view'>
 						<Text style={[styles.loginText, styles.loginTitle]}>{I18n.t('Sign_in_your_server')}</Text>
 						<TextInput
 							inputRef={e => this.input = e}
@@ -135,7 +135,7 @@ export default class NewServerView extends LoggedView {
 							/>
 						</View>
 						<Loading visible={this.props.addingServer} />
-					</View>
+					</SafeAreaView>
 				</ScrollView>
 			</KeyboardView>
 		);

diff --git a/app/views/PinnedMessagesView/index.js b/app/views/PinnedMessagesView/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text } from 'react-native';
+import { FlatList, View, Text, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import ActionSheet from 'react-native-actionsheet';
 
@@ -128,27 +128,24 @@ export default class PinnedMessagesView extends LoggedView {
 		}
 
 		return (
-			[
+			<SafeAreaView style={styles.list} testID='pinned-messages-view'>
 				<FlatList
-					key='pinned-messages-view-list'
-					testID='pinned-messages-view'
 					data={messages}
 					renderItem={this.renderItem}
 					style={styles.list}
 					keyExtractor={item => item._id}
 					onEndReached={this.moreData}
 					ListHeaderComponent={loading ? <RCActivityIndicator /> : null}
 					ListFooterComponent={loadingMore ? <RCActivityIndicator /> : null}
-				/>,
+				/>
 				<ActionSheet
-					key='pinned-messages-view-action-sheet'
 					ref={o => this.actionSheet = o}
 					title={I18n.t('Actions')}
 					options={options}
 					cancelButtonIndex={CANCEL_INDEX}
 					onPress={this.handleActionPress}
 				/>
-			]
+			</SafeAreaView>
 		);
 	}
 }
diff --git a/app/views/PrivacyPolicyView.js b/app/views/PrivacyPolicyView.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { WebView } from 'react-native';
+import { WebView, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
+import styles from './Styles';
+
 @connect(state => ({
 	privacyPolicy: state.settings.Layout_Privacy_Policy
 }))
@@ -13,7 +15,9 @@ export default class PrivacyPolicyView extends React.PureComponent {
 
 	render() {
 		return (
-			<WebView source={{ html: this.props.privacyPolicy }} />
+			<SafeAreaView style={styles.container}>
+				<WebView originWhitelist={['*']} source={{ html: this.props.privacyPolicy, baseUrl: '' }} />
+			</SafeAreaView>
 		);
 	}
 }
diff --git a/app/views/ProfileView/index.js b/app/views/ProfileView/index.js
@@ -378,7 +378,7 @@ export default class ProfileView extends LoggedView {
 					testID='profile-view-list'
 					{...scrollPersistTaps}
 				>
-					<SafeAreaView testID='profile-view'>
+					<SafeAreaView style={sharedStyles.container} testID='profile-view'>
 						<View style={styles.avatarContainer} testID='profile-view-avatar'>
 							<Avatar
 								text={username}

diff --git a/app/views/RegisterView.js b/app/views/RegisterView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Keyboard, Text, View, ScrollView } from 'react-native';
+import { Keyboard, Text, View, ScrollView, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import { registerSubmit, setUsernameSubmit } from '../actions/login';
@@ -212,7 +212,7 @@ export default class RegisterView extends LoggedView {
 		return (
 			<KeyboardView contentContainerStyle={styles.container}>
 				<ScrollView {...scrollPersistTaps} contentContainerStyle={styles.containerScrollView}>
-					<View testID='register-view'>
+					<SafeAreaView style={styles.container} testID='register-view'>
 						<Text style={[styles.loginText, styles.loginTitle]}>{I18n.t('Sign_Up')}</Text>
 						{this._renderRegister()}
 						{this._renderUsername()}
@@ -223,7 +223,7 @@ export default class RegisterView extends LoggedView {
 							: null
 						}
 						<Loading visible={this.props.login.isFetching} />
-					</View>
+					</SafeAreaView>
 				</ScrollView>
 			</KeyboardView>
 		);

diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, SectionList, Text, Alert } from 'react-native';
+import { View, SectionList, Text, Alert, SafeAreaView } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import { connect } from 'react-redux';
@@ -394,7 +394,7 @@ export default class RoomActionsView extends LoggedView {
 
 	render() {
 		return (
-			<View testID='room-actions-view'>
+			<SafeAreaView style={styles.container} testID='room-actions-view'>
 				<SectionList
 					style={styles.container}
 					stickySectionHeadersEnabled={false}
@@ -404,7 +404,7 @@ export default class RoomActionsView extends LoggedView {
 					keyExtractor={item => item.name}
 					testID='room-actions-list'
 				/>
-			</View>
+			</SafeAreaView>
 		);
 	}
 }
diff --git a/app/views/RoomActionsView/styles.js b/app/views/RoomActionsView/styles.js
@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
 	container: {
+		flex: 1,
 		backgroundColor: '#F6F7F9'
 	},
 	sectionItem: {

diff --git a/app/views/RoomFilesView/index.js b/app/views/RoomFilesView/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, View, Text } from 'react-native';
+import { FlatList, View, Text, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 
 import LoggedView from '../View';
@@ -98,10 +98,8 @@ export default class RoomFilesView extends LoggedView {
 
 		const { loading, loadingMore } = this.state;
 		return (
-			[
+			<SafeAreaView style={styles.list} testID='room-files-view'>
 				<FlatList
-					key='room-files-view-list'
-					testID='room-files-view'
 					data={messages}
 					renderItem={this.renderItem}
 					style={styles.list}
@@ -110,7 +108,7 @@ export default class RoomFilesView extends LoggedView {
 					ListHeaderComponent={loading ? <RCActivityIndicator /> : null}
 					ListFooterComponent={loadingMore ? <RCActivityIndicator /> : null}
 				/>
-			]
+			</SafeAreaView>
 		);
 	}
 }
diff --git a/app/views/RoomInfoEditView/index.js b/app/views/RoomInfoEditView/index.js
@@ -34,8 +34,11 @@ const PERMISSIONS_ARRAY = [
 	PERMISSION_DELETE_P
 ];
 
+@connect(null, dispatch => ({
+	eraseRoom: rid => dispatch(eraseRoom(rid))
+}))
 /** @extends React.Component */
-class RoomInfoEditView extends LoggedView {
+export default class RoomInfoEditView extends LoggedView {
 	static propTypes = {
 		rid: PropTypes.string,
 		eraseRoom: PropTypes.func
@@ -263,7 +266,7 @@ class RoomInfoEditView extends LoggedView {
 					testID='room-info-edit-view-list'
 					{...scrollPersistTaps}
 				>
-					<SafeAreaView testID='room-info-edit-view'>
+					<SafeAreaView style={sharedStyles.container} testID='room-info-edit-view'>
 						<RCTextInput
 							inputRef={(e) => { this.name = e; }}
 							label={I18n.t('Name')}
@@ -398,9 +401,3 @@ class RoomInfoEditView extends LoggedView {
 		);
 	}
 }
-
-const mapDispatchToProps = dispatch => ({
-	eraseRoom: rid => dispatch(eraseRoom(rid))
-});
-
-export default connect(null, mapDispatchToProps)(RoomInfoEditView);