LanguageSwitcher.Option.Flag

A flexible container component for displaying language flags or flag-related imagery. Provides consistent styling and layout for visual language identification elements.

Basic ExampleCopy Anchor Link

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

const BasicFlag = () => (
  <LanguageSwitcher.Option.Flag>
    <Text>🇺🇸</Text>
  </LanguageSwitcher.Option.Flag>
);

export default BasicFlag;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/language-switcher API reference.

Styling ConsiderationsCopy Anchor Link

Size GuidelinesCopy Anchor Link

• Standard emoji flags: 20-28px font size
• Image flags: 24-32px width, 16-24px height (3:2 or 4:3 ratio)
• Icon flags: 20-24px size for clarity
• Responsive sizing for different screen sizes

PerformanceCopy Anchor Link

• Optimize flag images for mobile devices
• Use SVG for scalable flag graphics
• Consider lazy loading for large flag collections
• Cache flag assets for improved performance

Cultural SensitivityCopy Anchor Link

• Use officially recognized flag representations
• Consider regional flag variations when appropriate
• Respect flag display protocols and guidelines
• Provide fallbacks for unrecognized regions