Does Expo have localization support? (language setting)

Expo SDK
1

Hi,

Does Expo have ‘localization’ functionality (I’m not sure if it’s the right term)?
Like Instagram or Facebook, user can change their Language for their apps.

Thanks,
John

1 Like
2

Hey @jbaek7023, thats a good question!

Currently we support the following methods in our ExpoSDK

Expo.Util.getCurrentDeviceCountryAsync()
// Returns the current device country code.

Expo.Util.getCurrentLocaleAsync()
// Returns the current device locale as a string.

Expo.Util.getCurrentTimeZoneAsync()
// Returns the current device time zone name.

You can use these Expo.Util methods to handle translation of the strings in your applications as necessary. I hope this helps :slight_smile:

1 Like
3

@jimmylee We’re about to start working on localization for our detached ExpoKit app. Any recommendations on how to “handle” the strings. Android uses the res>values>strings.xml files; and in the past we’ve used i18next for JS localization. New to RN, so not sure what the standard is here.

1 Like
4

We have a website called https://native.directory where you can search for libraries and get an idea of what works.

I typed https://native.directory/?search=local and found this:

https://github.com/joshswan/react-native-globalize

You might find some other useful stuff too, good luck!

2 Likes
5

I am using GitHub - xcarpentier/ex-react-native-i18n: 💱 ex-react-native-i18n for Expo for that matter.

Found it to be very helpful. It gets the device Locale from Expo.Utils as far as I know.
Only problem I encountered so far was a crash on changing the device language when the app is in the background, but that’s an edge case for me atm. May probably be solved with a listener.

4 Likes
6

Hello

I am trying to translate, but when I change my language to see if is working, it does not translate. Any ideas, I am using Expo with the IOS emulator

export default class Home extends React.Component {

static navigationOptions = {
    title: 'Home'
};


componentWillMount() {
    I18n.initAsync()
}


render() {
    return (
        <View style={styles.LoginContainer}>
            <Button onPress={signInWithGoogleAsync.bind(this)}
                    title={I18n.t('buttonTranslation')}/>
        </View>
    );


    async function signInWithGoogleAsync() {
        try {
            const result = await Expo.Google.logInAsync({
                androidClientId: testAndroid,
                iosClientId: testIOS,
                androidStandaloneAppClientId: androidID,
                iosStandaloneAppClientId: iosId,
                webClientId: webID,
                scopes: ['profile', 'email'],
            });

            if (result.type === 'success') {

                let details = {
                    'domainName': 'ispcloudservices.com',
                    'userEmail': result.user.email,
                    'langId': deviceLocale,
                    'userToken': result.accessToken
                };


                let formBody = [];
                for (let property in details) {
                    let encodedKey = encodeURIComponent(property);
                    let encodedValue = encodeURIComponent(details[property]);
                    formBody.push(encodedKey + "=" + encodedValue);
                }
                formBody = formBody.join("&");

                let postData = {
                    method: 'POST',
                    headers: {
                        'User-Agent': 'ToogleBoxMobile',
                        'referer': 'https://toogleboxmobile.com',
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    body: formBody
                };

                fetch(url, postData)
                    .then((response) => response.json())
                    .then((responseJson) => {
                        this.props.navigation.navigate('Second', {responseJson})
                    })

            } else {
                return {cancelled: true};
            }
        } catch (e) {
            return {error: true};
        }
    }
}

}

I18n.fallbacks = true;

I18n.translations = {
en: {
buttonTranslation: ‘Sing-in with google’
},
es: {
buttonTranslation: ‘Regístrese con Google’
},
pt: {
buttonTranslation: ‘Criar sua Conta do Google’
}
};

7

hi @ispcloudservices --im not too sure why that code doesnt work, but what about modelling your code similar to what this tutorial has Translate your expo.io (react-native) mobile application | by Jan Mühlemann | Medium

1 Like