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

You should add font size or width property.

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:

Typescript support

would need typescript support for this package

@types file with type declarations

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.

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 | };

"Belarus" Country flag is missing

Hi,

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

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