[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>

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"

app/containers/ActionSheet/styles.js

@@ -56,7 +56,7 @@ export default StyleSheet.create({
 	},
 	text: {
 		fontSize: 16,
-		textAlign: 'center',
-		...sharedStyles.textMedium
+		...sharedStyles.textMedium,
+		...sharedStyles.textAlignCenter
 	}
 });

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

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: {

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';

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}

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'
 	},

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,

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,

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
 	},

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
 	}
 });
 

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>
 		);

app/containers/message/styles.js

@@ -140,7 +140,7 @@ export default StyleSheet.create({
 	},
 	time: {
 		fontSize: 12,
-		paddingLeft: 8,
+		marginLeft: 8,
 		...sharedStyles.textRegular
 	},
 	repliedThread: {

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;

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);

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({
+	const translateX = Animated.multiply(
+		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'
-	});
+		}),
+		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({
+	const translateXFav = Animated.multiply(
+		transX.interpolate({
 			inputRange: [-width / 2, -ACTION_WIDTH * 2, 0],
 			outputRange: [width / 2, width - ACTION_WIDTH * 2, width]
-	});
-	const translateXHide = transX.interpolate({
+		}),
+		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={{

app/presentation/RoomItem/Touchable.js

@@ -9,6 +9,7 @@ import {
 	SMALL_SWIPE,
 	LONG_SWIPE
 } from './styles';
+import I18n from '../../i18n';
 import { themes } from '../../constants/colors';
 import { LeftActions, RightActions } from './Actions';
 
@@ -34,10 +35,15 @@ class Touchable extends React.Component {
 		super(props);
 		this.dragX = new Animated.Value(0);
 		this.rowOffSet = new Animated.Value(0);
+		this.reverse = new Animated.Value(I18n.isRTL ? -1 : 1);
 		this.transX = Animated.add(
 			this.rowOffSet,
 			this.dragX
 		);
+		this.transXReverse = Animated.multiply(
+			this.transX,
+			this.reverse
+		);
 		this.state = {
 			rowState: 0 // 0: closed, 1: right opened, -1: left opened
 		};
@@ -62,18 +68,36 @@ class Touchable extends React.Component {
 			let toValue = 0;
 			if (rowState === 0) { // if no option is opened
 				if (translationX > 0 && translationX < LONG_SWIPE) {
-					toValue = ACTION_WIDTH; // open left option if he swipe right but not enough to trigger action
+					// open leading option if he swipe right but not enough to trigger action
+					if (I18n.isRTL) {
+						toValue = 2 * ACTION_WIDTH;
+					} else {
+						toValue = ACTION_WIDTH;
+					}
 					this.setState({ rowState: -1 });
 				} else if (translationX >= LONG_SWIPE) {
 					toValue = 0;
+					if (I18n.isRTL) {
+						this.hideChannel();
+					} else {
 						this.toggleRead();
+					}
 				} else if (translationX < 0 && translationX > -LONG_SWIPE) {
-					toValue = -2 * ACTION_WIDTH; // open right option if he swipe left
+					// open trailing option if he swipe left
+					if (I18n.isRTL) {
+						toValue = -ACTION_WIDTH;
+					} else {
+						toValue = -2 * ACTION_WIDTH;
+					}
 					this.setState({ rowState: 1 });
 				} else if (translationX <= -LONG_SWIPE) {
 					toValue = 0;
 					this.setState({ rowState: 0 });
+					if (I18n.isRTL) {
+						this.toggleRead();
+					} else {
 						this.hideChannel();
+					}
 				} else {
 					toValue = 0;
 				}
@@ -86,7 +110,13 @@ class Touchable extends React.Component {
 				} else if (this._value > LONG_SWIPE) {
 					toValue = 0;
 					this.setState({ rowState: 0 });
+					if (I18n.isRTL) {
+						this.hideChannel();
+					} else {
 						this.toggleRead();
+					}
+				} else if (I18n.isRTL) {
+					toValue = 2 * ACTION_WIDTH;
 				} else {
 					toValue = ACTION_WIDTH;
 				}
@@ -99,7 +129,13 @@ class Touchable extends React.Component {
 				} else if (this._value < -LONG_SWIPE) {
 					toValue = 0;
 					this.setState({ rowState: 0 });
+					if (I18n.isRTL) {
+						this.toggleRead();
+					} else {
 						this.hideChannel();
+					}
+				} else if (I18n.isRTL) {
+					toValue = -ACTION_WIDTH;
 				} else {
 					toValue = -2 * ACTION_WIDTH;
 				}
@@ -182,14 +218,14 @@ class Touchable extends React.Component {
 				>
 					<Animated.View>
 						<LeftActions
-							transX={this.transX}
+							transX={this.transXReverse}
 							isRead={isRead}
 							width={width}
 							onToggleReadPress={this.onToggleReadPress}
 							theme={theme}
 						/>
 						<RightActions
-							transX={this.transX}
+							transX={this.transXReverse}
 							favorite={favorite}
 							width={width}
 							toggleFav={this.toggleFav}

app/presentation/RoomItem/styles.js

@@ -84,7 +84,8 @@ export default StyleSheet.create({
 		position: 'absolute',
 		height: ROW_HEIGHT,
 		justifyContent: 'center',
-		top: 0
+		top: 0,
+		right: 0
 	},
 	actionRightButtonContainer: {
 		position: 'absolute',

app/presentation/TextInput.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import { TextInput } from 'react-native';
+import { TextInput, StyleSheet, I18nManager } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
 
+const styles = StyleSheet.create({
+	input: {
+		...I18nManager.isRTL
+			? { textAlign: 'right' }
+			: { textAlign: 'left' }
+	}
+});
+
 const ThemedTextInput = React.forwardRef(({ style, theme, ...props }, ref) => (
 	<TextInput
 		ref={ref}
-		style={[{ color: themes[theme].titleText }, style]}
+		style={[{ color: themes[theme].titleText }, style, styles.input]}
 		placeholderTextColor={themes[theme].auxiliaryText}
 		keyboardAppearance={theme === 'light' ? 'light' : 'dark'}
 		{...props}

app/sagas/login.js

@@ -5,6 +5,7 @@ import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import moment from 'moment';
 import 'moment/min/locales';
 import { Q } from '@nozbe/watermelondb';
+import { I18nManager } from 'react-native';
 
 import * as types from '../actions/actionsTypes';
 import {
@@ -18,7 +19,7 @@ import { roomsRequest } from '../actions/rooms';
 import { toMomentLocale } from '../utils/moment';
 import RocketChat from '../lib/rocketchat';
 import log, { logEvent, events } from '../utils/log';
-import I18n, { LANGUAGES } from '../i18n';
+import I18n, { LANGUAGES, isRTL } from '../i18n';
 import database from '../lib/database';
 import EventEmitter from '../utils/events';
 import { inviteLinksRequest } from '../actions/inviteLinks';
@@ -275,6 +276,8 @@ const handleSetUser = function* handleSetUser({ user }) {
 	if (user && user.language) {
 		const locale = LANGUAGES.find(l => l.value.toLowerCase() === user.language)?.value || user.language;
 		I18n.locale = locale;
+		I18nManager.forceRTL(isRTL(locale));
+		I18nManager.swapLeftAndRightInRTL(isRTL(locale));
 		moment.locale(toMomentLocale(locale));
 	}
 

app/stacks/InsideStack.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { I18nManager } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
@@ -282,6 +283,7 @@ const Drawer = createDrawerNavigator();
 const DrawerNavigator = () => (
 	<Drawer.Navigator
 		drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
+		drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
 		screenOptions={{ swipeEnabled: false }}
 		drawerType='back'
 	>

app/utils/navigation/animations.js

@@ -64,13 +64,10 @@ const forStackAndroid = ({
 		inverted
 	);
 
-	const opacity = multiply(
-		current.progress.interpolate({
+	const opacity = current.progress.interpolate({
 		inputRange: [0, 1],
 		outputRange: [0, 1]
-		}),
-		inverted
-	);
+	});
 
 	return {
 		cardStyle: {

app/views/LanguageView/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FlatList } from 'react-native';
 import { connect } from 'react-redux';
+import RNRestart from 'react-native-restart';
 
 import RocketChat from '../../lib/rocketchat';
-import I18n, { LANGUAGES } from '../../i18n';
+import I18n, { LANGUAGES, isRTL } from '../../i18n';
 import { showErrorAlert } from '../../utils/info';
 import log, { logEvent, events } from '../../utils/log';
 import { setUser as setUserAction } from '../../actions/login';
@@ -61,15 +62,21 @@ class LanguageView extends React.Component {
 			return;
 		}
 
-		const { appStart } = this.props;
+		const { appStart, user } = this.props;
+
+		const shouldRestart = isRTL(language) || isRTL(user.language);
 
 		await appStart({ root: ROOT_LOADING, text: I18n.t('Change_language_loading') });
 
 		// shows loading for at least 300ms
 		await Promise.all([this.changeLanguage(language), new Promise(resolve => setTimeout(resolve, 300))]);
 
+		if (shouldRestart) {
+			await RNRestart.Restart();
+		} else {
 			await appStart({ root: ROOT_INSIDE });
 		}
+	}
 
 	changeLanguage = async(language) => {
 		logEvent(events.LANG_SET_LANGUAGE);

app/views/OnboardingView/styles.js

@@ -29,9 +29,9 @@ export default StyleSheet.create({
 	},
 	description: {
 		...sharedStyles.textRegular,
+		...sharedStyles.textAlignCenter,
 		fontSize: moderateScale(14),
 		alignSelf: 'center',
-		textAlign: 'center',
 		marginHorizontal: 20
 	},
 	buttonsContainer: {

app/views/PickerView.js

@@ -22,8 +22,8 @@ const styles = StyleSheet.create({
 	noResult: {
 		fontSize: 16,
 		paddingVertical: 56,
-		...sharedStyles.textAlignCenter,
-		...sharedStyles.textSemibold
+		...sharedStyles.textSemibold,
+		...sharedStyles.textAlignCenter
 	}
 });
 

app/views/RoomActionsView/index.js

@@ -442,7 +442,7 @@ class RoomActionsView extends React.Component {
 							/>
 							{room.t === 'd' && <Markdown msg={member.statusText} style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]} preview theme={theme} numberOfLines={1} />}
 						</View>
-						{isGroupChat ? null : <List.Icon name='chevron-right' />}
+						{isGroupChat ? null : <List.Icon name='chevron-right' style={styles.actionIndicator} />}
 					</View>
 				</Touch>
 				<List.Separator />

app/views/RoomActionsView/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, I18nManager } from 'react-native';
 import { PADDING_HORIZONTAL } from '../../containers/List/constants';
 
 import sharedStyles from '../Styles';
@@ -27,5 +27,10 @@ export default StyleSheet.create({
 		paddingRight: 16,
 		flexDirection: 'row',
 		alignItems: 'center'
+	},
+	actionIndicator: {
+		...I18nManager.isRTL
+			? { transform: [{ rotate: '180deg' }] }
+			: {}
 	}
 });

app/views/RoomInfoEditView/styles.js

@@ -4,8 +4,8 @@ import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
 	button: {
-		...sharedStyles.textAlignCenter,
-		...sharedStyles.textBold
+		...sharedStyles.textBold,
+		...sharedStyles.textAlignCenter
 	},
 	buttonInverted: {
 		borderWidth: 2,
@@ -61,8 +61,8 @@ export default StyleSheet.create({
 		marginVertical: 20
 	},
 	broadcast: {
-		...sharedStyles.textAlignCenter,
-		...sharedStyles.textSemibold
+		...sharedStyles.textSemibold,
+		...sharedStyles.textAlignCenter
 	},
 	hideSystemMessages: {
 		alignItems: 'flex-start'

app/views/ShareListView/styles.js

@@ -56,14 +56,14 @@ export default StyleSheet.create({
 	},
 	permissionTitle: {
 		fontSize: 16,
-		textAlign: 'center',
 		marginHorizontal: 30,
-		...sharedStyles.textMedium
+		...sharedStyles.textMedium,
+		...sharedStyles.textAlignCenter
 	},
 	permissionMessage: {
 		fontSize: 14,
-		textAlign: 'center',
 		marginHorizontal: 30,
-		...sharedStyles.textRegular
+		...sharedStyles.textRegular,
+		...sharedStyles.textAlignCenter
 	}
 });

app/views/ShareView/Preview.js

@@ -24,9 +24,9 @@ const styles = StyleSheet.create({
 	},
 	fileName: {
 		fontSize: 16,
-		textAlign: 'center',
 		marginHorizontal: 10,
-		...sharedStyles.textMedium
+		...sharedStyles.textMedium,
+		...sharedStyles.textAlignCenter
 	},
 	fileSize: {
 		fontSize: 14,

app/views/Styles.js

@@ -63,6 +63,7 @@ export default StyleSheet.create({
 		borderLeftWidth: StyleSheet.hairlineWidth
 	},
 	textRegular: {
+		textAlign: 'left',
 		backgroundColor: 'transparent',
 		...Platform.select({
 			ios: {
@@ -77,6 +78,7 @@ export default StyleSheet.create({
 		})
 	},
 	textMedium: {
+		textAlign: 'left',
 		backgroundColor: 'transparent',
 		...Platform.select({
 			ios: {
@@ -91,6 +93,7 @@ export default StyleSheet.create({
 		})
 	},
 	textSemibold: {
+		textAlign: 'left',
 		backgroundColor: 'transparent',
 		...Platform.select({
 			ios: {
@@ -105,6 +108,7 @@ export default StyleSheet.create({
 		})
 	},
 	textBold: {
+		textAlign: 'left',
 		backgroundColor: 'transparent',
 		...Platform.select({
 			ios: {

app/views/ThreadMessagesView/NoDataFound.js

@@ -22,10 +22,10 @@ const styles = StyleSheet.create({
 		top: 60,
 		left: 0,
 		right: 0,
-		textAlign: 'center',
 		fontSize: 16,
 		paddingHorizontal: 24,
-		...sharedStyles.textRegular
+		...sharedStyles.textRegular,
+		...sharedStyles.textAlignCenter
 	}
 });
 

app/views/VisitorNavigationView.js

@@ -16,8 +16,8 @@ const styles = StyleSheet.create({
 	noResult: {
 		fontSize: 16,
 		paddingVertical: 56,
-		...sharedStyles.textAlignCenter,
-		...sharedStyles.textSemibold
+		...sharedStyles.textSemibold,
+		...sharedStyles.textAlignCenter
 	}
 });
 

app/views/WithoutServersView.js

@@ -24,8 +24,8 @@ const styles = StyleSheet.create({
 	},
 	content: {
 		fontSize: 14,
-		...sharedStyles.textAlignCenter,
-		...sharedStyles.textRegular
+		...sharedStyles.textRegular,
+		...sharedStyles.textAlignCenter
 	}
 });
 

app/views/WorkspaceView/styles.js

@@ -15,8 +15,8 @@ export default StyleSheet.create({
 	},
 	registrationText: {
 		fontSize: 14,
-		...sharedStyles.textAlignCenter,
-		...sharedStyles.textRegular
+		...sharedStyles.textRegular,
+		...sharedStyles.textAlignCenter
 	},
 	alignItemsCenter: {
 		alignItems: 'center'

ios/Podfile.lock

@@ -382,6 +382,8 @@ PODS:
     - React
   - react-native-orientation-locker (1.1.8):
     - React
+  - react-native-restart (0.0.17):
+    - React
   - react-native-safe-area-context (3.1.1):
     - React
   - react-native-simple-crypto (0.4.0):
@@ -598,6 +600,7 @@ DEPENDENCIES:
   - react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
   - react-native-notifications (from `../node_modules/react-native-notifications`)
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
+  - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-simple-crypto (from `../node_modules/react-native-simple-crypto`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
@@ -759,6 +762,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-notifications"
   react-native-orientation-locker:
     :path: "../node_modules/react-native-orientation-locker"
+  react-native-restart:
+    :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-simple-crypto:
@@ -930,6 +935,7 @@ SPEC CHECKSUMS:
   react-native-mmkv-storage: 48729fe90e850ef2fdc9d3714b7030c7c51d82b0
   react-native-notifications: ee8fd739853e72694f3af8b374c8ccb106b7b227
   react-native-orientation-locker: f0ca1a8e5031dab6b74bfb4ab33a17ed2c2fcb0d
+  react-native-restart: d19a0f8d053d065fe64cd2baebb6487111c77149
   react-native-safe-area-context: 344b969c45af3d8464d36e8dea264942992ef033
   react-native-simple-crypto: 564740fd8124827d82e9e8ded4a0de8c695c8a4d
   react-native-slider: 0221b417686c5957f6e77cd9ac22c1478a165355

ios/Pods/Headers/Private/react-native-restart/Restart.h

@@ -0,0 +1 @@
+../../../../../node_modules/react-native-restart/ios/Restart.h

ios/Pods/Headers/Public/react-native-restart/Restart.h

@@ -0,0 +1 @@
+../../../../../node_modules/react-native-restart/ios/Restart.h

ios/Pods/Local Podspecs/react-native-restart.podspec.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-native-restart",
+  "version": "0.0.17",
+  "summary": "Sometimes you want to reload your app bundle during app runtime. This package will allow you to do it.",
+  "homepage": "https://github.com/avishayil/react-native-restart#readme",
+  "license": "MIT",
+  "authors": "Avishay Bar <avishay.il@gmail.com> (https://github.com/avishayil)",
+  "platforms": {
+    "ios": "9.0"
+  },
+  "source": {
+    "git": "https://github.com/avishayil/react-native-restart.git",
+    "tag": "0.0.17"
+  },
+  "source_files": "ios/**/*.{h,m}",
+  "dependencies": {
+    "React": [
+
+    ]
+  }
+}

ios/Pods/Manifest.lock

@@ -382,6 +382,8 @@ PODS:
     - React
   - react-native-orientation-locker (1.1.8):
     - React
+  - react-native-restart (0.0.17):
+    - React
   - react-native-safe-area-context (3.1.1):
     - React
   - react-native-simple-crypto (0.4.0):
@@ -598,6 +600,7 @@ DEPENDENCIES:
   - react-native-mmkv-storage (from `../node_modules/react-native-mmkv-storage`)
   - react-native-notifications (from `../node_modules/react-native-notifications`)
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
+  - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-simple-crypto (from `../node_modules/react-native-simple-crypto`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
@@ -759,6 +762,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-notifications"
   react-native-orientation-locker:
     :path: "../node_modules/react-native-orientation-locker"
+  react-native-restart:
+    :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-simple-crypto:
@@ -930,6 +935,7 @@ SPEC CHECKSUMS:
   react-native-mmkv-storage: 48729fe90e850ef2fdc9d3714b7030c7c51d82b0
   react-native-notifications: ee8fd739853e72694f3af8b374c8ccb106b7b227
   react-native-orientation-locker: f0ca1a8e5031dab6b74bfb4ab33a17ed2c2fcb0d
+  react-native-restart: d19a0f8d053d065fe64cd2baebb6487111c77149
   react-native-safe-area-context: 344b969c45af3d8464d36e8dea264942992ef033
   react-native-simple-crypto: 564740fd8124827d82e9e8ded4a0de8c695c8a4d
   react-native-slider: 0221b417686c5957f6e77cd9ac22c1478a165355

ios/Pods/Target Support Files/Pods-NotificationService/Pods-NotificationService-acknowledgements.markdown

@@ -4527,6 +4527,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+## react-native-restart
+
+MIT License
+
+Copyright (c) 2020 Avishay Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 ## react-native-safe-area-context
 
 MIT License

ios/Pods/Target Support Files/Pods-NotificationService/Pods-NotificationService-acknowledgements.plist

@@ -4926,6 +4926,37 @@ SOFTWARE.
 			<key>FooterText</key>
 			<string>MIT License
 
+Copyright (c) 2020 Avishay Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+</string>
+			<key>License</key>
+			<string>MIT</string>
+			<key>Title</key>
+			<string>react-native-restart</string>
+			<key>Type</key>
+			<string>PSGroupSpecifier</string>
+		</dict>
+		<dict>
+			<key>FooterText</key>
+			<string>MIT License
+
 Copyright (c) 2019 Th3rd Wave
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

ios/Pods/Target Support Files/Pods-RocketChatRN/Pods-RocketChatRN-acknowledgements.markdown

@@ -4527,6 +4527,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+## react-native-restart
+
+MIT License
+
+Copyright (c) 2020 Avishay Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 ## react-native-safe-area-context
 
 MIT License

ios/Pods/Target Support Files/Pods-RocketChatRN/Pods-RocketChatRN-acknowledgements.plist

@@ -4926,6 +4926,37 @@ SOFTWARE.
 			<key>FooterText</key>
 			<string>MIT License
 
+Copyright (c) 2020 Avishay Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+</string>
+			<key>License</key>
+			<string>MIT</string>
+			<key>Title</key>
+			<string>react-native-restart</string>
+			<key>Type</key>
+			<string>PSGroupSpecifier</string>
+		</dict>
+		<dict>
+			<key>FooterText</key>
+			<string>MIT License
+
 Copyright (c) 2019 Th3rd Wave
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

ios/Pods/Target Support Files/Pods-ShareRocketChatRN/Pods-ShareRocketChatRN-acknowledgements.markdown

@@ -4527,6 +4527,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+## react-native-restart
+
+MIT License
+
+Copyright (c) 2020 Avishay Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 ## react-native-safe-area-context
 
 MIT License

ios/Pods/Target Support Files/Pods-ShareRocketChatRN/Pods-ShareRocketChatRN-acknowledgements.plist

@@ -4926,6 +4926,37 @@ SOFTWARE.
 			<key>FooterText</key>
 			<string>MIT License
 
+Copyright (c) 2020 Avishay Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+</string>
+			<key>License</key>
+			<string>MIT</string>
+			<key>Title</key>
+			<string>react-native-restart</string>
+			<key>Type</key>
+			<string>PSGroupSpecifier</string>
+		</dict>
+		<dict>
+			<key>FooterText</key>
+			<string>MIT License
+
 Copyright (c) 2019 Th3rd Wave
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

ios/Pods/Target Support Files/react-native-restart/react-native-restart-dummy.m

@@ -0,0 +1,5 @@
+#import <Foundation/Foundation.h>
+@interface PodsDummy_react_native_restart : NSObject
+@end
+@implementation PodsDummy_react_native_restart
+@end

ios/Pods/Target Support Files/react-native-restart/react-native-restart-prefix.pch

@@ -0,0 +1,12 @@
+#ifdef __OBJC__
+#import <UIKit/UIKit.h>
+#else
+#ifndef FOUNDATION_EXPORT
+#if defined(__cplusplus)
+#define FOUNDATION_EXPORT extern "C"
+#else
+#define FOUNDATION_EXPORT extern
+#endif
+#endif
+#endif
+

ios/Pods/Target Support Files/react-native-restart/react-native-restart.debug.xcconfig

@@ -0,0 +1,12 @@
+APPLICATION_EXTENSION_API_ONLY = YES
+CONFIGURATION_BUILD_DIR = ${PODS_CONFIGURATION_BUILD_DIR}/react-native-restart
+GCC_PREPROCESSOR_DEFINITIONS = $(inherited) COCOAPODS=1
+HEADER_SEARCH_PATHS = $(inherited) "${PODS_ROOT}/Headers/Private" "${PODS_ROOT}/Headers/Private/react-native-restart" "${PODS_ROOT}/Headers/Public" "${PODS_ROOT}/Headers/Public/DoubleConversion" "${PODS_ROOT}/Headers/Public/FBLazyVector" "${PODS_ROOT}/Headers/Public/FBReactNativeSpec" "${PODS_ROOT}/Headers/Public/RCTRequired" "${PODS_ROOT}/Headers/Public/RCTTypeSafety" "${PODS_ROOT}/Headers/Public/React-Core" "${PODS_ROOT}/Headers/Public/React-RCTText" "${PODS_ROOT}/Headers/Public/React-callinvoker" "${PODS_ROOT}/Headers/Public/React-cxxreact" "${PODS_ROOT}/Headers/Public/React-jsi" "${PODS_ROOT}/Headers/Public/React-jsiexecutor" "${PODS_ROOT}/Headers/Public/React-jsinspector" "${PODS_ROOT}/Headers/Public/ReactCommon" "${PODS_ROOT}/Headers/Public/Yoga" "${PODS_ROOT}/Headers/Public/glog" "${PODS_ROOT}/Headers/Public/react-native-restart"
+OTHER_CFLAGS = $(inherited) -fmodule-map-file="${PODS_ROOT}/Headers/Public/yoga/Yoga.modulemap"
+PODS_BUILD_DIR = ${BUILD_DIR}
+PODS_CONFIGURATION_BUILD_DIR = ${PODS_BUILD_DIR}/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
+PODS_ROOT = ${SRCROOT}
+PODS_TARGET_SRCROOT = ${PODS_ROOT}/../../node_modules/react-native-restart
+PRODUCT_BUNDLE_IDENTIFIER = org.cocoapods.${PRODUCT_NAME:rfc1034identifier}
+SKIP_INSTALL = YES
+USE_RECURSIVE_SCRIPT_INPUTS_IN_SCRIPT_PHASES = YES

ios/Pods/Target Support Files/react-native-restart/react-native-restart.release.xcconfig

@@ -0,0 +1,12 @@
+APPLICATION_EXTENSION_API_ONLY = YES
+CONFIGURATION_BUILD_DIR = ${PODS_CONFIGURATION_BUILD_DIR}/react-native-restart
+GCC_PREPROCESSOR_DEFINITIONS = $(inherited) COCOAPODS=1
+HEADER_SEARCH_PATHS = $(inherited) "${PODS_ROOT}/Headers/Private" "${PODS_ROOT}/Headers/Private/react-native-restart" "${PODS_ROOT}/Headers/Public" "${PODS_ROOT}/Headers/Public/DoubleConversion" "${PODS_ROOT}/Headers/Public/FBLazyVector" "${PODS_ROOT}/Headers/Public/FBReactNativeSpec" "${PODS_ROOT}/Headers/Public/RCTRequired" "${PODS_ROOT}/Headers/Public/RCTTypeSafety" "${PODS_ROOT}/Headers/Public/React-Core" "${PODS_ROOT}/Headers/Public/React-RCTText" "${PODS_ROOT}/Headers/Public/React-callinvoker" "${PODS_ROOT}/Headers/Public/React-cxxreact" "${PODS_ROOT}/Headers/Public/React-jsi" "${PODS_ROOT}/Headers/Public/React-jsiexecutor" "${PODS_ROOT}/Headers/Public/React-jsinspector" "${PODS_ROOT}/Headers/Public/ReactCommon" "${PODS_ROOT}/Headers/Public/Yoga" "${PODS_ROOT}/Headers/Public/glog" "${PODS_ROOT}/Headers/Public/react-native-restart"
+OTHER_CFLAGS = $(inherited) -fmodule-map-file="${PODS_ROOT}/Headers/Public/yoga/Yoga.modulemap"
+PODS_BUILD_DIR = ${BUILD_DIR}
+PODS_CONFIGURATION_BUILD_DIR = ${PODS_BUILD_DIR}/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
+PODS_ROOT = ${SRCROOT}
+PODS_TARGET_SRCROOT = ${PODS_ROOT}/../../node_modules/react-native-restart
+PRODUCT_BUNDLE_IDENTIFIER = org.cocoapods.${PRODUCT_NAME:rfc1034identifier}
+SKIP_INSTALL = YES
+USE_RECURSIVE_SCRIPT_INPUTS_IN_SCRIPT_PHASES = YES

package.json

@@ -100,6 +100,7 @@
     "react-native-progress": "4.1.2",
     "react-native-prompt-android": "^1.1.0",
     "react-native-reanimated": "1.9.0",
+    "react-native-restart": "^0.0.17",
     "react-native-safe-area-context": "3.1.1",
     "react-native-screens": "2.9.0",
     "react-native-scroll-bottom-sheet": "0.6.2",

yarn.lock

@@ -12878,6 +12878,11 @@ react-native-reanimated@1.9.0:
   dependencies:
     fbjs "^1.0.0"
 
+react-native-restart@^0.0.17:
+  version "0.0.17"
+  resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.17.tgz#c1f38e019d1a2114248d496698e7951e9435ba91"
+  integrity sha512-UwFPDssMFoyDbF2aLARIHWt5g/o0TtxCXK9WIY+0iNpkgG9qWd+n80XBwXioNCdgy39ZQ5yfJBJRwtMLDgABag==
+
 react-native-safe-area-context@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.1.1.tgz#9b04d1154766e6c1132030aca8f4b0336f561ccd"