diff --git a/src/components/sideMenu/view/sideMenuStyles.js b/src/components/sideMenu/view/sideMenuStyles.js index a9b832daf..fd7931f91 100644 --- a/src/components/sideMenu/view/sideMenuStyles.js +++ b/src/components/sideMenu/view/sideMenuStyles.js @@ -1,4 +1,5 @@ import EStyleSheet from 'react-native-extended-stylesheet'; +import { isRTL } from '../../../utils/I18nUtils'; import scalePx from '../../../utils/scalePx'; export default EStyleSheet.create({ @@ -18,14 +19,16 @@ export default EStyleSheet.create({ headerContentWrapper: { alignItems: 'center', height: 70, - flexDirection: 'row', + flexDirection: isRTL() ? 'row-reverse' : 'row', alignSelf: 'center', + flex: 1, }, contentView: { flex: 4, }, userAvatar: { - marginLeft: 32, + marginLeft: isRTL() ? 15 : 32, + marginRight: isRTL() ? 15 : 0, }, otherUserAvatar: { borderWidth: 0.1, @@ -63,10 +66,10 @@ export default EStyleSheet.create({ listItemText: { color: '$primaryDarkGray', marginLeft: 12, - alignSelf: 'center', fontWeight: '500', fontSize: 14, flex: 1, + textAlign: 'left', }, buttonText: { fontSize: 18, diff --git a/src/utils/I18nUtils.ts b/src/utils/I18nUtils.ts index 09181d4d3..2a6b5b8b9 100644 --- a/src/utils/I18nUtils.ts +++ b/src/utils/I18nUtils.ts @@ -2,6 +2,8 @@ import { Alert, NativeModules } from 'react-native'; import RNRestart from 'react-native-restart'; import rtlDetect from 'rtl-detect'; +export const isRTL = () => NativeModules.I18nManager.isRTL; + export const languageRestart = (prevLang, lang, intl) => { if (prevLang != lang) { // if selected lang is RTL, switch the layout