Skip to main content

LanguageSwitcher

LanguageSwitcher is a controlled View that provides the selected language and change callback to its option children. It does not own an i18n instance, a language catalog, persistence, or translation loading.

const [language, setLanguage] = React.useState("en_US");

<LanguageSwitcher
  selectedLanguage={language}
  onLanguageChange={setLanguage}
>
  <LanguageSwitcher.Option value="en_US">
    <LanguageSwitcher.Option.RadioButton />
    <LanguageSwitcher.Option.Label>English</LanguageSwitcher.Option.Label>
  </LanguageSwitcher.Option>
  <LanguageSwitcher.Option value="de_DE">
    <LanguageSwitcher.Option.RadioButton />
    <LanguageSwitcher.Option.Label>Deutsch</LanguageSwitcher.Option.Label>
  </LanguageSwitcher.Option>
</LanguageSwitcher>;

Props and behavior​

Required props are selectedLanguage: string and onLanguageChange(language: string). The component also accepts React Native ViewProps. There is no languages prop; render the option children your app supports.

LanguageSwitcher.Option accepts value, TouchableOpacityProps, and children. Pressing an option calls onLanguageChange(value) and then its optional caller onPress. It also provides option state to RadioButton, Label, and Flag.

  • Option.RadioButton wraps Paper's Android radio button and controls status and value from context; those two props cannot be overridden.
  • Option.Label wraps Paper Text, applies the SDK bold label style, and accepts Paper text props.
  • Option.Flag is a plain View wrapper; the app supplies the flag content.

Hook and context​

useLanguageSwitcher reads the provider and throws when used outside LanguageSwitcher. LanguageSwitcherContext and LanguageSwitcherContextType are public escape hatches. The SDK only communicates the selected string; the integrating app decides how that string changes the active locale and whether it is persisted.