Skip to main content

Add New Translation Strings to a React Native App

When you customize screens, forms, empty states, buttons, or error messages, add new text through the localization system instead of hard-coding strings in JSX. That keeps the app ready for every supported language.

Quick Answer​

Use the app's translation helper or hook for visible text, add the new key to every translation JSON file, restart Metro, and verify the new copy in each supported language.

Use The Translation Helper​

Many Instamobile apps expose localization through useTranslations from the shared core package.

Instead of hard-coding text:

<Text>Create Account</Text>

Use the localized value:

import { useTranslations } from '../../core/dopebase'

function SignUpTitle() {
  const { localized } = useTranslations()

  return <Text>{localized('Create Account')}</Text>
}

The exact import path can vary by app. Follow the pattern used by nearby screens.

Add The Key To Every Language File​

If the app supports English, Spanish, and French, add the key to every file:

src/translations/en.json
src/translations/es.json
src/translations/fr.json

Example:

{
  "Create Account": "Create Account"
}
{
  "Create Account": "Crear cuenta"
}
{
  "Create Account": "Creer un compte"
}

Keep Keys Stable​

Use readable keys and keep them stable. If you rename a key, update every language file and every call site.

Good:

localized('Create Account')
localized('Forgot Password?')
localized('No messages yet')

Avoid:

localized('button1')
localized('copy_home_17')

Dynamic Values​

For dynamic values, prefer the formatting pattern already used by the app. If the app supports interpolation, use that helper. If it does not, keep the dynamic part outside the translation key.

<Text>{`${localized('Total')}: ${amount}`}</Text>

For production apps with many languages, consider adding a formal interpolation helper so translators can control word order.

Restart And Verify​

Restart Metro after changing translation files:

corepack yarn start --reset-cache

Then check:

  • the new text appears in the default language;
  • the new text appears in every supported language;
  • long translations fit inside buttons, tabs, cards, and headers;
  • RTL languages do not break alignment or spacing;
  • fallback behavior is acceptable if a key is missing during development.

Troubleshooting​

The key shows instead of the translation​

The key is missing from the active language file or the app did not reload the updated JSON file. Add the key and restart Metro.

The screen crashes after editing JSON​

Validate the JSON syntax:

node -e "JSON.parse(require('fs').readFileSync('src/translations/en.json', 'utf8'))"

Text does not fit after translation​

Do not shorten only one language in code. Adjust the component layout so longer translations can wrap or use a responsive width.

Release Checklist​

  • No hard-coded visible strings in new screens.
  • Every new key exists in every supported language file.
  • JSON syntax is valid.
  • Long translations fit in compact UI.
  • RTL languages were tested if the app supports RTL.
  • Screenshots for App Store and Google Play use the correct language.

Next Steps​