Internationalization

NativeExpress uses i18n-js (opens in a new tab) for internationalization and expo-localization (opens in a new tab) for accessing the user's locale settings.

Setup

Create translation files

Translation files are located under src/i18n/. Each language has its own JSON file (e.g., en.json, fr.json).

Example en.json:

{
  "common": {
    "welcome": "Welcome",
    "login": "Login",
    "signup": "Sign Up"
  }
}

To add support for a new language:

Create a new JSON file (e.g., fr.json) in the src/i18n directory
Import the file in index.ts
Add it to the localesMap object under src/i18n/index.ts

Using translations

Use the useTranslation hook to access translations in your components:

import { useTranslation } from '@/hooks/useTranslation';
 
const MyComponent = () => {
  const { t } = useTranslation();
 
  return (
    <View>
      <Text>{t('common.welcome')}</Text>
      <Button title={t('common.login')} />
    </View>
  );
};

RTL Support

Right-to-Left (RTL) languages like Arabic and Hebrew are supported with the NativeExpress Setup. Here is how to enable & use it:

Enable RTL support

In your app.config.js, enable RTL support:

export default {
  expo: {
    // ... other config
    extra: {
      supportsRTL: true
    }
  }
};

Rebuild your app

After enabling RTL support, rebuild your app:

npx expo prebuild && npx expo run:ios

Use RTL-aware styles

NativeExpress uses Tailwind CSS with RTL support. Use the RTL prefix for RTL-aware styles:

<View className="RTL:flex-row-reverse flex-row">
  <Text className="RTL:text-right">Hello World</Text>
</View>

💡

For more information about internationalization in Expo, refer to the official documentation (opens in a new tab).

Best Practices

Use Translation Keys: Always use descriptive keys in your translation files to make maintenance easier.

{
  "auth": {
    "login": {
      "title": "Welcome Back",
      "button": "Sign In"
    }
  }
}

Handle Missing Translations: Set fallback options for missing translations:

import { I18n } from 'i18n-js';
 
const i18n = new I18n();
i18n.enableFallback = true;

Dynamic Values: Use placeholders for dynamic content:

{
  "greeting": "Hello, {{name}}!"
}

t('greeting', { name: 'John' })

RTL Considerations: When designing layouts, always consider how they will appear in RTL languages:
- Use start and end instead of left and right in flexbox layouts
- Use the RTL prefix for Tailwind classes that need to change direction
- Test your app thoroughly in both LTR and RTL modes

Monitoring