React Native Country Flag Component react-native-country-flag-using-country-code

A simple React Native component to display country flags based on the provided country code. This component is built using TypeScript and is designed for easy integration into your React Native applications.Get country flag using country iso code

Features

• Accepts a country code as a string and renders the corresponding flag.
• The component is flexible, allowing you to control the size of the flag and apply custom styling.
• Pure TypeScript library with type safety for props.
• Allows passing additional Image props for customization.

Installation

npm install react-native-country-flag-using-country-code
or 
yarn add react-native-country-flag-using-country-code

Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {CountryFlag} from 'react-native-country-flag-using-country-code';

const App = () => {
  return (
    <View style={styles.container}>
      {/* Render a flag for the United States (US) */}
      <CountryFlag countryCode="US" size={32} />

      {/* Render a flag for Canada (CA) */}
      <CountryFlag countryCode="CA" size={32} style={{ marginLeft: 10 }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 50,
  },
});

export default App;

Props

| Name | Type | Default | Description | | ------------- | ---------------------- | ------- | --------------------------------------------------------------------------- | | countryCode | string | | The country code (ISO 3166-1 alpha-2 format) for the flag to display. | | size | number | 16 | The size (width and height) of the flag image in pixels. | | style | StyleProp<ViewStyle> | {} | Additional styles to apply to the flag container. | | imageProps | ImageProps | {} | Additional props to be passed to theImage component (e.g., resizeMode). |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

The props table will now render correctly in markdown format. If you use a markdown previewer or GitHub, the table will display nicely.

Pros:

• The table is simple and clear to understand.
• It allows easy updates to props if necessary.

Cons:

• If you add too many props in the future, the table might become cluttered and harder to read. A collapsible section might help in that case.

Let me know if you'd like to add anything else!