Merge pull request #3201 from BlueWallet/rtlfix

FIX:  RTL on iOS doesn’t work #3122

BlueComponents.js

@@ -146,8 +146,19 @@ export const BitcoinButton = props => {
             <Image style={{ width: 34, height: 34, marginRight: 8 }} source={require('./img/addWallet/bitcoin.png')} />
           </View>
           <View>
-            <Text style={{ color: colors.newBlue, fontWeight: 'bold', fontSize: 18 }}>{loc.wallets.add_bitcoin}</Text>
-            <Text style={{ color: colors.alternativeTextColor, fontSize: 13, fontWeight: '500' }}>{loc.wallets.add_bitcoin_explain}</Text>
+            <Text style={{ color: colors.newBlue, fontWeight: 'bold', fontSize: 18, writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' }}>
+              {loc.wallets.add_bitcoin}
+            </Text>
+            <Text
+              style={{
+                color: colors.alternativeTextColor,
+                fontSize: 13,
+                fontWeight: '500',
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+              }}
+            >
+              {loc.wallets.add_bitcoin_explain}
+            </Text>
           </View>
         </View>
       </View>
@@ -176,8 +187,24 @@ export const VaultButton = props => {
             <Image style={{ width: 34, height: 34, marginRight: 8 }} source={require('./img/addWallet/vault.png')} />
           </View>
           <View>
-            <Text style={{ color: colors.foregroundColor, fontWeight: 'bold', fontSize: 18 }}>{loc.multisig.multisig_vault}</Text>
-            <Text style={{ color: colors.alternativeTextColor, fontSize: 13, fontWeight: '500' }}>
+            <Text
+              style={{
+                color: colors.foregroundColor,
+                fontWeight: 'bold',
+                fontSize: 18,
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+              }}
+            >
+              {loc.multisig.multisig_vault}
+            </Text>
+            <Text
+              style={{
+                color: colors.alternativeTextColor,
+                fontSize: 13,
+                fontWeight: '500',
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+              }}
+            >
               {loc.multisig.multisig_vault_explain}
             </Text>
           </View>
@@ -209,8 +236,21 @@ export const LightningButton = props => {
             <Image style={{ width: 34, height: 34, marginRight: 8 }} source={require('./img/addWallet/lightning.png')} />
           </View>
           <View>
-            <Text style={{ color: colors.lnborderColor, fontWeight: 'bold', fontSize: 18 }}>{loc.wallets.add_lightning}</Text>
-            <Text style={{ color: colors.alternativeTextColor, fontSize: 13, fontWeight: '500' }}>{loc.wallets.add_lightning_explain}</Text>
+            <Text
+              style={{ color: colors.lnborderColor, fontWeight: 'bold', fontSize: 18, writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' }}
+            >
+              {loc.wallets.add_lightning}
+            </Text>
+            <Text
+              style={{
+                color: colors.alternativeTextColor,
+                fontSize: 13,
+                fontWeight: '500',
+                writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+              }}
+            >
+              {loc.wallets.add_lightning_explain}
+            </Text>
           </View>
         </View>
       </View>
@@ -596,7 +636,9 @@ export const BlueText = props => {
       {...props}
       style={{
         color: colors.foregroundColor,
+
         ...props.style,
+        writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
       }}
     />
   );
@@ -670,7 +712,17 @@ export const BlueListItem = React.memo(props => {
 export const BlueFormLabel = props => {
   const { colors } = useTheme();
 
-  return <Text {...props} style={{ color: colors.foregroundColor, fontWeight: '400', marginHorizontal: 20 }} />;
+  return (
+    <Text
+      {...props}
+      style={{
+        color: colors.foregroundColor,
+        fontWeight: '400',
+        marginHorizontal: 20,
+        writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+      }}
+    />
+  );
 };
 
 export const BlueFormInput = props => {

components/WalletsCarousel.js

@@ -26,7 +26,7 @@ import { BlueStorageContext } from '../blue_modules/storage-context';
 const nStyles = StyleSheet.create({
   root: {
     marginVertical: 17,
-    paddingRight: 10,
+    paddingLeft: 16,
   },
   container: {
     paddingHorizontal: 24,
@@ -77,7 +77,7 @@ NewWalletPanel.propTypes = {
 
 const iStyles = StyleSheet.create({
   root: {
-    paddingRight: 10,
+    paddingLeft: 16,
     marginVertical: 17,
   },
   grad: {
@@ -287,8 +287,9 @@ const cStyles = StyleSheet.create({
   },
   content: {
     left: 16,
-    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
-  },
+    flexDirection: I18nManager.isRTL && Platform.OS === 'android' ? 'row-reverse' : 'row',
+
+}
 });
 
 const WalletsCarousel = forwardRef((props, ref) => {
@@ -342,12 +343,12 @@ const WalletsCarousel = forwardRef((props, ref) => {
         sliderHeight={sliderHeight}
         itemWidth={itemWidth}
         inactiveSlideScale={1}
-        inactiveSlideOpacity={I18nManager.isRTL ? 1.0 : 0.7}
+        inactiveSlideOpacity={I18nManager.isRTL && Platform.OS === 'android' ? 1.0 : 0.7}
         activeSlideAlignment="start"
-        initialNumToRender={10}
-        inverted={I18nManager.isRTL && Platform.OS === 'android'}
-        onLayout={onLayout}
         contentContainerCustomStyle={cStyles.content}
+
+        initialNumToRender={10}
+        onLayout={onLayout}
         {...props}
       />
     </>

screen/wallets/details.js

@@ -17,6 +17,7 @@ import {
   PermissionsAndroid,
   InteractionManager,
   ActivityIndicator,
+  I18nManager,
 } from 'react-native';
 import { BlueCard, BlueLoading, BlueSpacing10, BlueSpacing20, BlueText, SecondButton, BlueListItem } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -64,11 +65,13 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     fontSize: 14,
     marginVertical: 12,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   textLabel2: {
     fontWeight: '500',
     fontSize: 14,
     marginVertical: 16,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   textValue: {
     fontWeight: '500',
@@ -88,6 +91,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     minHeight: 33,
     color: '#81868e',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   hardware: {
     flexDirection: 'row',

screen/wallets/list.js

@@ -89,7 +89,7 @@ const WalletsList = () => {
 
   useEffect(() => {
     const allWallets = wallets.concat(pendingWallets);
-    const newCarouselData = I18nManager.isRTL && Platform.OS !== 'android' ? [false].concat(allWallets) : allWallets.concat(false);
+    const newCarouselData = allWallets.concat(false);
     setCarouselData(newCarouselData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wallets, pendingWallets]);
@@ -522,10 +522,12 @@ const styles = StyleSheet.create({
   ltTextBig: {
     fontSize: 16,
     fontWeight: '600',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   ltTextSmall: {
     fontSize: 13,
     fontWeight: '500',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   footerRoot: {
     top: 80,