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.
Lost in Translation? Turning Babel into Brilliance
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.
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.
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.
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.
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
- role atMazen Chami is co-host at React Native Radio
“I'm also fortunate enough to be a co-host of the React Native Radio podcast”
YouTube Unverified1 source· Talk
- role atMazen Chami is senior software engineer at Infinite Red
“I'm a senior software engineer at Infinite Red.”
YouTube Unverified1 source· Talk
- builtInfinite Red built Ignitebattle-tested boilerplate
“Ignite, which Infinite Red puts out”
4:22inReact Native news, insights & gossip with React Native RadioYouTube Verified2 sources· Talk
- featureReact Intl: Handles Arabic pluralization, locale-aware numbers, currency, dates and times, gender context, and complex strings
“it handles plurals in Arabic”
YouTube Unverified1 source· Talk
- featurei18n-js: Handles numbers and currency, but lacks pluralization, date and time handling, context, and complex strings in the comparison
“we don't have pluralization of our text”
YouTube Unverified1 source· Talk
- featureReact Intl: Supports pluralization, numbers, currency, date and time, context, and complex strings
“pluralization, numbers, currency, date and time, context, complex strings”
YouTube Unverified1 source· Talk
- featureExpo Localization: Provides native locale data from the device
“It helps you get the native locale data from your device”
YouTube Unverified1 source· Talk
- usesReact Intl uses i18next
“React i18next, i18next, which is a package it depends on”
YouTube Unverified1 source· Talk
- featureLocize: CMS platform for handling translation workflows
“Locize is a CMS platform that helps you handle all this”
YouTube Unverified1 source· Talk
- featureIgnite: Translated into English, Arabic, French, Korean, and Japanese
“Ignite is currently translated into English, Arabic, French, Korean, and Japanese.”
YouTube Unverified1 source· Talk





