React Native

tip

You can also check the React Native example application to learn more.

For React Native we recommend following setup (with Expo):

import {
  Tolgee,
  DevTools,
  TolgeeProvider,
  FormatSimple
} from "@tolgee/react";

import en from "./i18n/en.json";
import cs from "./i18n/cs.json";
import { TOLGEE_API_KEY, TOLGEE_API_URL } from "@env";


const tolgee = Tolgee()
  // DevTools will work only for web view
  .use(DevTools())
  .use(FormatSimple())
  // replace with .use(FormatIcu()) for rendering plurals, formatted numbers, etc.
  .init({
    language: 'en',

    // for development
    apiUrl: TOLGEE_API_URL,
    apiKey: TOLGEE_API_KEY,

    // include translations statically
    staticData: { en, cs },
  });

...

<TolgeeProvider
  tolgee={tolgee}
>
  <your-app-components>
</TolgeeProvider>

You can use react-native-dotenv to configure environment variables:

TOLGEE_API_URL=https://app.tolgee.io
TOLGEE_API_KEY=tgpak_gfpwiojtnrztqmtbna3dczjxny2ha3dmnu4tk4tnnjvgc

Obtaining Tolgee API key is described in Integration chapter.

info

In-context tools won't have any effect in emulators, but can help you when you run the app in web mode.

Production

Make sure you don't include TOLGEE_API_KEY in production build.