React-native-country-flag NPM

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.