feat(flags): emoji

fix(only ios): emoji flags

data/cca2.json

@@ -0,0 +1 @@
+["AF","AL","DZ","AS","AD","AO","AI","AQ","AG","AR","AM","AW","AU","AT","AZ","BS","BH","BD","BB","BY","BE","BZ","BJ","BM","BT","BO","BA","BW","BV","BR","IO","VG","BN","BG","BF","BI","KH","CM","CA","CV","KY","CF","TD","CL","CN","CX","CC","CO","KM","CK","CR","HR","CU","CW","CY","CZ","CD","DK","DJ","DM","DO","EC","EG","SV","GQ","ER","EE","ET","FK","FO","FJ","FI","FR","GF","PF","TF","GA","GM","GE","DE","GH","GI","GR","GL","GD","GP","GU","GT","GG","GN","GW","GY","HT","HM","HN","HK","HU","IS","IN","ID","IR","IQ","IE","IM","IL","IT","CI","JM","JP","JE","JO","KZ","KE","KI","XK","KW","KG","LA","LV","LB","LS","LR","LY","LI","LT","LU","MO","MK","MG","MW","MY","MV","ML","MT","MH","MQ","MR","MU","YT","MX","FM","MD","MC","MN","ME","MS","MA","MZ","MM","NA","NR","NP","NL","NC","NZ","NI","NE","NG","NU","NF","KP","MP","NO","OM","PK","PW","PS","PA","PG","PY","PE","PH","PN","PL","PT","PR","QA","CG","RO","RU","RW","RE","BL","KN","LC","MF","PM","VC","WS","SM","SA","SN","RS","SC","SL","SG","SX","SK","SI","SB","SO","ZA","GS","KR","SS","ES","LK","SD","SR","SJ","SZ","SE","CH","SY","ST","TW","TJ","TZ","TH","TL","TG","TK","TO","TT","TN","TR","TM","TC","TV","UG","UA","AE","GB","US","UM","VI","UY","UZ","VU","VA","VE","VN","WF","EH","YE","ZM","ZW","AX"]

package.json

@@ -9,7 +9,9 @@
   },
   "scripts": {
     "lint": "eslint ./src",
-    "gendata": "babel-node ./scripts/transform-world-countries.js > ./data/countries.json"
+    "gendata": "rm -rf ./data/countries.json && babel-node ./scripts/transform-world-countries.js > ./data/countries.json",
+    "gendata-emoji": "rm -rf ./data/countries-emoji.json && babel-node ./scripts/transform-world-countries.js --emoji > ./data/countries-emoji.json",
+    "gendata-cca2": "rm -rf ./data/cca2.json && babel-node ./scripts/transform-world-countries.js --cca2 > ./data/cca2.json"
   },
   "keywords": [
     "react-native",
@@ -27,6 +29,7 @@
   "dependencies": {
     "babel-preset-react-native-stage-0": "1.0.1",
     "lodash": "4.12.0",
+    "react-native-emoji": "1.2.0",
     "world-countries": "1.8.0"
   },
   "devDependencies": {

scripts/transform-world-countries.js

@@ -1,6 +1,9 @@
 import countries from 'world-countries';
 import flags from '../src/countryFlags';
 
+const isEmoji = process.argv.includes('--emoji');
+const isCca2 = process.argv.includes('--cca2');
+
 const getCountryNames = (common, translations) => Object
     .keys(translations)
     .map(key => ({ [key]: translations[key].common }))
@@ -12,7 +15,7 @@ const newcountries = countries
       [cca2]: {
         currency: currency[0],
         callingCode: callingCode[0],
-        flag: flags[cca2],
+        flag: isEmoji ? `flag-${cca2.toLowerCase()}` : flags[cca2],
         name: { common, ...getCountryNames(common, translations) },
       },
     })
@@ -33,4 +36,8 @@ const newcountries = countries
     }),
     {});
 
-console.log(JSON.stringify(newcountries, null, 1)); // eslint-disable-line
+if (!isCca2) {
+  console.log(JSON.stringify(newcountries)); // eslint-disable-line
+} else {
+  console.log(JSON.stringify(Object.keys(newcountries))); // eslint-disable-line
+}

src/CountryPicker.js

@@ -5,15 +5,32 @@
  */
 
 import React, { Component } from 'react';
-import { View, Image, TouchableOpacity, Modal, Text, ListView } from 'react-native';
+import { View, Image, TouchableOpacity, Modal, Text, ListView, Platform } from 'react-native';
 import _ from 'lodash';
 
-import countries from '../data/countries';
-
+import cca2List from '../data/cca2';
 import { getHeightPercent } from './ratio';
 import CloseButton from './CloseButton';
 import styles from './CountryPicker.style';
 
