Go to app.lexiconjs.com and create a free account.

Grab your publishable key from your dashboard’s API Keys tab and save it for later.

Add the @lexiconjs/react package to your existing project.

In a terminal window run:

npm install @lexiconjs/react --save

If your app is using React Native, you will also need to add the react-native-mmkv package to your existing project and ensure it’s properly linked using one of the instruction sets below (Expo or React Native).

We use this package to ensure caching is as fast as possible on mobile devices. You can review their docs for more details.

​

React Native

In a terminal window run:

npm install react-native-mmkv --save
cd ios && pod install

​

Expo

In a terminal window run:

npx expo install react-native-mmkv
npx expo prebuild

The <TranslationProvider /> component enables the automatic translation of your app’s text inside of other components. Import it into your codebase by adding import { TranslationProvider } from "@lexiconjs/react" at the top of your entry file and then wrap your app with it.

import { TranslationProvider } from "@lexiconjs/react"
import React from "react"
import App from "./component/App"

export const TranslatedApp = () => {
  return (
    <TranslationProvider 
      defaultLanguage="en-US" 
      token={PUBLISHABLE_KEY}
    >
      <App />
    </TranslationProvider>
  )
}

Make sure to replace the PUBLISHABLE_KEY with the key you found in your dashboard.

The simplest way to translate text is to simply wrap some text with the <TranslatedText /> component. It will detect the user’s locale via their device settings and generate a translation in real time. Afterward, it stores the translation in a local cache to ensure everything stays as fast as possible.

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

export const Example = () => {
  return (
    <Text>
      <TranslatedText>
        This text will be translated!
      </TranslatedText>
    </Text>
  )
}