LanguageSwitcher.Option

A touchable option component for individual language selection. Provides context for its child components and handles selection state, styling, and interaction feedback with Material Design 3 theming.

Basic Example

import { LanguageSwitcher } from "@ovok/native";
import * as React from "react";

const BasicLanguageSwitcherOption = () => (
  // This component needs to be wrapped in a LanguageSwitcher component to work
  <LanguageSwitcher selectedLanguage="en_US" onLanguageChange={() => {}}>
    <LanguageSwitcher.Option value="en_US">
      <LanguageSwitcher.Option.RadioButton />
      <LanguageSwitcher.Option.Label>English</LanguageSwitcher.Option.Label>
    </LanguageSwitcher.Option>
  </LanguageSwitcher>
);

export default BasicLanguageSwitcherOption;

Props

Name	Type	Required	Default	Description
value	string	✓	-	Language code identifier for option
children	React.ReactNode	-	-	Option content components to display
style	StyleProp<ViewStyle>	-	-	Custom container styles
onPress	(event: GestureResponderEvent) => void	-	-	Additional press handler

Inherits all props from TouchableOpacityProps

Compound Components

• LanguageSwitcher.Option.RadioButton - Radio button selection control
• LanguageSwitcher.Option.Label - Language name display component
• LanguageSwitcher.Option.Flag - Flag display component

Component Behavior

Selection Logic

• Compares own value prop with parent's selectedLanguage
• Automatically manages visual selection state
• Triggers parent onLanguageChange when pressed
• Provides selection context to child components

Visual States

• Selected: Primary border color and background emphasis
• Unselected: Disabled border color and transparent background
• Pressed: Touch opacity feedback for interaction
• Disabled: Reduced opacity and disabled interactions

Styling

Theme Colors Used

• theme.colors.primary - Selected border color
• theme.colors.onSurfaceDisabled - Unselected border color
• theme.colors.surface - Background color
• theme.spacing(2) - Internal gap and padding (8px default)
• theme.borderRadius(2) - Corner radius (8px default)