Arabic and RTL PoC

android/app/src/main/AndroidManifest.xml

@@ -24,7 +24,7 @@
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
-      android:supportsRtl="false" tools:replace="android:supportsRtl"
+      android:supportsRtl="true"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
       android:networkSecurityConfig="@xml/network_security_config">

android/app/src/main/java/com/ledger/live/MainActivity.java

@@ -16,6 +16,7 @@
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
 
+import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import java.util.Locale;
 
@@ -34,6 +35,8 @@ protected String getMainComponentName() {
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
+        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
+        sharedI18nUtilInstance.allowRTL(getApplicationContext(), true);
 
         if (!BuildConfig.DEBUG) {
             SplashScreen.show(this, true);

ios/Podfile.lock

@@ -271,6 +271,8 @@ PODS:
     - React-Core
   - react-native-randombytes (3.6.1):
     - React-Core
+  - react-native-restart (0.0.23):
+    - React-Core
   - react-native-safe-area-context (3.3.2):
     - React-Core
   - react-native-splash-screen (3.2.0):
@@ -474,6 +476,7 @@ DEPENDENCIES:
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
+  - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-text-input-mask (from `../node_modules/react-native-text-input-mask`)
@@ -602,6 +605,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-pager-view"
   react-native-randombytes:
     :path: "../node_modules/react-native-randombytes"
+  react-native-restart:
+    :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-splash-screen:
@@ -721,6 +726,7 @@ SPEC CHECKSUMS:
   react-native-netinfo: 92e6e4476eb8bf6fc2d7c0a6ca0a1406f663d73a
   react-native-pager-view: 741e7606ee2f6e399fc7da777f5519454a4b38c5
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
+  react-native-restart: aaad36f3ed7031daac3565f4a79d67e4f3884a50
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-text-input-mask: 36a546b378fadd2efe1b7484a859d34bc2c80395

ios/ledgerlivemobile.xcodeproj/project.pbxproj

@@ -16,12 +16,15 @@
 		2372D3D5180104DBED4E22EE /* libPods-ledgerlivemobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 31C4672E151A9F9D4A18DB00 /* libPods-ledgerlivemobile.a */; };
 		2A2FAB56B85E5D2BFF574A32 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09BC9C5402323A57C5327727 /* ExpoModulesProvider.swift */; };
 		3407D5D9215D2AB800C9D40B /* NeededForBLE.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3407D5D8215D2AB800C9D40B /* NeededForBLE.swift */; };
+		4883917D74394A5083D29F93 /* Cairo-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 82322D3CC62A4F8DA42638BA /* Cairo-SemiBold.ttf */; };
+		560041CE88704255ADAFF114 /* Cairo-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 27FF620B426045B99A2507A8 /* Cairo-Regular.ttf */; };
 		7930A1FF82816135F015ED1B /* libPods-ledgerlivemobileTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 854A3B027231E885CAD3722D /* libPods-ledgerlivemobileTests.a */; };
 		9B7ACA23F80A40489C69872B /* libRNAnalytics.a in Frameworks */ = {isa = PBXBuildFile; fileRef = EEF3655E56C24042B39DF4D3 /* libRNAnalytics.a */; };
 		AD6EE26071FA4673B5C89936 /* FontAwesome5_Pro_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4BD106EA37CA467F9525D699 /* FontAwesome5_Pro_Brands.ttf */; };
 		AD7A77B84DF3487C812B091B /* FontAwesome5_Pro_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 668E26194DD94B6D8F10D450 /* FontAwesome5_Pro_Regular.ttf */; };
 		B116B48438CB416C980DD0E7 /* Inter-SemiBold.otf in Resources */ = {isa = PBXBuildFile; fileRef = F3993D7FF61549FE9270BC06 /* Inter-SemiBold.otf */; };
 		BC25CCBE6BEA4D62BE203C17 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F63C9E4AC284203A95B417E /* libz.tbd */; };
+		BF77AA4951C0464B864F5112 /* Cairo-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 58E53EDFD9E446E0BBA3C02F /* Cairo-Bold.ttf */; };
 		CB46822924B04E80814C603E /* libPasscodeAuth.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 976AEE7A15C2428DB85E53B3 /* libPasscodeAuth.a */; };
 		D93C63AD261B4E7183B66B1C /* Inter-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 4C2397DC873B4F8E91B750A8 /* Inter-Regular.otf */; };
 		E466275BA70845F3AFE1D695 /* Inter-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = D91EB0620BDE4709B6F44620 /* Inter-Bold.otf */; };
