feat(language-list): add emoji flags (#355)

gitpoint · Sep 25, 2017 · a991bd7 · a991bd7
1 parent 8fc73ad
commit a991bd7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/src/auth/screens/language-settings.js b/src/auth/screens/language-settings.js
@@ -1,6 +1,7 @@
 export default [
   {
     code: 'en',
+    emojiCode: 'us',
     name: 'English',
   },
   {

diff --git a/src/auth/screens/user-options.screen.js b/src/auth/screens/user-options.screen.js
@@ -8,14 +8,15 @@ import {
   FlatList,
   Text,
   TouchableOpacity,
+  View,
 } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import { NavigationActions } from 'react-navigation';
 import CookieManager from 'react-native-cookies';
 
 import { ViewContainer, SectionList } from 'components';
 import { colors, fonts, normalize } from 'config';
-import { resetNavigationTo, translate } from 'utils';
+import { resetNavigationTo, translate, emojifyText } from 'utils';
 import { version } from 'package.json';
 import codePush from 'react-native-code-push';
 import { signOut, changeLanguage } from 'auth';
@@ -59,6 +60,13 @@ const styles = StyleSheet.create({
   updateTextSub: {
     fontSize: normalize(11),
   },
+  language: {
+    flexDirection: 'row',
+  },
+  flag: {
+    paddingRight: 7,
+    color: colors.black, // random any color for the correct display emoji
+  },
 });
 
 const updateText = lang => ({
@@ -143,15 +151,29 @@ class UserOptions extends Component {
           <SectionList title={translate('auth.userOptions.language', language)}>
             <FlatList
               data={languages}
-              renderItem={({ item }) =>
-                <ListItem
-                  title={item.name}
-                  titleStyle={styles.listTitle}
-                  hideChevron={language !== item.code}
-                  rightIcon={{ name: 'check' }}
-                  onPress={() => changeLanguage(item.code)}
-                  underlayColor={colors.greyLight}
-                />}
+              renderItem={({ item }) => {
+                const langCode = item.emojiCode || item.code.substring(0, 2);
+
+                return (
+                  <ListItem
+                    title={
+                      <View style={styles.language}>
+                        <Text style={styles.flag}>
+                          {emojifyText(`:flag-${langCode}:`)}
+                        </Text>
+                        <Text style={styles.listTitle}>
+                          {item.name}
+                        </Text>
+                      </View>
+                    }
+                    titleStyle={styles.listTitle}
+                    hideChevron={language !== item.code}
+                    rightIcon={{ name: 'check' }}
+                    onPress={() => changeLanguage(item.code)}
+                    underlayColor={colors.greyLight}
+                  />
+                );
+              }}
               keyExtractor={(item, index) => index}
               extraData={this.props.language}
             />