[NEW] Support RTL (#2656)

* wip: RTL (iOS) * wip: RTL (Android) * wip: reload bundle when change between RTL languages * fix: Stack Animation on Android * fix: update snapshot * fix: Swipe Room Actions in RTL mode * fix: snapshots * Move isRTL to i18n * Fix styling * Update tests * Update pods Co-authored-by: Diego Mello <diegolmello@gmail.com>
RocketChat · Nov 30, 2020 · 10ba9d5 · 10ba9d5
1 parent 40490ea
commit 10ba9d5
Show file tree

Hide file tree

Showing 60 changed files with 20,708 additions and 18,485 deletions.
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -12,6 +12,7 @@
 		android:icon="@mipmap/ic_launcher"
 		android:theme="@style/AppTheme"
 		android:networkSecurityConfig="@xml/network_security_config"
+		android:supportsRtl="true"
 		android:requestLegacyExternalStorage="true"
 		android:allowBackup="false"
 		tools:replace="android:allowBackup"

diff --git a/app/containers/ActionSheet/styles.js b/app/containers/ActionSheet/styles.js
@@ -56,7 +56,7 @@ export default StyleSheet.create({
 	},
 	text: {
 		fontSize: 16,
-		textAlign: 'center',
-		...sharedStyles.textMedium
+		...sharedStyles.textMedium,
+		...sharedStyles.textAlignCenter
 	}
 });
