Does Expo have localization support? (language setting)

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

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

@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

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:

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

2 Likes

I am using https://github.com/xcarpentier/ex-react-native-i18n 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

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’
}
};

hi @ispcloudservices --im not too sure why that code doesnt work, but what about modelling your code similar to what this tutorial has https://medium.com/@jamuhl/translate-your-expo-io-react-native-mobile-application-aa220b2362d2

1 Like