[CHORE] Switch to react-native-localize

__mocks__/react-native-localize.js

@@ -0,0 +1,2 @@
+export const initialConstants = null;
+export const findBestAvailableLanguage = () => null;

android/app/build.gradle

@@ -185,7 +185,7 @@ dependencies {
     })
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-image-crop-picker')
-    implementation project(':react-native-i18n')
+    implementation project(':react-native-localize')
     implementation project(':react-native-audio')
     implementation project(":reactnativekeyboardinput")
     implementation project(':react-native-video')

android/app/src/main/java/chat/rocket/reactnative/MainApplication.java

@@ -15,7 +15,7 @@
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 
-import com.AlexanderZaytsev.RNI18n.RNI18nPackage;
+import com.reactcommunity.rnlocalize.RNLocalizePackage;
 import com.reactnative.ivpusic.imagepicker.PickerPackage;
 import com.brentvatne.react.ReactVideoPackage;
 import com.dylanvann.fastimage.FastImageViewPackage;
@@ -78,7 +78,7 @@ protected List<ReactPackage> getPackages() {
 					new ReactNativeAudioPackage(),
 					new KeyboardInputPackage(MainApplication.this),
 					new FastImageViewPackage(),
-					new RNI18nPackage(),
+					new RNLocalizePackage(),
           new RNNotificationsPackage(MainApplication.this),
           new ModuleRegistryAdapter(mModuleRegistryProvider)
       );

android/settings.gradle

@@ -20,8 +20,8 @@ include ':react-native-gesture-handler'
 project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-image-crop-picker'
 project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')
-include ':react-native-i18n'
-project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-i18n/android')
+include ':react-native-localize'
+project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android')
 include ':react-native-fast-image'
 project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
 include ':react-native-audio'

app/containers/MessageBox/index.js

