Skip to main content
Version: 5.x.x

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, foramatted 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.