Internationalization & RTL
Every name the pickers display comes from the JavaScript Intl API for the locale you pass (or the device default), and every UI string is a prop.
What locale controls​
| Component | Derived from locale |
|---|---|
Calendar / DatePicker | Month title, weekday names, first day of week, day accessibility labels |
DateWheelPicker | Month names, column order (D/M/Y vs M/D/Y vs Y/M/D) |
TimePicker / TimeRangePicker | 12h vs 24h, AM/PM labels |
DateTimePicker | The day labels, plus the calendar and time as above |
MonthPicker | Month names |
CountryPicker / PhoneField | Country names, where the engine has them |
CurrencyPicker / AmountField | Currency names, where the engine has them; AmountField's separators and symbol side ($1,234.50, 1.234,50 €) |
TimeZonePicker | Time zone names, where the engine has them |
<View style={{ gap: 12 }}> <Text style={{ fontWeight: '600' }}>he-IL</Text> <DatePicker value={d} onChange={setD} locale="he-IL" /> <Text style={{ fontWeight: '600' }}>ar-EG</Text> <TimePicker value={t} onChange={setT} locale="ar-EG" /> </View>
Pass your app's language, for example from expo-localization or i18next:
import { getLocales } from 'expo-localization';
const locale = getLocales()[0]?.languageTag; // 'fr-CA'
<DatePicker locale={locale} … />
Hermes and Intl​
Hermes (the default engine) supports Intl.DateTimeFormat on iOS and Android. If a locale or feature is missing at runtime, every helper falls back to English names instead of throwing. firstDayOfWeek uses Intl.Locale week info where available; otherwise it defaults to Sunday, so pass firstDayOfWeek={1} explicitly if you need Monday everywhere.
Hermes can't list or name countries and time zones (Intl.DisplayNames, Intl.supportedValuesOf), so CountryPicker and TimeZonePicker ship their lists. Names show in the user's language where the engine provides them, and in English otherwise.
Translating UI strings​
| Component | String props (defaults) |
|---|---|
| Picker sheets | confirmLabel (Done, OK in Material), cancelLabel (Cancel), title |
SelectPicker | placeholder (Select…), label, sheetTitle, searchPlaceholder (Search), emptyText (No results) |
SelectList | searchPlaceholder, emptyText, loadingText (Loading…), searchPrompt (Type to search) |
CountryPicker | placeholder (Select a country), searchPlaceholder (Search countries), preferredLabel (Suggested), allCountriesLabel (All countries) |
PhoneField | label, countrySheetTitle (Country code) |
CurrencyPicker | placeholder (Select a currency), searchPlaceholder (Search currencies), preferredLabel (Suggested), allCurrenciesLabel (All currencies) |
AmountField | label, currencySheetTitle (Currency) |
TimeZonePicker | placeholder (Select a time zone), searchPlaceholder (Search time zones), preferredLabel (Your time zone), allTimeZonesLabel (All time zones) |
EmojiPicker | searchPlaceholder (Search emoji), emptyText (No emoji found), categoryLabels |
TimePicker | dayPeriodLabels (from the locale) |
TimeRangePicker | startLabel (Start), endLabel (End) |
DurationPicker | labels (h, min, s) |
ColorPicker | labels: tab, slider and button names (Grid, Hue, Opacity, Copy…) |
Calendar, WeekStrip | formatTitle |
ActionSheet | cancelLabel (Cancel) |
Slider | thumbLabels (Minimum, Maximum) for screen readers |
OtpField, Rating | accessibilityLabel (Verification code, Rating) |
const { t } = useTranslation();
<DatePickerSheet confirmLabel={t('done')} cancelLabel={t('cancel')} title={t('pickDate')} … />
<SelectPicker placeholder={t('select')} searchPlaceholder={t('search')} emptyText={t('noResults')} … />
Right-to-left​
All layouts use logical start / end properties, so they mirror automatically when I18nManager.isRTL is true:
- Calendar arrows swap direction, and swipe direction follows.
- The range band grows from the correct side.
- Select check marks, icons and chips sit on the logical end / start.
- Multi-wheel columns follow the row direction.
Enable RTL the standard React Native way:
import { I18nManager } from 'react-native';
I18nManager.allowRTL(true);
I18nManager.forceRTL(true); // requires an app reload
On the web​
React Native Web has no RTL layout flag, and the browser aligns each label by its own script, so a list mixing Hebrew and English would zigzag. Select labels are therefore pinned to the left edge on the web. For an RTL web app, align them right through the slot styles:
const rtl = { textAlign: 'right' } as const;
<SelectPicker styles={{ optionLabel: rtl, optionDescription: rtl, groupHeaderText: rtl, triggerText: rtl, placeholder: rtl }} … />
Search in any language​
The select search folds case and diacritics (é → e) and strips Hebrew niqqud, so users don't need to type accents. Use keywords to make options findable in other languages or by synonyms:
{ label: 'Germany', value: 'DE', keywords: ['Deutschland', 'Allemagne', '×’×¨×ž× ×™×”'] }