Skip to main content

LanguageSwitcher.Option.Label

A text component for displaying language names with consistent typography and styling. Built on react-native-paper Text component with custom font styling and theme integration.

Basic Example​


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

const BasicLabel = () => (
  <LanguageSwitcher.Option.Label>English</LanguageSwitcher.Option.Label>
);

export default BasicLabel;

Props​

NameTypeRequiredDefaultDescription
childrenReact.ReactNode--Language text to display
styleStyleProp<TextStyle>--Custom text styles

Inherits all props from react-native-paper TextProps with generic type support

Component Behavior​

Typography System​

  • Uses DMSans_700Bold font family for clear language identification
  • Applies 16px font size for optimal readability
  • Includes flex: 1 for proper layout within option containers
  • Maintains consistent line height and spacing

Text Rendering​

  • Supports multilingual text rendering
  • Handles right-to-left (RTL) languages properly
  • Provides accessible text contrast
  • Integrates with react-native-paper theming

Layout Integration​

  • Automatically adjusts to available space within options
  • Maintains proper alignment with flags and radio buttons
  • Supports text wrapping for longer language names
  • Optimizes layout for different screen sizes

Styling​

Default Typography​

  • Font Family: DMSans_700Bold
  • Font Size: 16px
  • Layout: flex: 1 for space distribution
  • Theme Integration: Inherits theme colors automatically