Update dependencies (#587)

__mocks__/react-native-device-info.js

@@ -0,0 +1,4 @@
+export default {
+	getModel: () => '',
+	getReadableVersion: () => ''
+};

__mocks__/react-native-navigation.js

@@ -1,4 +1,17 @@
-export const Navigation = {
-	registerComponent: () => {},
-	startSingleScreenApp: () => {}
+class Events {
+	registerAppLaunchedListener = () => {}
+}
+const events = new Events();
+class NavigationClass {
+	registerComponent = () => {}
+
+	setRoot = () => {}
+
+	events = () => events
+}
+
+const Navigation = new NavigationClass();
+
+export {
+	Navigation
 };

app/Icons.js

@@ -1,7 +1,6 @@
-import { Platform } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { isIOS } from './utils/deviceInfo';
 
-const isIOS = Platform.OS === 'ios';
 const prefix = isIOS ? 'ios' : 'md';
 
 // icon name from provider: [ size of the uri, icon provider, name to be used later ]

app/constants/headerOptions.js

@@ -7,6 +7,7 @@ export const DARK_HEADER = {
 	},
 	topBar: {
 		backButton: {
+			showTitle: false,
 			color: '#fff'
 		},
 		background: {
@@ -31,6 +32,7 @@ export const LIGHT_HEADER = {
 	},
 	topBar: {
 		backButton: {
+			showTitle: false,
 			color: '#1d74f5'
 		},
 		background: {

app/containers/EmojiPicker/EmojiCategory.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, TouchableOpacity, Platform } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
 import { emojify } from 'react-emojione';
 import { responsive } from 'react-native-responsive-ui';
 import { OptimizedFlatList } from 'react-native-optimized-flatlist';
+
 import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
+import { isIOS } from '../../utils/deviceInfo';
 
-const EMOJIS_PER_ROW = Platform.OS === 'ios' ? 8 : 9;
+const EMOJIS_PER_ROW = isIOS ? 8 : 9;
 
 const renderEmoji = (emoji, size, baseUrl) => {
 	if (emoji.isCustom) {

app/containers/MessageBox/Recording.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, SafeAreaView, Platform, PermissionsAndroid, Text
+	View, SafeAreaView, PermissionsAndroid, Text
 } from 'react-native';
 import { AudioRecorder, AudioUtils } from 'react-native-audio';
 import { BorderlessButton } from 'react-native-gesture-handler';
-
 import Icon from 'react-native-vector-icons/MaterialIcons';
+
 import styles from './styles';
 import I18n from '../../i18n';
+import { isIOS, isAndroid } from '../../utils/deviceInfo';
 
 export const _formatTime = function(seconds) {
 	let minutes = Math.floor(seconds / 60);
@@ -20,7 +21,7 @@ export const _formatTime = function(seconds) {
 
 export default class extends React.PureComponent {
 	static async permission() {
-		if (Platform.OS !== 'android') {
+		if (!isAndroid) {
 			return true;
 		}
 
@@ -64,7 +65,7 @@ export default class extends React.PureComponent {
 		};
 		//
 		AudioRecorder.onFinished = (data) => {
-			if (!this.recordingCanceled && Platform.OS === 'ios') {
+			if (!this.recordingCanceled && isIOS) {
 				this.finishRecording(data.status === 'OK', data.audioFileURL);
 			}
 		};
@@ -96,7 +97,7 @@ export default class extends React.PureComponent {
 		try {
 			this.recording = false;
 			const filePath = await AudioRecorder.stopRecording();
-			if (Platform.OS === 'android') {
+			if (isAndroid) {
 				this.finishRecording(true, filePath);
 			}
 		} catch (err) {

app/containers/MessageBox/UploadModal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-	View, Text, StyleSheet, Image, ScrollView, Platform, TouchableHighlight
+	View, Text, StyleSheet, Image, ScrollView, TouchableHighlight
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
@@ -11,6 +11,7 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
+import { isIOS } from '../../utils/deviceInfo';
 
 const cancelButtonColor = '#f7f8fa';
 
@@ -120,7 +121,7 @@ export default class UploadModal extends Component {
 
 	renderButtons = () => {
 		const { close } = this.props;
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			return (
 				<View style={styles.buttonContainer}>
 					<Button

app/containers/MessageBox/styles.js

@@ -1,4 +1,6 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { isIOS } from '../../utils/deviceInfo';
 
 const MENTION_HEIGHT = 50;
 
@@ -66,7 +68,7 @@ export default StyleSheet.create({
 	mentionItemEmoji: {
 		width: 46,
 		height: 36,
-		fontSize: Platform.OS === 'ios' ? 30 : 25,
+		fontSize: isIOS ? 30 : 25,
 		textAlign: 'center'
 	},
 	fixedMentionAvatar: {

app/containers/SearchBox.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import {
-	View, StyleSheet, Image, TextInput, Platform
+	View, StyleSheet, Image, TextInput
 } from 'react-native';
 import PropTypes from 'prop-types';
 
 import I18n from '../i18n';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
-		backgroundColor: Platform.OS === 'ios' ? '#F7F8FA' : '#54585E'
+		backgroundColor: isIOS ? '#F7F8FA' : '#54585E'
 	},
 	searchBox: {
 		alignItems: 'center',

app/containers/Sidebar.js

@@ -18,7 +18,7 @@ import RocketChat from '../lib/rocketchat';
 import log from '../utils/log';
 import I18n from '../i18n';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
-import DeviceInfo from '../utils/deviceInfo';
+import { getReadableVersion } from '../utils/deviceInfo';
 import Drawer from '../Drawer';
 
 const styles = StyleSheet.create({
@@ -363,7 +363,7 @@ export default class Sidebar extends Component {
 					{showStatus ? this.renderStatus() : null}
 				</ScrollView>
 				<Text style={styles.version}>
-					{DeviceInfo.getReadableVersion()}
+					{getReadableVersion}
 				</Text>
 			</SafeAreaView>
 		);

app/containers/message/Video.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	StyleSheet, Image, Platform, View
+	StyleSheet, Image, View
 } from 'react-native';
 import Modal from 'react-native-modal';
 import VideoPlayer from 'react-native-video-controls';
 import { RectButton } from 'react-native-gesture-handler';
 
 import Markdown from './Markdown';
 import openLink from '../../utils/openLink';
+import { isIOS } from '../../utils/deviceInfo';
 
-const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(Platform.OS === 'ios' ? [] : ['video/webm', 'video/3gp', 'video/mkv'])];
+const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/webm', 'video/3gp', 'video/mkv'])];
 const isTypeSupported = type => SUPPORTED_TYPES.indexOf(type) !== -1;
 
 const styles = StyleSheet.create({

app/index.js

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Linking, Platform } from 'react-native';
+import { Linking } from 'react-native';
 import { Navigation } from 'react-native-navigation';
 import { Provider } from 'react-redux';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
@@ -11,6 +11,7 @@ import { registerScreens } from './views';
 import { deepLinkingOpen } from './actions/deepLinking';
 import parseQuery from './lib/methods/helpers/parseQuery';
 import { initializePushNotifications } from './push';
+import { DEFAULT_HEADER } from './constants/headerOptions';
 
 const startLogged = () => {
 	Navigation.setRoot({
@@ -103,20 +104,7 @@ export default class App extends Component {
 
 		Navigation.events().registerAppLaunchedListener(() => {
 			Navigation.setDefaultOptions({
-				topBar: {
-					backButton: {
-						showTitle: false
-					},
-					leftButtonStyle: {
-						color: '#FFF'
-					},
-					rightButtonStyle: {
-						color: '#FFF'
-					},
-					title: {
-						fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif-medium'
-					}
-				},
+				...DEFAULT_HEADER,
 				sideMenu: {
 					left: {
 						enabled: false

app/lib/rocketchat.js

@@ -1,4 +1,4 @@
-import { AsyncStorage, Platform } from 'react-native';
+import { AsyncStorage } from 'react-native';
 import foreach from 'lodash/forEach';
 import * as SDK from '@rocket.chat/sdk';
 import semver from 'semver';
@@ -8,6 +8,7 @@ import defaultSettings from '../constants/settings';
 import messagesStatus from '../constants/messagesStatus';
 import database from './realm';
 import log from '../utils/log';
+import { isIOS } from '../utils/deviceInfo';
 
 import {
 	setUser, setLoginServices, loginRequest, loginFailure, logout
@@ -360,7 +361,7 @@ const RocketChat = {
 		return new Promise((resolve) => {
 			const token = getDeviceToken();
 			if (token) {
-				const type = Platform.OS === 'ios' ? 'apn' : 'gcm';
+				const type = isIOS ? 'apn' : 'gcm';
 				const data = {
 					value: token,
 					type,

app/presentation/RoomItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import {
-	View, Text, StyleSheet, Image, Platform
+	View, Text, StyleSheet, Image
 } from 'react-native';
 import { connect } from 'react-redux';
 import { emojify } from 'react-emojione';
@@ -13,6 +13,7 @@ import Status from '../containers/status';
 import Touch from '../utils/touch/index'; //eslint-disable-line
 import RoomTypeIcon from '../containers/RoomTypeIcon';
 import I18n from '../i18n';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
@@ -43,7 +44,7 @@ const styles = StyleSheet.create({
 	},
 	titleContainer: {
 		width: '100%',
-		marginTop: Platform.OS === 'ios' ? 5 : 2,
+		marginTop: isIOS ? 5 : 2,
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center'
@@ -226,7 +227,7 @@ export default class RoomItem extends React.Component {
 	})
 
 	renderDisclosureIndicator = () => {
-		if (Platform.OS === 'ios') {
+		if (isIOS) {
 			return (
 				<View style={styles.disclosureContainer}>
 					<Image source={{ uri: 'disclosure_indicator' }} style={styles.disclosureIndicator} />

app/presentation/UserItem.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import {
-	Text, View, StyleSheet, Platform, ViewPropTypes, Image
+	Text, View, StyleSheet, ViewPropTypes, Image
 } from 'react-native';
 import PropTypes from 'prop-types';
 
 import Avatar from '../containers/Avatar';
 import Touch from '../utils/touch';
+import { isIOS } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	button: {
@@ -26,7 +27,7 @@ const styles = StyleSheet.create({
 	name: {
 		fontSize: 18,
 		color: '#0C0D0F',
-		marginTop: Platform.OS === 'ios' ? 6 : 3,
+		marginTop: isIOS ? 6 : 3,
 		marginBottom: 1,
 		textAlign: 'left'
 	},

app/utils/deviceInfo.js

@@ -1,9 +1,16 @@
+import { Platform } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
 const NOTCH_DEVICES = ['iPhone X', 'iPhone XS', 'iPhone XS Max', 'iPhone XR'];
 
+export const isNotch = NOTCH_DEVICES.includes(DeviceInfo.getModel());
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = !isIOS;
+export const getReadableVersion = DeviceInfo.getReadableVersion();
+
 export default {
-	isNotch: () => NOTCH_DEVICES.includes(DeviceInfo.getModel()),
-	getBrand: () => DeviceInfo.getBrand(),
-	getReadableVersion: () => DeviceInfo.getReadableVersion()
+	isNotch,
+	isIOS,
+	isAndroid,
+	getReadableVersion
 };

app/views/CreateChannelView.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
-	View, Text, Switch, ScrollView, TextInput, StyleSheet, FlatList, Platform
+	View, Text, Switch, ScrollView, TextInput, StyleSheet, FlatList
 } from 'react-native';
 import { Navigation } from 'react-native-navigation';
 import SafeAreaView from 'react-native-safe-area-view';
@@ -18,7 +18,7 @@ import scrollPersistTaps from '../utils/scrollPersistTaps';
 import I18n from '../i18n';
 import UserItem from '../presentation/UserItem';
 import { showErrorAlert } from '../utils/info';
-import { DEFAULT_HEADER } from '../constants/headerOptions';
+import { isAndroid } from '../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	container: {
@@ -89,11 +89,8 @@ const styles = StyleSheet.create({
 export default class CreateChannelView extends LoggedView {
 	static options() {
 		return {
-			...DEFAULT_HEADER,
 			topBar: {
-				...DEFAULT_HEADER.topBar,
 				title: {
-					...DEFAULT_HEADER.topBar.title,
 					text: I18n.t('Create_Channel')
 				}
 			}
@@ -207,7 +204,7 @@ export default class CreateChannelView extends LoggedView {
 				id: 'create',
 				text: 'Create',
 				testID: 'create-channel-submit',
-				color: Platform.OS === 'android' ? '#FFF' : undefined
+				color: isAndroid ? '#FFF' : undefined
 			});
 		}
 		Navigation.mergeOptions(componentId, {
@@ -261,7 +258,7 @@ export default class CreateChannelView extends LoggedView {
 				onValueChange={onValueChange}
 				testID={`create-channel-${ id }`}
 				onTintColor='#2de0a5'
-				tintColor={Platform.OS === 'android' ? '#f5455c' : null}
+				tintColor={isAndroid ? '#f5455c' : null}
 				disabled={disabled}
 			/>
 		</View>