pohodnya/react-native-round-flags

react-native-round-flags

Fun with flags (in React Native)!

Example

Usage

import Flag from 'react-native-round-flags';

const JustAFlag = () =>
  <Flag code="DE"/>

### Props

code

Type: String

The ISO code of a flag, for example "DE", "FR" or "GB"

style (optional)

Allows additional styles to be passed through.

License

MIT

react-native-round-flags's Issues

Doesnt work with node v13.11.0

I am trying this with my project that uses create-react-app and node v13.11.0. This is what I get after installing this flag library and running my project -

Failed to compile.

./node_modules/react-native-round-flags/index.js
SyntaxError: ....../falcon-ui/node_modules/react-native-round-flags/index.js: Unexpected token, expected ";" (7:5)

   5 | import * as flags from './flags';
   6 | 
>  7 | type Props = {
     |      ^
   8 |   code: string,
   9 |   style?: any,
  10 | };

Missing Flags

The following flags are missing:

• Bouvet Island
• Congo (Republic)
• Dominica
• French Guiana
• Heard Island and McDonald Islands
• Kosovo
• Saint Barthelemy
• Saint Martin
• United States Minor Outlying Islands
• Western Sahara

Some of them do not have separate flags. Bouvet Island has the Norwegian flag. However, others like Kosovo do have a separate flag.

Typescript support

would need typescript support for this package

@types file with type declarations

You should add font size or width property.

Please Add a screenshot in Readme.md showing how round flags looks

"Belarus" Country flag is missing

Hi,

"Belarus" country flag "BY" is missing in index.js. need to BY.png in index.js

Selected flag border

I'm trying to put border around selected flag. How can I achieve the same circular border on all devices.

Currently I'm doing this:

<ListView 
 horizontal={true}
          dataSource={this.state.siteLangdataSource}
          renderRow={ 
            (item) => 
              <TouchableOpacity  button onPress={() => this.setLang(item.LanguageId)} key = {item.LanguageName}>
              <Flag style={item.isSelect == true ? styles.flagRoundedItem: styles.flagItem} code = {item.LanguageCode == 'EN'? 'GB' : item.LanguageCode}  />
                 </TouchableOpacity>
             }
        />

Style.js

HEIGHT & WIDTH are screen h&w.

flagItem:
{
  height: HEIGHT/16,
  width: WIDTH/10,
  margin:WIDTH/20,
},
flagRoundedItem:
{
  borderRadius: WIDTH/10,
  height: HEIGHT/16,
  width: WIDTH/10,
  borderWidth: 5,
  borderColor: secondarycolor,
  margin:WIDTH/20,
},

The radius is not correct for few devices:

On some devices it looks absolutely fine: