Skip to main content
Version: Next 🚧

LanguagePicker

LanguagePicker is a React Native field for choosing a language, such as the app's language setting or the language of a post. It shows each language with a flag, under its own name, such as 🇪🇸 Español or 🇯🇵 日本語, with its name in the user's language below, so people can find their language even when the app is in one they don't read. Search matches either name and the tag.

It's a SelectPicker with 86 languages built in, the ones the app stores and operating systems offer, so it takes the same props: a bottom sheet on phones, a dropdown on the web, multiple selection, a clear button and the iOS, Material or web design.

import { LanguagePicker } from '@elik56a/react-native-pickers';
Loading…
<LanguagePicker label="App language" value={language} onChange={setLanguage} />

Try searching german, deutsch, 日本 or pt-br. The value is a BCP 47 tag, such as 'es', 'pt-BR' or 'zh-Hant', ready for your i18n library. Chinese and Portuguese come as their two written standards, which people choose between.

Try the props​

Platform
presentation
locale
<LanguagePicker
  label="App language"
  preferred={['en', 'es']}
  value={value}
  onChange={setValue}
  locale="en"
/>

Flags​

Each language shows the flag of the country it's most spoken in, such as 🇪🇸 for Español and 🇧🇷 for Português (Brasil). A language is spoken in more than one country, so change any flag with flags, such as 🇬🇧 for English in a British app, or hide them all with showFlag={false}. Flags are emoji: no images to add.

Loading…
<LanguagePicker label="App language" flags={{ en: 'GB', ar: 'AE' }} value={language} onChange={setLanguage} />

The languages your app speaks​

languages limits the list to your translations, and preferred pins some to the top under their own header, such as the device's languages.

Loading…
<LanguagePicker
  label="App language"
  languages={TRANSLATED}
  preferred={['en', 'he']}
  preferredLabel="On this device"
  value={language}
  onChange={setLanguage}
/>

Pass languages, exclude and preferred from a constant, not a new array on every render, so the list is built once.

Right-to-left languages​

isRtlLanguage(tag) tells whether a language is written right to left, for any BCP 47 tag, such as 'ar', 'he-IL' or 'fa_IR'. Use it to flip the layout when the user switches language:

import { I18nManager } from 'react-native';
import { isRtlLanguage } from '@elik56a/react-native-pickers';

const onChange = (language: LanguageCode) => {
  i18n.changeLanguage(language);
  I18nManager.forceRTL(isRtlLanguage(language)); // takes effect after a reload
};

Several languages​

multiple turns the field into chips, as with SelectPicker, for the languages someone speaks or a post's translations.

Loading…
<LanguagePicker label="Languages you speak" multiple value={spoken} onChange={setSpoken} />

Names in the user's language​

The name under each language comes from Intl.DisplayNames in locale, the device locale by default, and the list is sorted by it. Where the JavaScript engine has no Intl.DisplayNames (Hermes), it falls back to English. The language's own name, on top, is always there.

Loading…
<LanguagePicker
  label="Langue"
  placeholder="Choisir une langue"
  searchPlaceholder="Rechercher"
  locale="fr"
  value={language}
  onChange={setLanguage}
/>

Utilities​

ExportDescription
getLanguage(tag){ code, name, nativeName, country, rtl } for a tag in any case, or undefined
getAllLanguages()Every Language, sorted by tag
getLanguageName(language, locale?)The language's name in locale, or its English name
isRtlLanguage(tag)Whether the language of any BCP 47 tag is written right to left
getLanguage('he'); // { code: 'he', name: 'Hebrew', nativeName: 'עברית', country: 'IL', rtl: true }

Props​

Every SelectPicker prop works, apart from the server search ones (options, loadOptions, onSearchChange, loading and the rest): the list is built in. value is a LanguageCode, or LanguageCode[] with multiple.

PropTypeDefaultDescription
languagesLanguageCode[]allOnly these languages.
excludeLanguageCode[]—Leave these out.
preferredLanguageCode[]—Shown first, in this order, under their own header.
showFlagbooleantrueA flag before each language: the country it's most spoken in.
flagsPartial<Record<LanguageCode, CountryCode>>—Other flags for some languages, such as { en: 'GB' }.
preferredLabelstring'Suggested'Header above preferred.
allLanguagesLabelstring'All languages'Header above the rest when preferred is set.
localestringdevice localeLanguage of the names under each language's own name.
placeholderstring'Select a language'Shown while nothing is selected.
searchPlaceholderstring'Search languages'Search field placeholder.
sheetSheetChromePropssheetProps.height: 0.8Sheet options. The sheet opens at 80% of the screen so it doesn't jump as search narrows the list.

Types​

type LanguageCode = 'af' | 'am' | 'ar' | … | 'pt-BR' | 'zh-Hans' | 'zh-Hant' | 'zu'; // BCP 47

interface Language {
  code: LanguageCode;
  name: string; // English
  nativeName: string; // 'Español'
  country: CountryCode; // the flag: 'ES'
  rtl: boolean; // written right to left
}

Accessibility​

Each row is named by the language's own name, such as "Deutsch", as the phone's language settings read it. Flags are hidden from screen readers. The field and the list have SelectPicker's accessibility.

Related​