Merge pull request #4 from ThiBsc/currencies

Currencies

README.md

@@ -6,10 +6,11 @@ Available languages : 🇬🇧, 🇫🇷, 🇪🇸
 [<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' height="75"/>](https://play.google.com/store/apps/details?id=com.unitstool)
 [<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" height="75">](https://f-droid.org/packages/com.unitstool/)
 
-<div style="display: flex; flex-direction: row; justify-content: space-between;">
+<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;">
     <img alt="home" src="screenshot/home.png" style="width: 24%; height: 24%;"/>
     <img alt="languages" src="screenshot/languages.png" style="width: 24%; height: 24%;"/>
-    <img alt="temperature" src="screenshot/category.png" style="width: 24%; height: 24%;"/>
+    <img alt="category" src="screenshot/category.png" style="width: 24%; height: 24%;"/>
+    <img alt="currency" src="screenshot/currency.png" style="width: 24%; height: 24%;"/>
     <img alt="temperature" src="screenshot/darkmode.png" style="width: 24%; height: 24%;"/>
 </div>
 

package.json

@@ -15,13 +15,15 @@
     "@react-navigation/native-stack": "^6.6.2",
     "@rneui/base": "^4.0.0-rc.3",
     "@rneui/themed": "^4.0.0-rc.3",
+    "axios": "^0.27.2",
     "i18next": "^21.8.4",
     "react": "17.0.2",
     "react-i18next": "^11.16.9",
     "react-native": "0.68.2",
     "react-native-popup-menu": "^0.15.12",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",
+    "react-native-snackbar": "^2.4.0",
     "react-native-touchable-scale": "^2.1.2",
     "react-native-vector-icons": "^9.1.0"
   },

src/components/ListCategoryItem.js

@@ -3,6 +3,7 @@ import { Icon } from "@rneui/themed";
 import TouchableScale from 'react-native-touchable-scale';
 import { ListItem, Text, useTheme } from "@rneui/themed";
 import { useTranslation } from 'react-i18next';
+import { currencyCount } from 'src/utils/currencies';
 
 const ListCategoryItem = ({ navigation, conversion }) => {
 
@@ -24,7 +25,11 @@ const ListCategoryItem = ({ navigation, conversion }) => {
           <Text>{t(conversion.title)}</Text>
         </ListItem.Title>
         <ListItem.Subtitle>
-          <Text style={{color: theme.colors.grey2}}>({conversion.units.length} {t('units')})</Text>
+          {
+            conversion.category === 'currency'
+            ? <Text style={{color: theme.colors.grey2}}>({currencyCount} {t('currencies')})</Text>
+            : <Text style={{color: theme.colors.grey2}}>({conversion.units.length} {t('units')})</Text>
+          }
         </ListItem.Subtitle>
       </ListItem.Content>
     </ListItem>

src/components/ListUnitItem.js

@@ -26,7 +26,10 @@ const ListUnitItem = ({ unit, value, isReferenceUnit, setRefUnit }) => {
           <Text>{unit.symbol}</Text>
         </ListItem.Title>
         <ListItem.Subtitle>
-          <Text style={{color: 'grey'}}>{t(unit.name)}</Text>
+          <Text style={{color: 'grey'}}>
+            {unit.emoji ? `${unit.emoji} ` : null}
+            {t(unit.name)}
+          </Text>
         </ListItem.Subtitle>
       </ListItem.Content>
 

src/components/UnitValue.js

@@ -24,7 +24,10 @@ const UnitValue = ({ value, setValue, unit }) => {
         />
       </View>
       <View style={{flex: 0, flexDirection: 'row', alignItems: 'center', marginRight: 5}}>
-        <Text style={{fontWeight: 'bold', fontSize: 20, color: theme.colors.grey0}}>{unit?.symbol ?? ''}</Text>
+        <Text style={{fontWeight: 'bold', fontSize: 20, color: theme.colors.grey0}}>
+          {unit?.symbol ?? ''}
+          {unit?.emoji ? ` ${unit.emoji}` : ''}
+        </Text>
       </View>
     </View>
   );