How do you handle translation in react native? This is how i did it. Is it bad coding style or has it bad performance?

Language.js

export default {
    appName: "TestApp",
    wele: {
        header: {
            title: (l) => {
                switch (l) {
                    case "de": return `germanTitle`
                    case "en": return `englishTitle`
                }
            },
            subtitle: (l) => {
                switch (l) {
                    case "de": return `germanSubtitle`
                    case "en": return `englishSubtitle`
                }
            }
        }
    }
}

then in my app

import language from "./language.js"
let lang = "de"
...

render(){
    return (
        <View>
            <Text>{language.wele.title(lang)}</Text>
        </View>
    )
}

How do you handle translation in react native? This is how i did it. Is it bad coding style or has it bad performance?

Language.js

export default {
    appName: "TestApp",
    wele: {
        header: {
            title: (l) => {
                switch (l) {
                    case "de": return `germanTitle`
                    case "en": return `englishTitle`
                }
            },
            subtitle: (l) => {
                switch (l) {
                    case "de": return `germanSubtitle`
                    case "en": return `englishSubtitle`
                }
            }
        }
    }
}

then in my app

import language from "./language.js"
let lang = "de"
...

render(){
    return (
        <View>
            <Text>{language.wele.title(lang)}</Text>
        </View>
    )
}

• javascript
• reactjs
• react-native
• translation

• I think this question should be in codereview.stackexchange. – bennygenel Commented May 3, 2018 at 13:56

4 Answers 4

Currently in our projects we're using this repo :) Remember that you need to eject if you're using Expo

Try using I18n. I have used it and customised it to a great extent. It works quite fine and offers more that your app could require in future. I will try to add an example using I18n on git and will ment the link. But for now you can use your own logics.

I made my own solution in this repo by using Redux and AsyncStorage because I had to change language in the app. The implementation is used Expo as CLI, but there is nothing related to Expo. This is an idea to implement, not a ready library ;).

I've created a small library for handling translations in React.

https://www.npmjs./package/react-littera

You can simply add an object with the translations inside your ponent or import it from a file.

Here is an example using a class ponent

import React from "react";
import { Text } from "react-native";

import { withLittera } from "react-littera";

// Regular JS object with your translations. 
// Can also be placed in another file and just simply imported here.
const translations = {
    title: {
        en_US: "This is a title",
        pl_PL: "To jest tytuł",
        de_DE: "Dies ist ein Titel"
    },
    subtitle: {
        en_US: "This is a subtitle",
        pl_PL: "To jest podtytuł",
        de_DE: "Dies ist ein Untertitel"
    }
};

class ExampleComponent extends React.Component {
    render() {
        const { translated } = this.props; // An object called "translated" is passed with props.

        // This is how you display a translated string.
        return <Text>{translated.title}</Text>;
    }
}

export default withLittera(translation)(ExampleComponent); // <- Here you pass the translations to the withLittera HOC.

I've been using the library for quite a few projects and it seems to perform fine. Remember to wrap your app with a LitteraProvider and pass it the active language value and a language change callback.

PS. the library is actually for React but it seems to work with React Native without any difference.