Change icon to image

mymoneymanager/package.json

@@ -38,6 +38,7 @@
     "react-native-customisable-alert": "^0.1.20",
     "react-native-dropdown-select-list": "^1.0.23",
     "react-native-elements": "^3.4.2",
+    "react-native-flatlist-picker": "^1.0.1",
     "react-native-gesture-handler": "^2.7.0",
     "react-native-hide-show-password-input": "^1.2.0",
     "react-native-item-select": "^0.4.2",

mymoneymanager/screens/home/index.js

@@ -43,6 +43,10 @@ const coupon = require ('../../images/coupon.png');
 const allowance = require ('../../images/salary.png');
 const refund = require ('../../images/refund.png');
 const edu = require ('../../images/education.png');
+const walletacc = require ('../../images/walletacc.png');
+const cashacc = require ('../../images/cashacc.png');
+const debitacc = require ('../../images/debitacc.png');
+const cardacc = require ('../../images/cardacc.png');
 const Stack = createNativeStackNavigator();
 // const navigation = useNavigation();
 const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
@@ -69,7 +73,7 @@ const DATE ={
        image:require('../../images/salary.png'),
        account:'Card',
        amount:'RM30.00',
-       icon:'card-outline',
+       image1:require ('../../images/cardacc.png')
       },
       {
        id:"1",
@@ -77,7 +81,7 @@ const DATE ={
        image:require('../../images/medal.png'),
        account:'Cash',
        amount:'RM100.00',
-       icon:'cash-outline'
+       image1:require ('../../images/cashacc.png')
       },
      ]
     }
@@ -91,7 +95,7 @@ const DATE ={
        image:require('../../images/coupon.png'),
        account:'Card',
        amount:'RM30.00',
-       icon:'card-outline',
+       image1:require ('../../images/cardacc.png')
       },
       {
        id:"3",
@@ -99,7 +103,7 @@ const DATE ={
        image:require('../../images/refund.png'),
        account:'Cash',
        amount:'RM100.00',
-       icon:'cash-outline'
+       image1:require ('../../images/cashacc.png')
       },
       {
         id:"4",
@@ -107,7 +111,7 @@ const DATE ={
         image:require('../../images/cheque.png'),
         account:'Cash',
         amount:'RM100.00',
-        icon:'cash-outline'
+        image1:require ('../../images/cashacc.png')
        },
     ]
   }
@@ -122,7 +126,7 @@ const DATE ={
      account:'Card',
      amount:'RM30.00',
      amountCurrency:'Rp70,000',
-     icon:'card-outline',
+     image1:require ('../../images/cardacc.png')
     },
     {
      id:"6",
@@ -130,7 +134,7 @@ const DATE ={
      image:require('../../images/sale.png'),
      account:'Cash',
      amount:'RM100.00',
-     icon:'cash-outline'
+     image1:require ('../../images/cashacc.png')
     },
     {
       id:"7",
@@ -138,7 +142,7 @@ const DATE ={
       image:require('../../images/shoppingcart.png'),
       account:'Cash',
       amount:'RM100.00',
-      icon:'cash-outline'
+      image1:require ('../../images/cashacc.png')
      },
   ]
 }
@@ -152,7 +156,7 @@ const DATE3 ={
    image:require('../../images/education.png'),
    account:'Card',
    amount:'RM30.00',
-   icon:'cash-outline',
+   image1:require ('../../images/cardacc.png')
   },
   {
    id:"9",
@@ -160,7 +164,7 @@ const DATE3 ={
    image:require('../../images/train.png'),
    account:'Cash',
    amount:'RM100.00',
-   icon:'cash-outline'
+   image1:require ('../../images/cashacc.png')
   },
   {
     id:"10",
@@ -168,7 +172,7 @@ const DATE3 ={
     image:require('../../images/cutlery.png'),
     account:'Cash',
     amount:'RM100.00',
-    icon:'cash-outline'
+    image1:require ('../../images/cashacc.png')
    },
    {
     id:"11",
@@ -176,7 +180,7 @@ const DATE3 ={
     image:require('../../images/phone.png'),
     account:'Wallet',
     amount:'RM100.00',
-    icon:'wallet-outline'
+    image1:require ('../../images/walletacc.png')
    },
    {
     id:"12",
@@ -184,15 +188,15 @@ const DATE3 ={
     image:require('../../images/bill.png'),
     account:'Cash',
     amount:'RM100.00',
-    icon:'cash-outline'
+    image1:require ('../../images/cashacc.png')
    },
    {
     id:"13",
     type:"Health",
     image:require('../../images/firstaidkit.png'),
-    account:'Cash',
+    account:'Debit',
     amount:'RM100.00',
-    icon:'cash-outline'
+    image1:require ('../../images/debitacc.png')
    },
  ]
 }
@@ -208,7 +212,7 @@ const DATE3 ={
                <View style={{marginBottom:15}}>
                  <Text style={[styles.textStyle1, {marginHorizontal:10}]}>{item.type}</Text>
                   <View style={{flexDirection:'row'}}>
-                    <Ionics name={item.icon} size={20} color="#838383" style={{marginHorizontal:10}}></Ionics>
+                    <Image source={item.image1} style={{marginHorizontal:10, width:20, height:20}}/>
                     <Text style={[styles.textStyle2, {marginHorizontal:0, marginVertical:3}]}>{item.account}</Text>
                   </View>
                </View>

mymoneymanager/screens/transactions/style.js

@@ -85,5 +85,19 @@ const styles = StyleSheet.create ({
         marginHorizontal:9,
         marginTop:9,
       },
+
+      containerBox:{
+        borderWidth: 1,
+    borderColor: '#CECECE',
+    width: 250,
+    height: 50,
+    alignSelf: 'center',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginTop: 30,
+    padding: 5,
+      },
+
 });
 export default styles;
\ No newline at end of file

mymoneymanager/yarn.lock

@@ -6743,6 +6743,14 @@ react-native-elements@^3.4.2:
     react-native-ratings "8.0.4"
     react-native-size-matters "^0.3.1"
 
+react-native-flatlist-picker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-flatlist-picker/-/react-native-flatlist-picker-1.0.1.tgz#eeac38f06939e655aa4eb50a711476a8ce3efe86"
+  integrity sha512-IXgnce/pHRU2+tlozQt+qqviabQEALJ4mXSF0//Ud1nm74QbhRP//h5mCzdWAhOTAsfQ07vTQP6pzV8YDksmaQ==
+  dependencies:
+    prop-types "^15.6.0"
+    react-native-vector-icons "^6.6.0"
+
 react-native-gesture-handler@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.7.0.tgz#53ad828add926c8e025f68ea581758c0f8893054"
@@ -6989,6 +6997,15 @@ react-native-tab-view@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz#1f8d7a835ab4f5b1b1407ec8dddc1053b53fa3c6"
   integrity sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==
 
+react-native-vector-icons@^6.6.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-6.7.0.tgz#8871ba52ef8e98878ba7a932847f96b6dfc1c137"
+  integrity sha512-LKdwqDIGVxV1+4HnmFIPaok9hba3WyTQ7H2Wj5RFv54zIdIjixrAiV9VD/Ej9Mc5/rUhTpmMiIVF3LVmVYD7dg==
+  dependencies:
+    lodash "^4.17.15"
+    prop-types "^15.7.2"
+    yargs "^15.0.2"
+
 react-native-vector-icons@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-7.1.0.tgz#145487d617b2a81d395d2cf64e6e065fcab3a454"