Skip to main content

LanguageSwitcher

The LanguageSwitcher module provides a comprehensive internationalization component system for language selection in React Native applications. Built as a compound component with Context API for state management, Material Design 3 theming, and flexible customization options.

Overview​

The LanguageSwitcher module offers a complete solution for language selection interfaces with radio button controls, flag displays, and seamless i18n integration. All components follow accessibility standards and support both controlled and uncontrolled usage patterns.

Key Features​

  • Compound Component Architecture: Flexible structure with LanguageSwitcher.Option, Flag, Label, and RadioButton sub-components
  • Context-Based State Management: Efficient state sharing between parent and child components
  • i18n Integration: Seamless integration with react-i18next and other internationalization libraries
  • Material Design 3: Consistent theming with automatic light/dark mode support
  • Radio Button Interface: Native radio button controls with proper selection states
  • Flag Support: Built-in flag display component for visual language identification
  • Accessibility First: Full screen reader support and keyboard navigation
  • TypeScript Support: Complete type safety with generic component props
  • Theme Integration: Automatic color, spacing, and typography from app theme

Core Components​

Architecture​

The LanguageSwitcher follows the SDK's compound component pattern with Context API:

  • Provider Component: LanguageSwitcher manages selected language state
  • Option Components: LanguageSwitcher.Option handles individual language items
  • Composition Flexibility: Mix and match sub-components as needed