@@ -61,6 +64,7 @@
 		17F58473269C64870070C475 /* RCTBluetoothHelperModule.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RCTBluetoothHelperModule.h; path = ledgerlivemobile/RCTBluetoothHelperModule.h; sourceTree = "<group>"; };
 		2402D074219C2E6600276138 /* ledgerlivemobile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = ledgerlivemobile.entitlements; path = ledgerlivemobile/ledgerlivemobile.entitlements; sourceTree = "<group>"; };
 		2433F86A66DB455E803650A5 /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
+		27FF620B426045B99A2507A8 /* Cairo-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Cairo-Regular.ttf"; path = "../assets/fonts/Cairo-Regular.ttf"; sourceTree = "<group>"; };
 		2B8A443FFF9942B295210CA2 /* Entypo.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Entypo.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; };
 		31C4672E151A9F9D4A18DB00 /* libPods-ledgerlivemobile.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ledgerlivemobile.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3263CCC7104E4B86AC2ADDB4 /* MuseoSans-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "MuseoSans-Regular.otf"; path = "../assets/fonts/MuseoSans-Regular.otf"; sourceTree = "<group>"; };
@@ -74,6 +78,7 @@
 		4DF02CF2330A6B120535EF53 /* Pods-ledgerlivemobileTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ledgerlivemobileTests.release.xcconfig"; path = "Target Support Files/Pods-ledgerlivemobileTests/Pods-ledgerlivemobileTests.release.xcconfig"; sourceTree = "<group>"; };
 		55D1E3EC76A24523BF26BC61 /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Regular.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; };
 		57675DE3CEFA48B4AEFB711C /* OpenSans-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenSans-Bold.ttf"; path = "../assets/fonts/OpenSans-Bold.ttf"; sourceTree = "<group>"; };
+		58E53EDFD9E446E0BBA3C02F /* Cairo-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Cairo-Bold.ttf"; path = "../assets/fonts/Cairo-Bold.ttf"; sourceTree = "<group>"; };
 		5BA10A22A99ED68BAF7C0035 /* Pods-ledgerlivemobileTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ledgerlivemobileTests.debug.xcconfig"; path = "Target Support Files/Pods-ledgerlivemobileTests/Pods-ledgerlivemobileTests.debug.xcconfig"; sourceTree = "<group>"; };
 		5F63C9E4AC284203A95B417E /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
 		612C2DE49D8C4046AE4FF442 /* Lottie.framework */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = wrapper.framework; name = Lottie.framework; path = System/Library/Frameworks/Lottie.framework; sourceTree = SDKROOT; };
@@ -82,6 +87,7 @@
 		6C1563DFEE064431AF4F8F6B /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		6D891D99F1084D459DBF667F /* FontAwesome5_Pro_Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Pro_Light.ttf; path = ../assets/fonts/FontAwesome5_Pro_Light.ttf; sourceTree = "<group>"; };
 		793F2C3B8DC0475194262928 /* libRCTCamera.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTCamera.a; sourceTree = "<group>"; };
+		82322D3CC62A4F8DA42638BA /* Cairo-SemiBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Cairo-SemiBold.ttf"; path = "../assets/fonts/Cairo-SemiBold.ttf"; sourceTree = "<group>"; };
 		854A3B027231E885CAD3722D /* libPods-ledgerlivemobileTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ledgerlivemobileTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		887CA7F3B5FF4445BB1C5960 /* libRNLibLedgerCore.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNLibLedgerCore.a; sourceTree = "<group>"; };
 		9390D938BCB148F2A34703E3 /* AntDesign.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = AntDesign.ttf; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; };
@@ -226,6 +232,9 @@
 				6D891D99F1084D459DBF667F /* FontAwesome5_Pro_Light.ttf */,
 				668E26194DD94B6D8F10D450 /* FontAwesome5_Pro_Regular.ttf */,
 				991AA9919E4840DBB799E117 /* FontAwesome5_Pro_Solid.ttf */,