+let countries = null;
+let Emoji = null;
+
+// Maybe someday android get all flags emoji
+// but for now just ios
+// const isEmojiable = Platform.OS === 'ios' ||
+// (Platform.OS === 'android' && Platform.Version >= 21);
+const isEmojiable = Platform.OS === 'ios';
+
+if (isEmojiable) {
+  countries = require('../data/countries-emoji');
+  Emoji = require('react-native-emoji').default;
+} else {
+  countries = require('../data/countries');
+
+  Emoji = <View />;
+}
+
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 
 export default class CountryPicker extends Component {
@@ -27,24 +44,11 @@ export default class CountryPicker extends Component {
     translation: 'eng',
   }
 
-  constructor(props) {
-    super(props);
-    this.openModal = this.openModal.bind(this);
-    this.letters = _
-      .range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1)
-      .map(n => String.fromCharCode(n).substr(0));
-
-    // dimensions of country list and window
-    this.itemHeight = getHeightPercent(7);
-    this.listHeight = countries.length * this.itemHeight;
-
-    const cca2List = Object.keys(countries);
-    this.state = {
-      modalVisible: false,
-      cca2List,
-      dataSource: ds.cloneWithRows(cca2List),
-    };
-  }
+  state = {
+    modalVisible: false,
+    cca2List,
+    dataSource: ds.cloneWithRows(cca2List),
+  };
 
   onSelectCountry(cca2) {
     this.setState({
@@ -68,6 +72,15 @@ export default class CountryPicker extends Component {
     this.visibleListHeight = getHeightPercent(100) - offset;
   }
 
+  openModal = this.openModal.bind(this);
+  letters = _
+    .range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1)
+    .map(n => String.fromCharCode(n).substr(0));
+
+  // dimensions of country list and window
+  itemHeight = getHeightPercent(7);
+  listHeight = countries.length * this.itemHeight;
+
   openModal() {
     this.setState({ modalVisible: true });
   }
@@ -122,12 +135,7 @@ export default class CountryPicker extends Component {
     const country = countries[cca2];
     return (
       <View style={styles.itemCountry}>
-        <View style={styles.itemCountryFlag}>
-          <Image
-            style={styles.imgStyle}
-            source={{ uri: countries[cca2].flag }}
-          />
-        </View>
+        {this.renderFlag(cca2)}
         <View style={styles.itemCountryName}>
           <Text style={styles.countryName}>
             {this.getCountryName(country)}
@@ -137,6 +145,29 @@ export default class CountryPicker extends Component {
     );
   }
 
+  renderEmojiFlag(cca2) {
+    return (
+      <Text style={styles.emojiFlag}>
+        <Emoji name={countries[cca2].flag} />
+      </Text>
+    );
+  }
+
+  renderImageFlag(cca2) {
+    return (
+      <View style={styles.itemCountryFlag}>
+        <Image
+          style={styles.imgStyle}
+          source={{ uri: countries[cca2].flag }}
+        />
+      </View>
+    );
+  }
+
+  renderFlag(cca2) {
+    return isEmojiable ? this.renderEmojiFlag(cca2) : this.renderImageFlag(cca2);
+  }
+
   render() {
     return (
       <View>
@@ -145,10 +176,7 @@ export default class CountryPicker extends Component {
           activeOpacity={0.7}
         >
           <View style={styles.touchFlag}>
-            <Image
-              style={styles.imgStyle}
-              source={{ uri: countries[this.props.cca2].flag }}
-            />
+            {this.renderFlag(this.props.cca2)}
           </View>
         </TouchableOpacity>
         <Modal

src/CountryPicker.style.js

@@ -1,5 +1,5 @@
 import { StyleSheet, PixelRatio } from 'react-native';
-import { getWidthPercent, getHeightPercent, getPercent } from './ratio';
+import { getWidthPercent, getHeightPercent } from './ratio';
 
 export default StyleSheet.create({
   modalContainer: {
@@ -14,9 +14,6 @@ export default StyleSheet.create({
   touchFlag: {
     alignItems: 'center',
     justifyContent: 'center',
-    margin: getPercent(0.5),
-    width: getWidthPercent(5.5),
-    height: getHeightPercent(2.5),
   },
   imgStyle: {
     resizeMode: 'contain',
@@ -26,6 +23,15 @@ export default StyleSheet.create({
     borderColor: '#eee',
     opacity: 0.8,
   },
+  emojiFlag: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 30,
+    width: 30,
+    height: 30,
+    borderWidth: 1 / PixelRatio.get(),
+    borderColor: 'transparent',
+  },
   itemCountry: {
     flexDirection: 'row',
     height: getHeightPercent(7),