i18n support about expo HOT 14 CLOSED

I came to the conclusion that achieving this without the I18nManager is better for now, due to the overall lack of support. Instead, we can play with Flexbox, although it requires spending more time. Here is a quick Snack about this.

import React, { Component } from 'react';
import { Button, LayoutAnimation, Text, UIManager, View } from 'react-native';

export default class App extends Component {
  state = { rtl: false };
  
  componentWillMount() {
    if (UIManager.setLayoutAnimationEnabledExperimental)
      UIManager.setLayoutAnimationEnabledExperimental(true);
  }
  
  componentWillUpdate() {
    LayoutAnimation.spring();
  }
  
  render() {
    const rtlText = this.state.rtl && { textAlign: 'right', writingDirection: 'rtl' };
    const rtlView = this.state.rtl && { flexDirection: 'row-reverse' };
    
    return (
      <View style={{ flex: 1, justifyContent: 'center', padding: 40 }}>
        <Text style={[{ color: '#444', fontSize: 36, marginBottom: 40 }, rtlText]}>
          {this.state.rtl ? 'أهلاً بالعالم!' : 'Hello World!'}
        </Text>
        
        <View style={[{ flexDirection: 'row', marginBottom: 40 }, rtlView]}>
          <View style={{ height: 40, width: 40, backgroundColor: '#db4437' }} />
          <View style={{ height: 40, width: 40, backgroundColor: '#0f9d58' }} />
          <View style={{ height: 40, width: 40, backgroundColor: '#4285f4' }} />
        </View>
        
        <Button
          color="#444"
          onPress={() => this.setState({ rtl: !this.state.rtl })}
          title={this.state.rtl ? 'English' : 'العربية'}
        />
      </View>
    );
  }
}

from expo.

+1 react-native-i18n 😊

from expo.

done! https://docs.getexponent.com/versions/v11.0.0/sdk/util.html#Exponent.Util.getCurrentLocaleAsync

from expo.

For people finding this issue and still struggling - i made a sample how to translate your expo app using react-i18next and includes:

• setting language from device language using expo.utils
• react-navigation (you will need that at some point)

https://github.com/locize/locize-examples/tree/master/react-native-expo

from expo.

Important when looking for an i18n package: Just use this one: https://github.com/fnando/i18n-js

AlexanderZaytsev/react-native-i18n#77 (comment)

from expo.

I just hope that Expo.Util.reload() would work as well on a stand alone app. Didn't get to test it yet.

It doesn't.

from expo.

I just hope that Expo.Util.reload() would work as well on a stand alone app. Didn't get to test it yet.

Yes it does @sonaye. Why do you think it doesn't? Did you try it?

from expo.

@eldadcaspi react-i18next gives you the option to get the information for a language if rtl or ltr: http://i18next.com/docs/api/#dir

but not more...but suggestions are welcome...

from expo.

Coming in sdk11!

from expo.

Another solution => https://github.com/xcarpentier/ex-react-native-i18n

from expo.

Hi guys,
Do you happen to know if any of the above libraries would support RTL language as a default language and would assist to load the app in RTL layout mode?

I'm working on a single RTL language app (Hebrew) and am struggling with loading my Expo based app on RTL layout mode as a default. I wonder if a localization library like the ones you suggest here could help (currently i'm using i18Manager.forceRTL(), but it requires a restart of the app to load the app in RTL mode).
Thanks!

from expo.

Thanks @jamuhl,
Solved it for now with a dirty fix.
So, if anyone might find it useful, when you're using expo for a single rtl language app and need the user to load the app in rtl layout mode at the very first time she'd open the app (without asking her to restart), just reload the app till the forceURL() kicks in (one reload, feels pretty seamless).

In my main.js:

componentWillMount() {
if (!I18nManager.isRTL){
I18nManager.allowRTL(true);
I18nManager.forceRTL(true);
Expo.Util.reload();
}
}

• I just hope that Expo.Util.reload() would work as well on a stand alone app. Didn't get to test it yet.
• You don't have to put in in a lifecycle method, worked fine above the root component as well

from expo.

@jesseruder I have tried it yes, Util.reload() does reload the experience, but the rtl/ltr I18nManager props don't take effect properly (they do when running in the expo client but not as standalone, same code), you'd have to ask the user to close the app completely or to detect the locale of the device at start up and work your way out from there.

from expo.

Ok that sounds like a separate issue. Feel free to create a new issue about that.

from expo.