+				58E53EDFD9E446E0BBA3C02F /* Cairo-Bold.ttf */,
+				27FF620B426045B99A2507A8 /* Cairo-Regular.ttf */,
+				82322D3CC62A4F8DA42638BA /* Cairo-SemiBold.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -419,6 +428,9 @@
 				F99BEAC629E8441C83104922 /* FontAwesome5_Pro_Light.ttf in Resources */,
 				AD7A77B84DF3487C812B091B /* FontAwesome5_Pro_Regular.ttf in Resources */,
 				E55EFC09114D43B3AB041882 /* FontAwesome5_Pro_Solid.ttf in Resources */,
+				BF77AA4951C0464B864F5112 /* Cairo-Bold.ttf in Resources */,
+				560041CE88704255ADAFF114 /* Cairo-Regular.ttf in Resources */,
+				4883917D74394A5083D29F93 /* Cairo-SemiBold.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/ledgerlivemobile/AppDelegate.m

@@ -3,6 +3,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import <React/RCTI18nUtil.h>
 #import <React/RCTLinkingManager.h>
 #import "RNSplashScreen.h"  // here
 
@@ -29,6 +30,7 @@ @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+  [[RCTI18nUtil sharedInstance] allowRTL:YES];
 /* #ifdef FB_SONARKIT_ENABLED */
 /*   InitializeFlipper(application); */
 /* #endif */

ios/ledgerlivemobile/Info.plist

@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>NSCameraUsageDescription</key>
-	<string>Allow $(PRODUCT_NAME) to use the camera</string>
+	<string>The Ledger Live app needs access to your camera to scan QR codes</string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Allow $(PRODUCT_NAME) to use the microphone</string>
 	<key>CFBundleURLTypes</key>
@@ -58,8 +58,6 @@
 	<string>Ledger Live needs to connect to your Ledger device to manage your crypto assets</string>
 	<key>NSBluetoothPeripheralUsageDescription</key>
 	<string>The Ledger Live app needs access device</string>
-	<key>NSCameraUsageDescription</key>
-	<string>The Ledger Live app needs access to your camera to scan QR codes</string>
 	<key>NSFaceIDUsageDescription</key>
 	<string>This app requires Face ID permission to authenticate using Face recognition.</string>
 	<key>UIAppFonts</key>
@@ -94,6 +92,9 @@
 		<string>FontAwesome5_Pro_Light.ttf</string>
 		<string>FontAwesome5_Pro_Regular.ttf</string>
 		<string>FontAwesome5_Pro_Solid.ttf</string>
+		<string>Cairo-Bold.ttf</string>
+		<string>Cairo-Regular.ttf</string>
+		<string>Cairo-SemiBold.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

package.json

@@ -151,6 +151,7 @@
     "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "^2.2.0",
     "react-native-redash": "^16.0.11",
+    "react-native-restart": "^0.0.23",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-safe-area-view": "^1.1.1",
     "react-native-screens": "^3.9.0",

src/components/AnimatedHeader.js

@@ -1,6 +1,12 @@
 // @flow
 import React, { useState, useCallback } from "react";