@@ -46,20 +46,11 @@ const onlyUnique = function onlyUnique(value, index, self) {
 const imagePickerConfig = {
 	cropping: true,
 	compressImageQuality: 0.8,
-	avoidEmptySpaceAroundImage: false,
-	cropperChooseText: I18n.t('Choose'),
-	cropperCancelText: I18n.t('Cancel')
+	avoidEmptySpaceAroundImage: false
 };
 
-const fileOptions = [I18n.t('Cancel')];
 const FILE_CANCEL_INDEX = 0;
-
-// Photo
-fileOptions.push(I18n.t('Take_a_photo'));
 const FILE_PHOTO_INDEX = 1;
-
-// Library
-fileOptions.push(I18n.t('Choose_from_library'));
 const FILE_LIBRARY_INDEX = 2;
 
 class MessageBox extends Component {
@@ -107,6 +98,16 @@ class MessageBox extends Component {
 		this.customEmojis = [];
 		this.onEmojiSelected = this.onEmojiSelected.bind(this);
 		this.text = '';
+		this.fileOptions = [
+			I18n.t('Cancel'),
+			I18n.t('Take_a_photo'),
+			I18n.t('Choose_from_library')
+		];
+		this.imagePickerConfig = {
+			...imagePickerConfig,
+			cropperChooseText: I18n.t('Choose'),
+			cropperCancelText: I18n.t('Cancel')
+		};
 	}
 
 	componentDidMount() {
@@ -483,7 +484,7 @@ class MessageBox extends Component {
 
 	takePhoto = async() => {
 		try {
-			const image = await ImagePicker.openCamera(imagePickerConfig);
+			const image = await ImagePicker.openCamera(this.imagePickerConfig);
 			this.showUploadModal(image);
 		} catch (e) {
 			log('err_take_photo', e);
@@ -492,7 +493,7 @@ class MessageBox extends Component {
 
 	chooseFromLibrary = async() => {
 		try {
-			const image = await ImagePicker.openPicker(imagePickerConfig);
+			const image = await ImagePicker.openPicker(this.imagePickerConfig);
 			this.showUploadModal(image);
 		} catch (e) {
 			log('err_choose_from_library', e);
@@ -505,7 +506,7 @@ class MessageBox extends Component {
 
 	showFileActions = () => {
 		ActionSheet.showActionSheetWithOptions({
-			options: fileOptions,
+			options: this.fileOptions,
 			cancelButtonIndex: FILE_CANCEL_INDEX
 		}, (actionIndex) => {
 			this.handleFileActionPress(actionIndex);

app/i18n/index.js

@@ -1,4 +1,7 @@
-import I18n from 'react-native-i18n';
+import i18n from 'i18n-js';
+import { I18nManager } from 'react-native';
+import * as RNLocalize from 'react-native-localize';
+
 import en from './locales/en';
 import ru from './locales/ru';
 import fr from './locales/fr';
@@ -7,11 +10,22 @@ import ptBR from './locales/pt-BR';
 import zhCN from './locales/zh-CN';
 import ptPT from './locales/pt-PT';
 
-I18n.fallbacks = true;
-I18n.defaultLocale = 'en';
-
-I18n.translations = {
-	en, ru, 'pt-BR': ptBR, 'zh-CN': zhCN, fr, de, 'pt-PT': ptPT
+i18n.translations = {
+	en,
+	ru,
+	'pt-BR': ptBR,
+	'zh-CN': zhCN,
+	fr,
+	de,
+	'pt-PT': ptPT
 };
+i18n.fallbacks = true;
+
+const defaultLanguage = { languageTag: 'en', isRTL: false };
+const availableLanguages = Object.keys(i18n.translations);
+const { languageTag, isRTL } = RNLocalize.findBestAvailableLanguage(availableLanguages) || defaultLanguage;
+
+I18nManager.forceRTL(isRTL);
+i18n.locale = languageTag;
 
-export default I18n;
+export default i18n;

app/presentation/RoomItem/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import { View, Text, Animated } from 'react-native';
 import { RectButton, PanGestureHandler, State } from 'react-native-gesture-handler';
@@ -12,6 +11,7 @@ import styles, {
 import UnreadBadge from './UnreadBadge';
 import TypeIcon from './TypeIcon';
 import LastMessage from './LastMessage';
+import { capitalize, formatDate } from '../../utils/room';
 import { LeftActions, RightActions } from './Actions';
 
 export { ROW_HEIGHT };
@@ -203,19 +203,12 @@ export default class RoomItem extends React.Component {
 		}
 	}
 
-	formatDate = date => moment(date).calendar(null, {
-		lastDay: `[${ I18n.t('Yesterday') }]`,
-		sameDay: 'h:mm A',
-		lastWeek: 'dddd',
-		sameElse: 'MMM D'
-	})
-
 	render() {
 		const {
 			unread, userMentions, name, _updatedAt, alert, testID, type, avatarSize, baseUrl, userId, username, token, id, prid, showLastMessage, lastMessage, isRead, width, favorite
 		} = this.props;
 
-		const date = this.formatDate(_updatedAt);
+		const date = formatDate(_updatedAt);
 
 		let accessibilityLabel = name;
 		if (unread === 1) {
@@ -275,7 +268,7 @@ export default class RoomItem extends React.Component {
 									<View style={styles.titleContainer}>
 										<TypeIcon type={type} id={id} prid={prid} />
 										<Text style={[styles.title, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
-										{_updatedAt ? <Text style={[styles.date, alert && styles.updateAlert]} ellipsizeMode='tail' numberOfLines={1}>{ date }</Text> : null}
+										{_updatedAt ? <Text style={[styles.date, alert && styles.updateAlert]} ellipsizeMode='tail' numberOfLines={1}>{ capitalize(date) }</Text> : null}
 									</View>
 									<View style={styles.row}>
 										<LastMessage lastMessage={lastMessage} type={type} showLastMessage={showLastMessage} username={username} alert={alert} />

app/utils/room.js

@@ -0,0 +1,15 @@
+import moment from 'moment';
+
+import I18n from '../i18n';
+
+export const capitalize = (s) => {
+	if (typeof s !== 'string') { return ''; }
+	return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+export const formatDate = date => moment(date).calendar(null, {
+	lastDay: `[${ I18n.t('Yesterday') }]`,
+	sameDay: 'LT',
+	lastWeek: 'dddd',
+	sameElse: 'MMM D'
+});

app/views/RoomsListView/index.js

@@ -7,6 +7,8 @@ import { connect } from 'react-redux';
 import { isEqual } from 'lodash';
 import { SafeAreaView } from 'react-navigation';
 import Orientation from 'react-native-orientation-locker';
+import moment from 'moment';
+import 'moment/min/locales';
 
 import database, { safeAddListener } from '../../lib/realm';
 import RocketChat from '../../lib/rocketchat';
@@ -54,7 +56,8 @@ const keyExtractor = item => item.rid;
 	showUnread: state.sortPreferences.showUnread,
 	useRealName: state.settings.UI_Use_Real_Name,
 	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
-	StoreLastMessage: state.settings.Store_Last_Message
+	StoreLastMessage: state.settings.Store_Last_Message,
+	userLanguage: state.login.user && state.login.user.language
 }), dispatch => ({
 	toggleSortDropdown: () => dispatch(toggleSortDropdownAction()),
 	openSearchHeader: () => dispatch(openSearchHeaderAction()),
@@ -117,7 +120,8 @@ export default class RoomsListView extends React.Component {
 		closeSearchHeader: PropTypes.func,
 		appStart: PropTypes.func,
 		roomsRequest: PropTypes.func,
-		isAuthenticated: PropTypes.bool
+		isAuthenticated: PropTypes.bool,
+		userLanguage: PropTypes.string
 	}
 
 	constructor(props) {
@@ -148,7 +152,8 @@ export default class RoomsListView extends React.Component {
 
 	componentDidMount() {
 		this.getSubscriptions();
-		const { navigation } = this.props;
+		const { navigation, userLanguage } = this.props;
+		moment.locale(userLanguage);
 		navigation.setParams({
 			onPressItem: this._onPressItem,
 			initSearchingAndroid: this.initSearchingAndroid,

ios/Podfile

@@ -27,6 +27,7 @@ target 'RocketChatRN' do
 
   pod 'RNImageCropPicker', :path =>  '../node_modules/react-native-image-crop-picker'
   pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
+  pod 'RNLocalize', :path => '../node_modules/react-native-localize'
 
   pod 'RNScreens', :path => '../node_modules/react-native-screens'
 

ios/Podfile.lock

@@ -147,6 +147,8 @@ PODS:
     - QBImagePickerController
     - React/Core
     - RSKImageCropper
+  - RNLocalize (1.1.4):
+    - React
   - RNScreens (1.0.0-alpha.22):
     - React
   - RSKImageCropper (2.2.1)
@@ -197,6 +199,7 @@ DEPENDENCIES:
   - React/RCTWebSocket (from `../node_modules/react-native`)
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
+  - RNLocalize (from `../node_modules/react-native-localize`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - UMBarCodeScannerInterface (from `../node_modules/unimodules-barcode-scanner-interface/ios`)
   - UMCameraInterface (from `../node_modules/unimodules-camera-interface/ios`)
@@ -271,6 +274,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-device-info"
   RNImageCropPicker:
     :path: "../node_modules/react-native-image-crop-picker"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   UMBarCodeScannerInterface:
@@ -346,6 +351,7 @@ SPEC CHECKSUMS:
   react-native-webview: f3e28b48461c78db833f727feec08b13285e7b61
   RNDeviceInfo: 958a1ed6f94e04557b865b8ef848cfc83db0ebba
   RNImageCropPicker: e608efe182652dc8690268cb99cb5a201f2b5ea3
+  RNLocalize: 62a949d2ec5bee0eb8f39a80a48f01e2f4f67080
   RNScreens: 720a9e6968beb73e8196239801e887d8401f86ed
   RSKImageCropper: 98296ad26b41753f796b6898d015509598f13d97
   UMBarCodeScannerInterface: d5602e23de37f95bb4ee49ee3b2711e128058ae9
@@ -362,6 +368,6 @@ SPEC CHECKSUMS:
   UMTaskManagerInterface: 296793ab2a7e181fe5ebe2ba9b40ae208ab4b8fa
   yoga: 92b2102c3d373d1a790db4ab761d2b0ffc634f64
 
-PODFILE CHECKSUM: b5e15bac5f306ea636e16393a7a6eb42c017ea99
+PODFILE CHECKSUM: e913a7016ba7fbc295edc5178996383a1f54742e
 
 COCOAPODS: 1.6.2