react-native-flags-kit

React Native Flag component with all the flags in the world

Installation

yarn add @forward-software/react-native-flags-kit

Usage

import { Flag } from '@forward-software/react-native-flags-kit';

<Flag code="DE" size={32} />

Props

| Props | Type | Required | Default | Description | | :---- | :--------------------------------------- | :------: | :------ | :------------------------------------------------------------------------------------------------------------------------- | | code | string | YES | | The ISO code of a flag, for example "KH", "US" or "GB". | | type | flat or shiny | No | shiny | Display the flags with a shiny or flat effect. | | size | 16, 24, 32, 48, 64 or number | No | 64 | The size of a flag in points (Note: Setting a different size will render the closest one - e.g. 17 -> 16, 29 -> 32). | | style | | No | | Allows additional RN Image styles to be passed through. |

Full Example

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import { Flag } from '@forward-software/react-native-flags-kit';

export const App: React.FC = () => (
  <View style={styles.container}>
    <Flag code="US" size={64} />
    <Flag code="JP" size={64} />
    <Flag code="CN" size={64} />
    <Flag code="RU" size={64} />
    <Flag code="KH" size={64} />
    <Flag code="VN" size={64} />
    <Flag code="SG" size={64} />
    <Flag code="MY" size={64} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    fontSize: 30,
  },
});

For a more complete example check the example folder.

Contributing

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

Credits

This library is an update of react-native-flags-kit to make it work with latest React Native versions and fix old reported issues (e.g. #1)

License

MIT

Made with ✨ & ❤️ by ForWarD Software and contributors

If you found this project to be helpful, please consider contacting us to develop your React and React Native projects.