-import { View, StyleSheet, Platform, TouchableOpacity } from "react-native";
+import {
+  View,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+  I18nManager,
+} from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import {
   useNavigation,

src/components/Button.js

@@ -57,6 +57,7 @@ export type BaseButtonProps = {
   IconRight?: React$ComponentType<{ size: number, color: string }>,
   disabled?: boolean,
   outline?: boolean,
+  rtl?: boolean,
   // for analytics
   event?: string,
   eventProperties?: Object,
@@ -92,6 +93,7 @@ export function BaseButton({
   titleStyle,
   IconLeft,
   IconRight,
+  rtl,
   disabled,
   type,
   useTouchable,
@@ -294,7 +296,7 @@ export function BaseButton({
 
       <Animated.View style={titleSliderStyle}>
         {IconLeft ? (
-          <View style={{ paddingRight: title ? 10 : null }}>
+          <View style={{ paddingEnd: title ? 10 : null }}>
             <IconLeft size={16} color={iconColor} />
           </View>
         ) : null}
@@ -306,7 +308,7 @@ export function BaseButton({
         ) : null}
 
         {IconRight ? (
-          <View style={{ paddingLeft: title ? 10 : null }}>
+          <View style={{ paddingStart: title ? 10 : null }}>
             <IconRight size={16} color={iconColor} />
           </View>
         ) : null}

src/components/LText/getFontStyle.android.js

@@ -1,8 +1,23 @@
 /* @flow */
+import i18next from "i18next";
 import type { Opts, Res } from ".";
 
-export default ({ bold, semiBold, monospace }: Opts = {}): Res => {
-  const family = monospace ? "monospace" : "Inter";
+export default ({
+  bold,
+  semiBold,
+  monospace,
+  preferredFontFamily,
+}: Opts = {}): Res => {
+  let family = monospace ? "monospace" : "Inter";
+
+  if (!monospace && ["ar"].includes(i18next.language)) {
+    family = "Cairo";
+  }
+
+  if (preferredFontFamily) {
+    family = preferredFontFamily;
+  }
+
   let weight;
   if (semiBold) {
     weight = "SemiBold";

src/components/LText/getFontStyle.ios.js

@@ -1,9 +1,24 @@
 /* @flow */
+import i18next from "i18next";
 import { StyleSheet } from "react-native";
 import type { Opts, Res } from ".";
 
-const getFontStyle = ({ bold, semiBold, monospace }: Opts = {}): Res => {
-  const fontFamily = monospace ? "Menlo" : "Inter";
+const getFontStyle = ({
+  bold,
+  semiBold,
+  monospace,
+  preferredFontFamily,
+}: Opts = {}): Res => {
+  let fontFamily = monospace ? "Menlo" : "Inter";
+
+  if (!monospace && ["ar"].includes(i18next.language)) {
+    fontFamily = "Cairo";
+  }
+
+  if (preferredFontFamily) {
+    fontFamily = preferredFontFamily;
+  }
+
   let fontWeight;
   if (semiBold) {
     fontWeight = "600";

src/components/LText/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 import React from "react";
-import { Text } from "react-native";
+import { I18nManager, Platform, StyleSheet, Text } from "react-native";
 import { useTheme } from "@react-navigation/native";
 import getFontStyle from "./getFontStyle";
 
@@ -13,6 +13,7 @@ export type Opts = {
   monospace?: boolean,
   color?: string,
   bg?: string,
+  preferredFontFamily?: string,
 };
 
 export type Res = {|
@@ -48,6 +49,7 @@ export default function LText({
   color,
   bg,
   style,
+  preferredFontFamily,
   ...newProps
 }: {
   ...Opts,
@@ -62,12 +64,14 @@ export default function LText({
 
     return clrs[key];
   };
+
   return (
     // $FlowFixMe
     <Text
       {...newProps}
       allowFontScaling={false}
       style={[
+        styles.localizedText,
         {
           color: getColor(colors, color, colors.darkBlue),
           backgroundColor: getColor(colors, bg, "transparent"),
@@ -78,8 +82,15 @@ export default function LText({
           semiBold,
           secondary,
           monospace,
+          preferredFontFamily,
         }),
       ]}
     />
   );
 }
+
+const styles = StyleSheet.create({
+  localizedText: {
+    textAlign: "left",
+  },
+});

src/components/OnboardingStepperView/index.js

@@ -7,6 +7,7 @@ import {
   Dimensions,
   TouchableOpacity,
   Platform,
+  I18nManager,
 } from "react-native";
 import { TabView, SceneMap } from "react-native-tab-view";
 import { useTheme } from "@react-navigation/native";

src/components/SelectDevice/BluetoothEmpty.js

@@ -11,6 +11,7 @@ import lottie from "../../screens/Onboarding/assets/nanoX/pairDevice/data.json";
 import LText from "../LText";
 import Animation from "../Animation";
 import Bluetooth from "../../icons/Bluetooth";
+import * as rtl from "../../helpers/rtl";
 
 type Props = {
   onPairNewDevice: () => void,
@@ -59,10 +60,10 @@ const styles = StyleSheet.create({
   },
   image: {
     position: "absolute",
-    left: "5%",
     top: 0,
     width: "110%",
     height: "100%",
+    ...rtl.dir({ start: "5%" }, { end: "5%" }),
   },
   label: { fontSize: 13, lineHeight: 24 },
   bulletIcon: {