Init support to iPhone X

app/containers/Banner.js

@@ -31,9 +31,9 @@ export default class Banner extends React.PureComponent {
 		offline: PropTypes.bool
 	}
 	componentWillMount() {
-		this.state = {
+		this.setState({
 			slow: false
-		};
+		});
 		this.timer = setTimeout(() => this.setState({ slow: true }), 5000);
 	}
 	componentWillUnmount() {

app/containers/MessageBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, TextInput, StyleSheet } from 'react-native';
+import { View, TextInput, StyleSheet, SafeAreaView } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import ImagePicker from 'react-native-image-picker';
 import RocketChat from '../lib/rocketchat';
@@ -10,7 +10,9 @@ const styles = StyleSheet.create({
 		paddingTop: 1,
 		borderTopWidth: 1,
 		borderTopColor: '#ccc',
-		backgroundColor: '#fff',
+		backgroundColor: '#fff'
+	},
+	safeAreaView: {
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
@@ -77,6 +79,7 @@ export default class MessageBox extends React.PureComponent {
 	render() {
 		return (
 			<View style={styles.textBox}>
+				<SafeAreaView style={styles.safeAreaView}>
 					<Icon style={styles.fileButton} name='add-circle-outline' onPress={this.addFile} />
 					<TextInput
 						ref={component => this.component = component}
@@ -86,8 +89,9 @@ export default class MessageBox extends React.PureComponent {
 						blurOnSubmit={false}
 						placeholder='New message'
 						underlineColorAndroid='transparent'
-					defaultValue={''}
+						defaultValue=''
 					/>
+				</SafeAreaView>
 			</View>
 		);
 	}

app/containers/Sidebar.js

@@ -53,7 +53,7 @@ export default class Sidebar extends Component {
 
 	componentWillMount() {
 		realm.addListener('change', this.updateState);
-		this.state = this.getState();
+		this.setState(this.getState());
 	}
 
 	componentWillUnmount() {

app/presentation/Loading.js

@@ -45,14 +45,16 @@ export default class Loading extends Component {
 					toValue: 0.8,
 					duration: 1000,
 					useNativeDriver: true
-				}),
+				}
+			),
 			Animated.timing(
 				this.scale,
 				{
 					toValue: 1,
 					duration: 1000,
 					useNativeDriver: true
-				})
+				}
+			)
 		]).start(() => {
 			this.animate();
 		});

app/presentation/RoomItem.js

