search

xcarpentier / react-native-country-picker-modal

🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
https://reactnative.gallery/xcarpentier/country-picker
MIT License
1.07k stars 796 forks source link

Flag are not displayed on the web #433

Closed kopax-polyconseil closed 2 years ago

kopax-polyconseil commented 3 years ago

Issue Description

I'd like to say thanks for sharing, this module is awesome,

I have a little question since your Web example demo also show black flags, as in our web application:

image

But the screenshot here in the readme show the correct flag:

image

Is there anything extra to set up in order to have proper flags for countries in our Web application?

WendyPassculture commented 2 years ago

The component uses font -apple-system to show the country flags. The -apple-system font is not fully compatible with some browser on Linux or Windows.

It could be better to use png images or maybe give the possibility to choose png or font

kopax-polyconseil commented 2 years ago

withEmoji=false use base 64 sources with <img /> .

SVG alternative

Using https://www.npmjs.com/package/react-world-flags,

yarn add -D react-world-flags @types/react-world-flags
echo "export { Flag } from '../../../src/ui/components/Flags'" > node_modules/react-native-country-picker-modal/lib/Flag.web.js`
npx patch-package react-native-country-picker-modal
wget -O src/ui/components/Flags.tsx https://raw.githubusercontent.com/xcarpentier/react-native-country-picker-modal/master/src/Flag.tsx

Then use svg with Flag component, from src/ui/components/Flags:

+ import RWFlag from 'react-world-flags'
- <EmojiFlag {...{ countryCode, flagSize }} />
+ <RNWFlag code={countryCode} height={flagSize} />