CODEWITHSUNDEEP
javascriptreactjsreact-nativetranslation
otto
otto

Reputation: 2033

react native handle translations and languages

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",
    welcome: {
        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.welcome.title(lang)}</Text>
        </View>
    )
}

Upvotes: 3

Views: 8244

Answers (4)

Mike Eling
Mike Eling

Reputation: 33

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

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

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

Here is an example using a class component

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.

Upvotes: 0

MeLean
MeLean

Reputation: 3421

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 ;).

Upvotes: 0

sharad_kalya
sharad_kalya

Reputation: 275

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 comment the link. But for now you can use your own logics.

Upvotes: 0

Fabrizio Rizzonelli
Fabrizio Rizzonelli

Reputation: 429

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

Upvotes: 2

Related Questions