Skip to main content

React Native

Get started with a React Native app with this quickstart guide

Sign up​

Create your organisation and first project by signing in at https://localisefox.com. Navigate to the API page and take note of your Project ID and API key.

Install LocaliseFox and dependencies​

npm install --save react-native-localize react-intl
npm install --save-dev localisefox
info

LocaliseFox recommends and currently only supports FormatJS (react-intl) for i18n because of its adherence to Unicode ICU, light package footprint and ergonomic API

Initialise LocaliseFox​

Prepare the project structure by running the following command in the root of your project:

npx localisefox init

Be sure to select the React Native option when selecting your project type.

info

Commands such as localisefox init and localisefox pull generate code to ensure full type safety and provide boilerplate implementations on your behalf

Setup provider​

Wrap your root component in the generated I18nProvider:

root.tsx
import { getLocales } from "react-native-localize";
import { I18nProvider } from "./i18n/provider";

export default function Root() {
  return (
    <I18nProvider locale={getLocales()[0].languageTag}>
      <MyApp />
    </I18nProvider>
  );
}
info

react-native-localize is optional and provides a convenient way of getting the user's preferred locale on iOS and Android for React Native

Create strings​

component.tsx
import { FormattedMessage } from "react-intl";

export default function Component() {
  return (
    <FormattedMessage
      id="component.hello"
      defaultMessage="hello, world"
      description='Classical "Hello, World!" greeting to demonstrate creating a simple string'
    />
  );
}
info

You can explore more of the components available from FormatJS on their docs

Setup environment​

Set the LOCALISEFOX_API_KEY environment variable to the API key found in the API settings for your project:

export LOCALISEFOX_API_KEY=<your_api_key>

Alternatively, you can consider using dotenv CLI (or similar) and storing the environment variable in a .env file.

Push strings to LocaliseFox​

After adding some strings to your codebase, you can run the following command which will push them to LocaliseFox ready for translation:

npx localisefox push

(Optional) Add GitHub Action for Continuous Localisation​

info

Coming soon

You can add the LocaliseFox action from the GitHub marketplace to push new and updated strings to LocaliseFox automatically on each commit to ensure your app is continuously localised.

Add translations in LocaliseFox​

Now that your newly created strings have been pushed to LocaliseFox, they'll appear on the strings page for your project where you'll be able to add translations or have LocaliseFox's AI do it on your behalf.

Pull strings from LocaliseFox​

Once strings have been translated in LocaliseFox, you can pull the translations ready to make a build using the following command:

npx localisefox pull

That's it!​

You're now ready to show your awesome software to millions more people.