Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 2x 45x 43x 45x 43x 1x 1x 1x 40x 45x 2x 43x 43x 43x | import React from 'react';
import { CountryFlagNativeProps } from './CountryFlag.native.types';
import { StyleProp, Text, View, ViewStyle } from 'react-native';
import { Flag } from '@forward-software/react-native-flags-kit';
import { isValid } from 'i18n-iso-countries';
export const CountryFlag: React.FC<CountryFlagNativeProps> = ({
id,
countryCode,
size,
altText,
rounded,
shadow,
className,
}) => {
const isValidCountryCode = () => {
return isValid(countryCode);
};
const getSize = () => {
switch (size) {
case 'small':
return 16;
case 'medium':
return 24;
case 'large':
return 32;
default:
return typeof size === 'number' ? size : 24;
}
};
if (!countryCode || !isValidCountryCode()) {
return (
<Text className="text-text-primary" testID={id}>
{altText ?? `Flag of ${countryCode}`}
</Text>
);
}
const flagSize = getSize();
const containerStyle: StyleProp<ViewStyle> = {
shadowColor: shadow ? '#000' : 'transparent',
shadowOffset: { width: 2, height: 3 },
shadowOpacity: shadow ? 0.25 : 0,
shadowRadius: shadow ? 3.5 : 0,
elevation: shadow ? 5 : 0,
};
return (
<View testID={id} style={containerStyle} className={className}>
<Flag
code={countryCode.toUpperCase()}
type='flat'
size={flagSize}
style={{
borderRadius: rounded ? 4 : undefined,
}}
/>
</View>
);
};
|