Video: Step-By-Step Guide to Localizing React Applications Using Transifex Native

In this short video, Nikos, Head of Engineering at Transifex showcases how you can easily localize React components using the @transifex/react library extension.

The video highlights are:

  • Install needed libraries/dependencies (core Native SDK for Javascript, React extensions and the CLI tool running npm install @transifex/native @transifex/react @transifex/cli
  • Import core libraries in your code file:
    import { tx } from '@transifex/native';
    import { T, LanguagePicker } from '@transifex/react';
  • Initialize the SDK with your Native token
  • Wrap all strings in code using the <T> component
  • Add language picker component for easily switching languages in the app
  • Use Javascript CLI tool to push source content to Transifex
  • Translate strings inside Transifex
  • Relaunch the app and see the newly applied translations
  • Modify the source language via Editor
  • CDS updates the cache every hour - To see your changes in the app earlier, invalidate the CDS cache manually running npx txjs-cli invalidate --token=1/<...> --secret=<...>. After the successful execution of the command, you can refresh your app and see the newly updated source content.