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 Example

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;

Props

Name	Type	Required	Default	Description
children	React.ReactNode	-	-	Flag content to display
style	StyleProp<ViewStyle>	-	-	Custom container styles

Inherits all props from ViewProps

Styling Considerations

Size Guidelines

• 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

Performance

• 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 Sensitivity

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