React-native: I18nManager.forceRTL doesn't apply changes on react-native components without reloading the app

[hadar-ayoub]

Is this a bug report?

(yes)

I was working lately on a mobile app using react-native, i was led to implement i18n for both languages (arabic and english). to switch between these two languages, i force RTL using I18nManager but the app needs to be reloaded to apply the changes, i use react-native-restart to reload app automatically after persisting the chosen language. is there any convenient way to force RTL without restating the app. Here is my code snippets :

Have you read the Contributing Guidelines?

(yes)

Environment

Environment:
OS: macOS Sierra 10.12.4
Node: 7.10.0
Yarn: 0.23.4
npm: 4.2.0
Watchman: 4.7.0
Xcode: Version 8.3.2 Build version 8E2002
Android Studio: 2.2.3 AI.145.3537739

Packages: (wanted => installed)
react-native: 0.47.2 => 0.47.2
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native-localization: 0.1.32 => 0.1.32

Steps to Reproduce

1. create a screen with a Switch component to change displaying react-native components from LTR to RTL
2. call I18nManager.forceRTL method on the onValueChange param of the Switch component
3. call setLanguage method to set RTL language (arabic, hebrew …)

Expected Behavior

Render the screen with the chosen RTL language and alignement

Actual Behavior

Render the screen with chosen language but screen components doesn’t change alignement from right to left.

Reproducible Demo

(https://github.com/hadar-ayoub/react-native-RTLdemo.git)

[amorenew]

@hadar-ayoub there is a library to restart the app
https://github.com/avishayil/react-native-restart

[hadar-ayoub]

thanks @amorenew, i'm currently using react-native-restart library to apply RTL changes but i'm looking for an other way without restarting the app.

[amorenew]

@hadar-ayoub there is no other way and it's not a bug
otherwise you will need to make a custom handling
like render isArabic return arabic view else return english view

[amorenew]

@hadar-ayoub I think we can make a class for handling it
like
I18nManager.localizeStyle(style,language)
and in localizeStyle function we can flip style value
1-search for value called alignText
https://stackoverflow.com/questions/20804163/check-if-a-key-exists-inside-a-json-object
2-flip the value of alignText

(alignText =='left' ){
  alignText='righ'}

[hadar-ayoub]

hi @amorenew, sorry for my late reply.

It's just not about alignText. I need to handle flexDirection ("row" & "row-reverse"), padding & margin (Left, Right), also change "flex-end" to "flex-start" and vice-versa, and changePosition of the drawer from left to right.

I managed to overcome this issue by creating a class and a static method which take the state of isRTL dispatched with redux. Here is my code snippets :

// styles.js
export default class StyleSheetFactory {
     static getSheet(isRTL) {
       return StyleSheet.create({
          container: {
              flexDirection : isRTL ? "row-reverse" : "row",
              paddingLeft :  isRTL ? a : b,
              paddingRight: isRTL ? b : a,
              marginLeft :  isRTL ? a : b,
              marginRight: isRTL ? b : a,
          },
          text:{
             textAlign: isRTL ? 'right':'left',
          },
         image:{
            transform: [{scaleX: isRTL ? -1 : 1}]
         },
      )}
    }
}

// index.js
import StyleSheetFactory from './styles'

class App extends Component {
   render(){
       const styles = StyleSheetFactory.getsheet(this.props.isRTL);
       return (...)
   }
}
const mapStateToProps = (state) => {
    return {
       isRTL : state.settings.isRTL,
    };
};
export default connect(mapStateToProps)(App);

I'll make soon a functional demo on my github repo .

hope this solution works for you, until this issue is fixed on the upcoming releases.

Cheers,

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[Gentlee]

Issue should be reopened and fixed.

[mhemrg]

Same issue with forceRTL method. The issue should be reopened.

[ovy9086]

yep. issue must be reopened

[eleboys]

same issue here.
RN version : 0.53

[iamsoorena]

same issue
RN version: 0.55

[webeasystep]

is there is any news about rtl ltr switcher ?

[rawit1976]

Verry good

[Fortidude]

Ye, I would like to see any other solution. React-native-restart is not a good option in my opinion.

[itskevinsam]

ping.. same issue

[renecardozo]

in iOS after made forceRTL it is not possible to change to LTR anymore even when I used react-native-restart and to also does not change nothing and keep the screens in RTL