@@ -76,7 +76,7 @@ export default class RoomItem extends React.PureComponent {
 		unread: PropTypes.number,
 		baseUrl: PropTypes.string,
 		onPress: PropTypes.func,
-		dateFormat: PropTypes.string.isRequired
+		dateFormat: PropTypes.string
 	}
 
 	get icon() {
@@ -126,6 +126,7 @@ export default class RoomItem extends React.PureComponent {
 
 	render() {
 		const { unread, name, _updatedAt } = this.props;
+		if (_updatedAt) {
 			return (
 				<TouchableOpacity onPress={this.props.onPress} style={styles.container}>
 					{this.icon}
@@ -137,4 +138,15 @@ export default class RoomItem extends React.PureComponent {
 				</TouchableOpacity>
 			);
 		}
+
+		return (
+			<TouchableOpacity onPress={this.props.onPress} style={styles.container}>
+				{this.icon}
+				<View style={styles.roomNameView}>
+					<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
+				</View>
+				{this.renderNumber(unread)}
+			</TouchableOpacity>
+		);
+	}
 }

app/views/CreateChannelView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { TextInput, View, Text, Switch, TouchableOpacity } from 'react-native';
+import { TextInput, View, Text, Switch, TouchableOpacity, SafeAreaView } from 'react-native';
 import { createChannelRequest } from '../actions/createChannel';
 import styles from './Styles';
 import KeyboardView from '../presentation/KeyboardView';
@@ -94,7 +94,7 @@ export default class CreateChannelView extends React.Component {
 				style={[styles.defaultViewBackground, { flex: 1 }]}
 				contentContainerStyle={styles.defaultView}
 			>
-				<View style={styles.formContainer}>
+				<SafeAreaView style={styles.formContainer}>
 					<Text style={styles.label_white}>Channel Name</Text>
 					<TextInput
 						value={this.state.channelName}
@@ -139,7 +139,7 @@ export default class CreateChannelView extends React.Component {
 							{this.props.result.isFetching ? 'LOADING' : 'CREATE'}!
 						</Text>
 					</TouchableOpacity>
-				</View>
+				</SafeAreaView>
 			</KeyboardView>
 		);
 	}

app/views/ForgotPasswordView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Spinner from 'react-native-loading-spinner-overlay';
 import PropTypes from 'prop-types';
-import { Text, TextInput, View, TouchableOpacity, Alert } from 'react-native';
+import { Text, TextInput, View, TouchableOpacity, Alert, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as loginActions from '../actions/login';
@@ -72,6 +72,7 @@ class ForgotPasswordView extends React.Component {
 				contentContainerStyle={styles.container}
 				keyboardVerticalOffset={128}
 			>
+				<SafeAreaView>
 					<View style={styles.loginView}>
 						<View style={styles.formContainer}>
 							<TextInput
@@ -96,8 +97,9 @@ class ForgotPasswordView extends React.Component {
 
 							{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
 						</View>
-					<Spinner visible={this.props.login.isFetching} textContent={'Loading...'} textStyle={{ color: '#FFF' }} />
+						<Spinner visible={this.props.login.isFetching} textContent="Loading..." textStyle={{ color: '#FFF' }} />
 					</View>
+				</SafeAreaView>
 			</KeyboardView>
 		);
 	}

app/views/ListServerView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from 'react-native-vector-icons/Ionicons';
 import PropTypes from 'prop-types';
 import Zeroconf from 'react-native-zeroconf';
-import { View, Text, SectionList, StyleSheet } from 'react-native';
+import { View, Text, SectionList, StyleSheet, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import { setServer } from '../actions/server';
 import realm from '../lib/realm';
@@ -93,7 +93,7 @@ export default class ListServerView extends React.Component {
 
 		zeroconf.scan('http', 'tcp', 'local.');
 
-		this.state = this.getState();
+		this.setState(this.getState());
 	}
 
 	componentDidUpdate() {
@@ -184,6 +184,7 @@ export default class ListServerView extends React.Component {
 		return (
 			<View style={styles.view}>
 				<Banner />
+				<SafeAreaView style={styles.view}>
 					<SectionList
 						style={styles.list}
 						sections={this.state.sections}
@@ -192,6 +193,7 @@ export default class ListServerView extends React.Component {
 						keyExtractor={item => item.id}
 						ItemSeparatorComponent={this.renderSeparator}
 					/>
+				</SafeAreaView>
 			</View>
 		);
 	}

app/views/LoginView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Spinner from 'react-native-loading-spinner-overlay';
 
 import PropTypes from 'prop-types';
-import { Keyboard, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { Keyboard, Text, TextInput, View, TouchableOpacity, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 // import * as actions from '../actions';
@@ -78,6 +78,7 @@ class LoginView extends React.Component {
 				contentContainerStyle={styles.container}
 				keyboardVerticalOffset={128}
 			>
+				<SafeAreaView>
 					<View style={styles.loginView}>
 						<View style={styles.formContainer}>
 							<TextInput
@@ -120,8 +121,9 @@ class LoginView extends React.Component {
 
 							{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
 						</View>
-					<Spinner visible={this.props.login.isFetching} textContent={'Loading...'} textStyle={{ color: '#FFF' }} />
+						<Spinner visible={this.props.login.isFetching} textContent='Loading...' textStyle={{ color: '#FFF' }} />
 					</View>
+				</SafeAreaView>
 			</KeyboardView>
 		);
 	}

app/views/RegisterView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Spinner from 'react-native-loading-spinner-overlay';
 
 import PropTypes from 'prop-types';
-import { Keyboard, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { Keyboard, Text, TextInput, View, TouchableOpacity, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as loginActions from '../actions/login';
@@ -37,7 +37,9 @@ class RegisterView extends React.Component {
 	}
 
 	_valid() {
-		const { name, email, password, confirmPassword } = this.state;
+		const {
+			name, email, password, confirmPassword
+		} = this.state;
 		return name.trim() && email.trim() &&
 			password && confirmPassword && password === confirmPassword;
 	}
@@ -45,12 +47,16 @@ class RegisterView extends React.Component {
 		return this.props.login.failure && /Email/.test(this.props.login.error.reason);
 	}
 	submit = () => {
-		const { name, email, password, code } = this.state;
+		const {
+			name, email, password, code
+		} = this.state;
 		if (!this._valid()) {
 			return;
 		}
 
-		this.props.registerSubmit({ name, email, pass: password, code });
+		this.props.registerSubmit({
+			name, email, pass: password, code
+		});
 		Keyboard.dismiss();
 	}
 	usernameSubmit = () => {
@@ -125,7 +131,8 @@ class RegisterView extends React.Component {
 							: { color: placeholderTextColor }
 						]}
 						onPress={this.submit}
-					>REGISTER</Text>
+					>REGISTER
+					</Text>
 				</TouchableOpacity>
 
 				{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
@@ -155,7 +162,8 @@ class RegisterView extends React.Component {
 					<Text
 						style={styles.button}
 						onPress={this.usernameSubmit}
-					>REGISTER</Text>
+					>REGISTER
+					</Text>
 				</TouchableOpacity>
 
 				{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
@@ -166,11 +174,13 @@ class RegisterView extends React.Component {
 	render() {
 		return (
 			<KeyboardView contentContainerStyle={styles.container}>
+				<SafeAreaView>
 					<View style={styles.loginView}>
 						{this._renderRegister()}
 						{this._renderUsername()}
-					<Spinner visible={this.props.login.isFetching} textContent={'Loading...'} textStyle={{ color: '#FFF' }} />
+						<Spinner visible={this.props.login.isFetching} textContent='Loading...' textStyle={{ color: '#FFF' }} />
 					</View>
+				</SafeAreaView>
 			</KeyboardView>
 		);
 	}

app/views/RoomView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, StyleSheet, Button, InteractionManager } from 'react-native';
+import { Text, View, StyleSheet, Button, InteractionManager, SafeAreaView } from 'react-native';
 import { ListView } from 'realm/react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -19,6 +19,9 @@ const styles = StyleSheet.create({
 		flex: 1,
 		backgroundColor: '#fff'
 	},
+	safeAreaView: {
+		flex: 1
+	},
 	list: {
 		flex: 1,
 		transform: [{ scaleY: -1 }]
@@ -195,6 +198,7 @@ export default class RoomView extends React.Component {
 		return (
 			<KeyboardView contentContainerStyle={styles.container} keyboardVerticalOffset={64}>
 				{this.renderBanner()}
+				<SafeAreaView style={styles.safeAreaView}>
 					<ListView
 						enableEmptySections
 						style={styles.list}
@@ -205,6 +209,7 @@ export default class RoomView extends React.Component {
 						renderRow={item => this.renderItem({ item })}
 						initialListSize={10}
 					/>
+				</SafeAreaView>
 				{this.renderFooter()}
 			</KeyboardView>
 		);

app/views/RoomsListView.js

@@ -3,7 +3,7 @@ import { ListView } from 'realm/react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/Ionicons';
-import { View, StyleSheet, TextInput } from 'react-native';
+import { View, StyleSheet, TextInput, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import * as actions from '../actions';
 import * as server from '../actions/connect';
@@ -51,6 +51,9 @@ const styles = StyleSheet.create({
 		padding: 5,
 		paddingLeft: 10,
 		color: '#aaa'
+	},
+	safeAreaView: {
+		backgroundColor: '#fff'
 	}
 });
 
@@ -90,10 +93,10 @@ export default class RoomsListView extends React.Component {
 	componentWillMount() {
 		this.data.addListener(this.updateState);
 
-		this.state = {
+		this.setState({
 			...this.state,
 			dataSource: ds.cloneWithRows(this.data)
-		};
+		});
 	}
 
 	componentWillReceiveProps(props) {
@@ -243,7 +246,7 @@ export default class RoomsListView extends React.Component {
 			key={item._id}
 			type={item.t}
 			baseUrl={this.props.Site_Url}
-			dateFormat={'MM-DD-YYYY HH:mm:ss'}
+			dateFormat='MM-DD-YYYY HH:mm:ss'
 			onPress={() => this._onPressItem(item._id, item)}
 		/>
 	)
@@ -271,7 +274,9 @@ export default class RoomsListView extends React.Component {
 	render = () => (
 		<View style={styles.container}>
 			<Banner />
+			<SafeAreaView style={styles.safeAreaView}>
 				{this.renderList()}
 				{this.renderCreateButtons()}
+			</SafeAreaView>
 		</View>)
 }

app/views/SelectUsersView.js

@@ -3,7 +3,7 @@ import { ListView } from 'realm/react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/Ionicons';
-import { View, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TextInput, Text, TouchableOpacity, SafeAreaView } from 'react-native';
 import { connect } from 'react-redux';
 import * as actions from '../actions';
 import * as server from '../actions/connect';
@@ -20,6 +20,9 @@ const styles = StyleSheet.create({
 		alignItems: 'stretch',
 		justifyContent: 'center'
 	},
+	safeAreaView: {
+		backgroundColor: '#FFFFFF'
+	},
 	list: {
 		width: '100%',
 		backgroundColor: '#FFFFFF'
@@ -264,8 +267,10 @@ export default class RoomsListView extends React.Component {
 	render = () => (
 		<View style={styles.container}>
 			<Banner />
+			<SafeAreaView style={styles.safeAreaView}>
 				{this.renderList()}
 				{this.renderCreateButton()}
+			</SafeAreaView>
 		</View>
 	);
 }

package.json

@@ -18,9 +18,9 @@
     "babel-polyfill": "^6.26.0",
     "moment": "^2.19.2",
     "prop-types": "^15.6.0",
-    "react": "16.0.0-alpha.12",
+    "react": "16.1.0",
     "react-emojione": "^3.1.10",
-    "react-native": "0.46.1",
+    "react-native": "0.50.3",
     "react-native-action-button": "^2.8.1",
     "react-native-animatable": "^1.2.4",
     "react-native-card-view": "0.0.3",
@@ -28,13 +28,13 @@
     "react-native-fetch-blob": "^0.10.8",
     "react-native-image-picker": "^0.26.7",
     "react-native-img-cache": "^1.5.0",
-    "react-native-keyboard-aware-scroll-view": "^0.3.0",
+    "react-native-keyboard-aware-scroll-view": "^0.4.1",
     "react-native-loading-spinner-overlay": "^0.5.2",
     "react-native-meteor": "^1.2.0",
-    "react-native-modal": "^3.1.0",
+    "react-native-modal": "^4.1.1",
     "react-native-optimized-flatlist": "^1.0.3",
-    "react-native-svg": "^5.4.1",
+    "react-native-svg": "^6.0.0",
-    "react-native-svg-image": "^1.1.4",
+    "react-native-svg-image": "^2.0.1",
     "react-native-vector-icons": "^4.4.2",
     "react-native-zeroconf": "^0.8.3",
     "react-navigation": "^1.0.0-beta.19",
@@ -43,7 +43,7 @@
     "redux": "^3.7.2",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-logger": "^3.0.6",
-    "redux-saga": "^0.15.6",
+    "redux-saga": "^0.16.0",
     "regenerator-runtime": "^0.11.0",
     "remote-redux-devtools": "^0.5.12",
     "strip-ansi": "^4.0.0"
@@ -51,20 +51,20 @@
   "devDependencies": {
     "@storybook/addon-storyshots": "^3.2.15",
     "@storybook/react-native": "^3.2.15",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.2",
-    "babel-jest": "20.0.3",
+    "babel-jest": "21.2.0",
-    "babel-preset-react-native": "2.1.0",
+    "babel-preset-react-native": "4.0.0",
-    "codecov": "^2.3.0",
+    "codecov": "^3.0.0",
     "eslint": "^4.11.0",
-    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "eslint-plugin-react-native": "^3.1.0",
-    "jest": "20.0.4",
+    "jest": "21.2.1",
-    "jest-cli": "^20.0.4",
+    "jest-cli": "^21.2.1",
-    "react-dom": "16.0.0-alpha.12",
+    "react-dom": "16.1.0",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "react-test-renderer": "16.1.0"
   },
   "jest": {
     "preset": "react-native",