diff --git a/app/containers/Button/index.js b/app/containers/Button/index.js
@@ -17,8 +17,8 @@ const styles = StyleSheet.create({
 	},
 	text: {
 		fontSize: 16,
-		textAlign: 'center',
-		...sharedStyles.textMedium
+		...sharedStyles.textMedium,
+		...sharedStyles.textAlignCenter
 	},
 	disabled: {
 		opacity: 0.3

diff --git a/app/containers/EmojiPicker/styles.js b/app/containers/EmojiPicker/styles.js
@@ -1,5 +1,7 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../../views/Styles';
+
 export default StyleSheet.create({
 	container: {
 		flex: 1
@@ -46,8 +48,8 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	categoryEmoji: {
+		...sharedStyles.textAlignCenter,
 		backgroundColor: 'transparent',
-		textAlign: 'center',
 		color: '#ffffff'
 	},
 	customCategoryEmoji: {

diff --git a/app/containers/List/ListIcon.js b/app/containers/List/ListIcon.js
@@ -13,8 +13,13 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListIcon = React.memo(({ theme, name, color }) => (
-	<View style={styles.icon}>
+const ListIcon = React.memo(({
+	theme,
+	name,
+	color,
+	style
+}) => (
+	<View style={[styles.icon, style]}>
 		<CustomIcon
 			name={name}
 			color={color ?? themes[theme].auxiliaryText}
@@ -26,7 +31,8 @@ const ListIcon = React.memo(({ theme, name, color }) => (
 ListIcon.propTypes = {
 	theme: PropTypes.string,
 	name: PropTypes.string,
-	color: PropTypes.string
+	color: PropTypes.string,
+	style: PropTypes.object
 };
 
 ListIcon.displayName = 'List.Icon';

diff --git a/app/containers/List/ListItem.js b/app/containers/List/ListItem.js
@@ -1,5 +1,10 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+	View,
+	Text,
+	StyleSheet,
+	I18nManager
+} from 'react-native';
 import PropTypes from 'prop-types';
 
 import Touch from '../../utils/touch';
@@ -39,6 +44,11 @@ const styles = StyleSheet.create({
 	subtitle: {
 		fontSize: 14,
 		...sharedStyles.textRegular
+	},
+	actionIndicator: {
+		...I18nManager.isRTL
+			? { transform: [{ rotate: '180deg' }] }
+			: {}
 	}
 });
 
@@ -64,7 +74,7 @@ const Content = React.memo(({
 			? (
 				<View style={styles.rightContainer}>
 					{right ? right() : null}
-					{showActionIndicator ? <Icon name='chevron-right' /> : null}
+					{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
 				</View>
 			)
 			: null}

diff --git a/app/containers/MessageActions/Header.js b/app/containers/MessageActions/Header.js
@@ -12,6 +12,7 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import database from '../../lib/database';
 import { Button } from '../ActionSheet';
 import { useDimensions } from '../../dimensions';
+import sharedStyles from '../../views/Styles';
 
 export const HEADER_HEIGHT = 36;
 const ITEM_SIZE = 36;
@@ -32,7 +33,7 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	headerIcon: {
-		textAlign: 'center',
+		...sharedStyles.textAlignCenter,
 		fontSize: 20,
 		color: '#fff'
 	},

diff --git a/app/containers/MessageBox/styles.js b/app/containers/MessageBox/styles.js
@@ -55,13 +55,13 @@ export default StyleSheet.create({
 		width: 46,
 		height: 36,
 		fontSize: isIOS ? 30 : 25,
-		textAlign: 'center'
+		...sharedStyles.textAlignCenter
 	},
 	fixedMentionAvatar: {
-		textAlign: 'center',
 		width: 46,
 		fontSize: 14,
-		...sharedStyles.textBold
+		...sharedStyles.textBold,
+		...sharedStyles.textAlignCenter
 	},
 	mentionText: {
 		fontSize: 14,

diff --git a/app/containers/ReactionsModal.js b/app/containers/ReactionsModal.js
@@ -23,9 +23,9 @@ const styles = StyleSheet.create({
 		paddingVertical: 10
 	},
 	title: {
-		textAlign: 'center',
 		fontSize: 16,
-		...sharedStyles.textSemibold
+		...sharedStyles.textSemibold,
+		...sharedStyles.textAlignCenter
 	},
 	reactCount: {
 		fontSize: 13,

diff --git a/app/containers/TextInput.js b/app/containers/TextInput.js
@@ -11,7 +11,7 @@ import ActivityIndicator from './ActivityIndicator';
 
 const styles = StyleSheet.create({
 	error: {
-		textAlign: 'center',
+		...sharedStyles.textAlignCenter,
 		paddingTop: 5
 	},
 	inputContainer: {
@@ -26,8 +26,7 @@ const styles = StyleSheet.create({
 		...sharedStyles.textRegular,
 		height: 48,
 		fontSize: 16,
-		paddingLeft: 14,
-		paddingRight: 14,
+		paddingHorizontal: 14,
 		borderWidth: StyleSheet.hairlineWidth,
 		borderRadius: 2
 	},

diff --git a/app/containers/Toast.js b/app/containers/Toast.js
@@ -14,9 +14,9 @@ const styles = StyleSheet.create({
 		padding: 10
 	},
 	text: {
-		...sharedStyles.textRegular,
 		fontSize: 14,
-		textAlign: 'center'
+		...sharedStyles.textRegular,
+		...sharedStyles.textAlignCenter
 	}
 });
 

diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js
@@ -211,7 +211,7 @@ class Markdown extends PureComponent {
 			return null;
 		}
 		return (
-			<Text style={[style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
+			<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);

diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js
@@ -140,7 +140,7 @@ export default StyleSheet.create({
 	},
 	time: {
 		fontSize: 12,
-		paddingLeft: 8,
+		marginLeft: 8,
 		...sharedStyles.textRegular
 	},
 	repliedThread: {

diff --git a/app/i18n/index.js b/app/i18n/index.js
@@ -2,6 +2,8 @@ import i18n from 'i18n-js';
 import { I18nManager } from 'react-native';
 import * as RNLocalize from 'react-native-localize';
 
+export * from './isRTL';
+
 export const LANGUAGES = [
 	{
 		label: 'English',
@@ -67,6 +69,8 @@ const availableLanguages = Object.keys(i18n.translations);
 const { languageTag, isRTL } = RNLocalize.findBestAvailableLanguage(availableLanguages) || defaultLanguage;
 
 I18nManager.forceRTL(isRTL);
+I18nManager.swapLeftAndRightInRTL(isRTL);
 i18n.locale = languageTag;
+i18n.isRTL = I18nManager.isRTL;
 
 export default i18n;
diff --git a/app/i18n/isRTL.js b/app/i18n/isRTL.js
@@ -0,0 +1,16 @@
+// https://github.com/zoontek/react-native-localize/blob/master/src/constants.ts#L5
+const USES_RTL_LAYOUT = [
+	'ar',
+	'ckb',
+	'fa',
+	'he',
+	'ks',
+	'lrc',
+	'mzn',
+	'ps',
+	'ug',
+	'ur',
+	'yi'
+];
+
+export const isRTL = locale => USES_RTL_LAYOUT.includes(locale);
diff --git a/app/presentation/RoomItem/Actions.js b/app/presentation/RoomItem/Actions.js
@@ -8,18 +8,18 @@ import styles, { ACTION_WIDTH, LONG_SWIPE } from './styles';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
 
+const reverse = new Animated.Value(I18n.isRTL ? -1 : 1);
+
 export const LeftActions = React.memo(({
 	theme, transX, isRead, width, onToggleReadPress
 }) => {
-	const translateX = transX.interpolate({
-		inputRange: [0, ACTION_WIDTH],
-		outputRange: [-ACTION_WIDTH, 0]
-	});
-	const translateXIcon = transX.interpolate({
-		inputRange: [0, ACTION_WIDTH, LONG_SWIPE - 2, LONG_SWIPE],
-		outputRange: [0, 0, -LONG_SWIPE + ACTION_WIDTH + 2, 0],
-		extrapolate: 'clamp'
-	});
+	const translateX = Animated.multiply(
+		transX.interpolate({
+			inputRange: [0, ACTION_WIDTH],
+			outputRange: [-ACTION_WIDTH, 0]
+		}),
+		reverse
+	);
 	return (
 		<View
 			style={[styles.actionsContainer, styles.actionLeftContainer]}
@@ -36,22 +36,14 @@ export const LeftActions = React.memo(({
 					}
 				]}
 			>
-				<Animated.View
-					style={[
-						styles.actionLeftButtonContainer,
-						{
-							right: 0,
-							transform: [{ translateX: translateXIcon }]
-						}
-					]}
-				>
+				<View style={styles.actionLeftButtonContainer}>
 					<RectButton style={styles.actionButton} onPress={onToggleReadPress}>
 						<>
 							<CustomIcon size={20} name={isRead ? 'flag' : 'check'} color='white' />
 							<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t(isRead ? 'Unread' : 'Read')}</Text>
 						</>
 					</RectButton>
-				</Animated.View>
+				</View>
 			</Animated.View>
 		</View>
 	);
@@ -60,14 +52,20 @@ export const LeftActions = React.memo(({
 export const RightActions = React.memo(({
 	transX, favorite, width, toggleFav, onHidePress, theme
 }) => {
-	const translateXFav = transX.interpolate({
-		inputRange: [-width / 2, -ACTION_WIDTH * 2, 0],
-		outputRange: [width / 2, width - ACTION_WIDTH * 2, width]
-	});
-	const translateXHide = transX.interpolate({
-		inputRange: [-width, -LONG_SWIPE, -ACTION_WIDTH * 2, 0],
-		outputRange: [0, width - LONG_SWIPE, width - ACTION_WIDTH, width]
-	});
+	const translateXFav = Animated.multiply(
+		transX.interpolate({
+			inputRange: [-width / 2, -ACTION_WIDTH * 2, 0],
+			outputRange: [width / 2, width - ACTION_WIDTH * 2, width]
+		}),
+		reverse
+	);
+	const translateXHide = Animated.multiply(
+		transX.interpolate({
+			inputRange: [-width, -LONG_SWIPE, -ACTION_WIDTH * 2, 0],
+			outputRange: [0, width - LONG_SWIPE, width - ACTION_WIDTH, width]
+		}),
+		reverse
+	);
 	return (
 		<View
 			style={{