This quick start guide will get you up and running with Lexicon.
1

Create a Lexicon account

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

Get your publishable key

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

Install the @lexiconjs/react module

Add the @lexiconjs/react package to your existing project.In a terminal window run:
npm install @lexiconjs/react --save
4

Install and configure the react-native-mmkv module (only for React Native)

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
Note: If you are using expo, you will need to use the expo-dev-client in order to run @lexiconjs/react locally.
5

Wrap your app in <TranslationProvider />

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.
6

Use Lexicon components to translate your app

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>
  )
}
We recommend extending the <Text /> component from whatever component library you’re using into a custom component so that you don’t need to include <TranslatedText /> everywhere.See the TranslatedText documentation for more details.