CODEWITHSUNDEEP
jsonreact-nativelanguage-translation
Adeel Iftikhar
Adeel Iftikhar

Reputation: 792

Is there any way to auto translate the whole react native app

I want to translate the complete app into any other language without using JSON files like ar.json, en.json like it is possible in Websites by using google translate.

I want to know it is possible in React Native somehow. If possible then how can we translate the whole app language in any other language without Prepare language JSON files like we can do in Websites.

I'm new to react native development and want to know this. I searched a lot for this but could not found helpful.

Thanks

Upvotes: 1

Views: 3869

Answers (3)

Eddie Eddie Eddie
Eddie Eddie Eddie

Reputation: 559

Great question. The answers depend on what type of translation you’re talking about. Is this free flowing, conversational text that’s variable? If so, the translations will be variable and may not say what you want it to say. Or, if this is just a series of app labels, help info, or context info? If so, you’ll likely be better off doing just switching either separate files or json switches as others have stated. More clarification is needed.

Upvotes: 1

Prateek Thapa
Prateek Thapa

Reputation: 4938

I suggest you not to use a library but a simple context provider would do.

import React from 'react';

const lang = {
  // in this way, you could dynamically add lang
  // later on which worrying about if-elses in your component
  en: {
    hello: 'hello'
  },
  fr: {
    hello: 'bonjour',
  },
}

const langDict = (key) => lang[key]

const LanguageContext = React.createContext(null);

function LanguageProvider({ initialState = 'en', children }) {
  const [lang, setLang] = React.useState(initialState);

  return (
    <LanguageContext.Provider value={[langDict(lang), setLang]}>
      {children}
    </LanguageContext.Provider>
  )
}

function useLanguage() {
  return React.useContext(LanguageContext);
}

export default function AppWrapper() {
  return (
    <LanguageProvider>
        <App />
    </LanguageProvider>
  )
}

function App() {
  const [lang, setLang] = useLanguage();

  return (
    <View>
      <Text>{lang.hello}</Text>
      <Button onPress={() => setLang('fr')}>French</Button>
      <Button onPress={() => setLang('en')}>English</Button>
    </VIew>
  )
}

Upvotes: 0

Ahmad Suddle
Ahmad Suddle

Reputation: 190

There is no such way for auto translating the app without exclusively make language files (JSON). React i18Next is a really good library for it.

Upvotes: 3

Related Questions