react-native-country-flag
This is a react-native package to display every 254 country flag with the ISO 3166-1 alpha-2 Standard!
📖 Table of Contents
⬇️ Install package
npm install --save react-native-country-flag
💾 Data
Data required for the countryflag component to work has been completely decoupled from the library. That gives developers the flexibility to better control their app bundle size and let them choose how and when this data is loaded. Data can be:
Usage with remotely Fetched flags
- Pros: Data fetched only when needed, does not affect your app bundle size
- Cons: Network latency, doesn’t work offline
import CountryFlag from "react-native-country-flag";
<CountryFlag isoCode="de" size={25} />
Usage with flags directly Bundled into your codebase
🚧 Note: Still in progress (probely available in v2.1)
- Pros: Component renders instantly, data is available offline
- Cons: Does affect your app bundle size
npm install --save react-native-country-flag/data
import CountryFlag from "react-native-country-flag";
import flags from "react-native-country-flag/data";
<CountryFlag isoCode="de" size={25} flags={flags} />
🚩 Flag component (props)
import CountryFlag from "react-native-country-flag";
<CountryFlag isoCode="de" size={25} />
You can only use the ISO 3166-1 alpha-2 Standard for the isoCode property.
Prop | Type | Desciption |
---|---|---|
isoCode | String | Define the country flag with the ISO 3166-1 alpha-2 Standard. |
size | Integer | Define the size from the country flag. |
style | Stylesheet | Customize the style from the CountryFlag component. |
flags | Optional: pass bundeled flags CountryFlag component. |
📝 License
MIT © Yannis Hofmann