WhoBuilt

Lost in Translation? Turning Babel into Brilliance

Sep 26, 2024· 22 min· 566 views·Watch on YouTube

Speaker

Mazen Chami, a senior software engineer at Infinite Red and co-host of React Native Radio, explains how to internationalize React Native apps at React Universe Conf 2024, presented by Callstack.

Why localization matters

Chami opens with a coffee shop app whose rushed, machine-translated text breaks the design and confuses customers. He notes that only about 1.5 billion of the world’s 8.1 billion people speak English as a first or second language, while Mandarin speakers account for just 1.3% of online content. He also points to the 10% of people who speak right-to-left languages and the 6.3 billion smartphones worldwide.

Choose a library and set up translations

Chami recommends checking for TypeScript support, plurals, localized numbers and dates, gender context, and strings that include formatted React components. Comparing React Intl, i18n-js, and react-i18next, he selects react-i18next for its setup, documentation, and functionality. His Expo example uses typed translation files, Expo Localization, and app metadata translations, including the app name and permission descriptions.

Adapt the interface for right-to-left languages

Turning on right-to-left mode alone can leave text misaligned and images or icons pointing the wrong way. Chami suggests setting text writing direction, flipping images where appropriate, and choosing directional icons such as Chevron Back or Chevron Forward. He also calls for checking animations and text inputs, and using margin start and end when layout should follow text direction.

Get translations and prepare the release

Chami distinguishes basic AI translation, machine translation, and generative AI, then recommends human translators for sustainable app translation and names Translate.com and Locize. For store listings, he describes Google Play’s paid human option at seven cents per word with a promised seven-day turnaround, alongside free machine translation. Apple’s listing workflow lets developers select a primary language and add other languages.

Apply practical localization habits

Chami advises keeping text in translation files, avoiding hardcoded strings and concatenation, and handling plural and gender forms. He recommends collaborating with native speakers for cultural accuracy and outsourcing translations when useful. He also notes that Infinite Red’s Ignite boilerplate supports English, Arabic, French, Korean, and Japanese, with community work underway for Hindi and Polish.

Takeaways

  • Choose an i18n library that handles plurals, locale-aware formatting, context, and rich text.
  • Use typed translation files to catch missing keys across languages.
  • Test right-to-left layouts across text, images, icons, animations, and inputs.
  • Keep complete phrases in translation files instead of concatenating fragments.
  • Have native speakers review translations for context and cultural accuracy.

Mentioned in this talk

Search inside this talk

What was claimed 10

Related talks