Merge pull request #67 from RocketChat/update

Init support to iPhone X

__tests__/__snapshots__/RoomItem.js.snap

@@ -50,7 +50,6 @@ exports[`render channel 1`] = `
     <Text
       accessible={true}
       allowFontScaling={false}
-      disabled={false}
       ellipsizeMode="tail"
       style={
         Array [
@@ -85,7 +84,6 @@ exports[`render channel 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -103,7 +101,6 @@ exports[`render channel 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -163,7 +160,6 @@ exports[`render no icon 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -181,7 +177,6 @@ exports[`render no icon 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -241,7 +236,6 @@ exports[`render private group 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -259,7 +253,6 @@ exports[`render private group 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -328,7 +321,6 @@ exports[`render unread +999 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       style={
         Array [
@@ -356,7 +348,6 @@ exports[`render unread +999 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -374,7 +365,6 @@ exports[`render unread +999 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -392,7 +382,6 @@ exports[`render unread +999 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
-    disabled={false}
     ellipsizeMode="tail"
     style={
       Object {
@@ -464,7 +453,6 @@ exports[`render unread 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       style={
         Array [
@@ -492,7 +480,6 @@ exports[`render unread 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -510,7 +497,6 @@ exports[`render unread 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -528,7 +514,6 @@ exports[`render unread 1`] = `
   <Text
     accessible={true}
     allowFontScaling={true}
-    disabled={false}
     ellipsizeMode="tail"
     style={
       Object {
@@ -600,7 +585,6 @@ exports[`renders correctly 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       style={
         Array [
@@ -628,7 +612,6 @@ exports[`renders correctly 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -646,7 +629,6 @@ exports[`renders correctly 1`] = `
     <Text
       accessible={true}
       allowFontScaling={true}
-      disabled={false}
       ellipsizeMode="tail"
       numberOfLines={1}
       style={

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -24,7 +24,6 @@ exports[`Storyshots Avatar avatar 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Array [
@@ -61,7 +60,6 @@ exports[`Storyshots Avatar avatar 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Array [
@@ -98,7 +96,6 @@ exports[`Storyshots Avatar avatar 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Array [
@@ -135,7 +132,6 @@ exports[`Storyshots Avatar avatar 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Array [
@@ -208,7 +204,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -255,7 +250,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -273,7 +267,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -339,7 +332,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -386,7 +378,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -404,7 +395,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -470,7 +460,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -517,7 +506,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -535,7 +523,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -553,7 +540,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Object {
@@ -622,7 +608,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -669,7 +654,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -687,7 +671,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -705,7 +688,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Object {
@@ -774,7 +756,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -821,7 +802,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -839,7 +819,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -857,7 +836,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Object {
@@ -926,7 +904,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -973,7 +950,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -991,7 +967,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1009,7 +984,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Object {
@@ -1078,7 +1052,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -1125,7 +1098,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1143,7 +1115,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1161,7 +1132,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       <Text
         accessible={true}
         allowFontScaling={true}
-        disabled={false}
         ellipsizeMode="tail"
         style={
           Object {
@@ -1230,7 +1200,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -1258,7 +1227,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1276,7 +1244,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1342,7 +1309,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -1370,7 +1336,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1388,7 +1353,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1454,7 +1418,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           style={
             Array [
@@ -1482,7 +1445,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -1500,7 +1462,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         <Text
           accessible={true}
           allowFontScaling={true}
-          disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
           style={

app/containers/Avatar.js

@@ -20,7 +20,9 @@ const styles = StyleSheet.create({
 
 class Avatar extends React.PureComponent {
 	render() {
-		const { text = '', size = 25, baseUrl, borderRadius = 5, style, avatar } = this.props;
+		const {
+			text = '', size = 25, baseUrl, borderRadius = 5, style, avatar
+		} = this.props;
 		const { initials, color } = avatarInitialsAndColor(`${ text }`);
 
 		const iconContainerStyle = {

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

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

app/containers/message/PhotoModal.js

@@ -34,7 +34,9 @@ export default class extends React.PureComponent {
 		onClose: PropTypes.func.isRequired
 	}
 	render() {
-		const { image, isVisible, onClose, title } = this.props;
+		const {
+			image, isVisible, onClose, title
+		} = this.props;
 		return (
 			<Modal
 				isVisible={isVisible}
@@ -50,7 +52,7 @@ export default class extends React.PureComponent {
 							style={styles.image}
 							source={{ uri: encodeURI(image) }}
 							mutable
-							resizeMode={'contain'}
+							resizeMode='contain'
 						/>
 					</ScrollView>
 				</View>

app/containers/routes/AuthRoutes.js

@@ -38,7 +38,7 @@ const AuthRoutes = StackNavigator(
 					title: navigation.state.params.title || 'Room',
 					headerLeft: (
 						<HeaderBackButton
-							title={'Back'}
+							title='Back'
 							onPress={() => backToScreen(navigation, 'RoomsList')}
 						/>
 					)

app/lib/createStore.js

@@ -18,9 +18,7 @@ if (__DEV__) {
 		applyMiddleware(logger)
 	);
 } else {
-	enhacers = composeWithDevTools(
-		applyMiddleware(sagaMiddleware)
-	);
+	enhacers = composeWithDevTools(applyMiddleware(sagaMiddleware));
 }
 
 const store = enhacers(createStore)(reducers);

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/reducers/connect.js

@@ -10,17 +10,20 @@ const initialState = {
 export default function connect(state = initialState, action) {
 	switch (action.type) {
 		case METEOR.REQUEST:
-			return { ...state,
+			return {
+				...state,
 				connecting: true
 			};
 		case METEOR.SUCCESS:
-			return { ...state,
+			return {
+				...state,
 				connecting: false,
 				connected: true,
 				failure: false
 			};
 		case METEOR.FAILURE:
-			return { ...state,
+			return {
+				...state,
 				connecting: false,
 				connected: false,
 				failure: true,

app/reducers/login.js

@@ -12,14 +12,16 @@ const initialState = {
 export default function login(state = initialState, action) {
 	switch (action.type) {
 		case types.LOGIN.REQUEST:
-			return { ...state,
+			return {
+				...state,
 				isFetching: true,
 				isAuthenticated: false,
 				failure: false,
 				error: ''
 			};
 		case types.LOGIN.SUCCESS:
-			return { ...state,
+			return {
+				...state,
 				isFetching: false,
 				isAuthenticated: true,
 				user: action.user,
@@ -28,7 +30,8 @@ export default function login(state = initialState, action) {
 				error: ''
 			};
 		case types.LOGIN.FAILURE:
-			return { ...state,
+			return {
+				...state,
 				isFetching: false,
 				isAuthenticated: false,
 				failure: true,
@@ -37,7 +40,8 @@ export default function login(state = initialState, action) {
 		case types.LOGOUT:
 			return initialState;
 		case types.LOGIN.SET_TOKEN:
-			return { ...state,
+			return {
+				...state,
 				token: action.token,
 				user: action.user
 			};

app/reducers/messages.js

@@ -8,15 +8,18 @@ const initialState = {
 export default function messages(state = initialState, action) {
 	switch (action.type) {
 		case types.MESSAGES.REQUEST:
-			return { ...state,
+			return {
+				...state,
 				isFetching: true
 			};
 		case types.MESSAGES.SUCCESS:
-			return { ...state,
+			return {
+				...state,
 				isFetching: false
 			};
 		case types.LOGIN.FAILURE:
-			return { ...state,
+			return {
+				...state,
 				isFetching: false,
 				failure: true,
 				errorMessage: action.err

app/reducers/navigator.js

@@ -5,8 +5,7 @@ const initialState = {};
 export default function navigations(state = initialState, action) {
 	switch (action.type) {
 		case types.NAVIGATION.SET:
-			return action.navigator
-			;
+			return action.navigator;
 		default:
 			return state;
 	}

app/reducers/reducers.js

@@ -3,7 +3,8 @@ import initialState from './initialState';
 
 export default function settings(state = initialState.settings, action) {
 	if (action.type === types.SET_ALL_SETTINGS) {
-		return { ...state,
+		return {
+			...state,
 			...action.payload
 		};
 	}

app/reducers/rooms.js

@@ -8,15 +8,18 @@ const initialState = {
 export default function login(state = initialState, action) {
 	switch (action.type) {
 		case types.ROOMS.REQUEST:
-			return { ...state,
+			return {
+				...state,
 				isFetching: true
 			};
 		case types.ROOMS.SUCCESS:
-			return { ...state,
+			return {
+				...state,
 				isFetching: false
 			};
 		case types.ROOMS.FAILURE:
-			return { ...state,
+			return {
+				...state,
 				isFetching: false,
 				failure: true,
 				errorMessage: action.err

app/reducers/server.js

@@ -12,18 +12,21 @@ const initialState = {
 export default function server(state = initialState, action) {
 	switch (action.type) {
 		case SERVER.REQUEST:
-			return { ...state,
+			return {
+				...state,
 				connecting: true,
 				failure: false
 			};
 		case SERVER.SUCCESS:
-			return { ...state,
+			return {
+				...state,
 				connecting: false,
 				connected: true,
 				failure: false
 			};
 		case SERVER.FAILURE:
-			return { ...state,
+			return {
+				...state,
 				connecting: false,
 				connected: false,
 				failure: true,

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

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Spinner from 'react-native-loading-spinner-overlay';
+// 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';
@@ -87,6 +87,7 @@ class LoginView extends React.Component {
 				keyboardVerticalOffset={128}
 			>
 				<View style={styles.loginView}>
+					<SafeAreaView>
 						<View style={styles.formContainer}>
 							<TextInput
 								style={styles.input_white}
@@ -138,7 +139,7 @@ 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' }} />
+					</SafeAreaView>
 				</View>
 			</KeyboardView>
 		);

app/views/Photo.js

@@ -27,7 +27,7 @@ export default class extends React.PureComponent {
 						style={{ ...styles.image }}
 						source={{ uri: encodeURI(image) }}
 						mutable
-						resizeMode={'contain'}
+						resizeMode='contain'
 					/>
 				</ScrollView>
 			</View>

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 = () => {
@@ -127,7 +133,8 @@ class RegisterView extends React.Component {
 						style={[styles.button, this._valid() ? {}
 							: { color: placeholderTextColor }
 						]}
-					>REGISTER</Text>
+					>REGISTER
+					</Text>
 				</TouchableOpacity>
 
 				{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
@@ -168,11 +175,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,10 @@ const styles = StyleSheet.create({
 		padding: 5,
 		paddingLeft: 10,
 		color: '#aaa'
+	},
+	safeAreaView: {
+		flex: 1,
+		backgroundColor: '#fff'
 	}
 });
 
@@ -90,10 +94,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 +247,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 +275,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,10 @@ const styles = StyleSheet.create({
 		alignItems: 'stretch',
 		justifyContent: 'center'
 	},
+	safeAreaView: {
+		flex: 1,
+		backgroundColor: '#FFFFFF'
+	},
 	list: {
 		width: '100%',
 		backgroundColor: '#FFFFFF'
@@ -84,10 +88,10 @@ export default class RoomsListView extends React.Component {
 			.filtered('_server.id = $0 AND t = $1', this.props.server, 'd');
 		this.state = {
 			dataSource: ds.cloneWithRows(this.data),
-			searching: false,
-			searchDataSource: [],
-			searchText: '',
-			login: false
+			// searching: false,
+			// searchDataSource: [],
+			searchText: ''
+			// login: false
 		};
 		this.data.addListener(this.updateState);
 	}
@@ -100,8 +104,8 @@ export default class RoomsListView extends React.Component {
 	onSearchChangeText = (text) => {
 		const searchText = text.trim();
 		this.setState({
-			searchText: text,
-			searching: searchText !== ''
+			searchText: text
+			// searching: searchText !== ''
 		});
 		if (searchText === '') {
 			return this.setState({
@@ -264,8 +268,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

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest",
-    "updateSnapshot": "jest --updateSnapshot",
+    "test-update": "jest --updateSnapshot",
     "lint": "eslint .",
     "ci": "eslint . && jest && codecov",
     "ios": "react-native run-ios",
@@ -16,60 +16,64 @@
   "dependencies": {
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-polyfill": "^6.26.0",
-    "moment": "^2.18.1",
-    "prop-types": "^15.5.10",
-    "react": "16.0.0-alpha.12",
+    "moment": "^2.19.2",
+    "prop-types": "^15.6.0",
+    "react": "16.1.0",
     "react-emojione": "^3.1.10",
-    "react-native": "0.46.1",
-    "react-native-action-button": "^2.7.2",
-    "react-native-animatable": "^1.2.3",
+    "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",
     "react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",
     "react-native-fetch-blob": "^0.10.8",
-    "react-native-image-picker": "^0.26.4",
-    "react-native-img-cache": "^1.4.0",
-    "react-native-keyboard-aware-scroll-view": "^0.3.0",
+    "react-native-image-picker": "^0.26.7",
+    "react-native-img-cache": "^1.5.0",
+    "react-native-keyboard-aware-scroll-view": "^0.4.1",
     "react-native-loading-spinner-overlay": "^0.5.2",
-    "react-native-meteor": "^1.1.0",
-    "react-native-modal": "^3.1.0",
-    "react-native-optimized-flatlist": "^1.0.1",
-    "react-native-svg": "^5.4.1",
-    "react-native-svg-image": "^1.1.4",
-    "react-native-vector-icons": "^4.3.0",
-    "react-native-zeroconf": "^0.8.1",
-    "react-navigation": "^1.0.0-beta.11",
+    "react-native-meteor": "^1.2.0",
+    "react-native-modal": "^4.1.1",
+    "react-native-optimized-flatlist": "^1.0.3",
+    "react-native-svg": "^6.0.0",
+    "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",
     "react-redux": "^5.0.6",
     "realm": "^1.10.1",
     "redux": "^3.7.2",
-    "redux-immutable-state-invariant": "^2.0.0",
+    "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"
   },
   "devDependencies": {
-    "@storybook/addon-storyshots": "^3.2.6",
-    "@storybook/react-native": "^3.2.4",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-preset-react-native": "2.1.0",
-    "codecov": "^2.3.0",
-    "eslint": "^4.4.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-import": "^2.7.0",
+    "@storybook/addon-storyshots": "^3.2.15",
+    "@storybook/react-native": "^3.2.15",
+    "babel-eslint": "^8.0.2",
+    "babel-jest": "21.2.0",
+    "babel-preset-react-native": "4.0.0",
+    "codecov": "^3.0.0",
+    "eslint": "^4.11.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.1.0",
-    "eslint-plugin-react-native": "^3.0.1",
-    "jest": "20.0.4",
-    "jest-cli": "^20.0.4",
-    "react-dom": "16.0.0-alpha.12",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-react-native": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "21.2.1",
+    "jest-cli": "^21.2.1",
+    "react-dom": "16.1.0",
+    "react-test-renderer": "16.1.0"
   },
   "jest": {
     "preset": "react-native",
     "coverageDirectory": "./coverage/",
-    "collectCoverage": true
+    "collectCoverage": true,
+    "moduleNameMapper": {
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+    }
   },
   "engines": {
     "node": ">=8.x",

storybook/stories/Avatar.js

@@ -5,9 +5,9 @@ import Avatar from '../../app/containers/Avatar';
 
 export default (
 	<ScrollView>
-		<Avatar text={'test'} />
-		<Avatar size={40} text={'aa'} />
-		<Avatar size={30} text={'bb'} />
-		<Avatar text={'test'} borderRadius={2} />
+		<Avatar text='test' />
+		<Avatar size={40} text='aa' />
+		<Avatar size={30} text='bb' />
+		<Avatar text='test' borderRadius={2} />
 	</ScrollView>
 );