Commit 113f09ef authored by Farhani's avatar Farhani

Change icon to image

parent f4825239
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
"react-native-customisable-alert": "^0.1.20", "react-native-customisable-alert": "^0.1.20",
"react-native-dropdown-select-list": "^1.0.23", "react-native-dropdown-select-list": "^1.0.23",
"react-native-elements": "^3.4.2", "react-native-elements": "^3.4.2",
"react-native-flatlist-picker": "^1.0.1",
"react-native-gesture-handler": "^2.7.0", "react-native-gesture-handler": "^2.7.0",
"react-native-hide-show-password-input": "^1.2.0", "react-native-hide-show-password-input": "^1.2.0",
"react-native-item-select": "^0.4.2", "react-native-item-select": "^0.4.2",
......
...@@ -43,6 +43,10 @@ const coupon = require ('../../images/coupon.png'); ...@@ -43,6 +43,10 @@ const coupon = require ('../../images/coupon.png');
const allowance = require ('../../images/salary.png'); const allowance = require ('../../images/salary.png');
const refund = require ('../../images/refund.png'); const refund = require ('../../images/refund.png');
const edu = require ('../../images/education.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 Stack = createNativeStackNavigator();
// const navigation = useNavigation(); // const navigation = useNavigation();
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY'); const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
...@@ -69,7 +73,7 @@ const DATE ={ ...@@ -69,7 +73,7 @@ const DATE ={
image:require('../../images/salary.png'), image:require('../../images/salary.png'),
account:'Card', account:'Card',
amount:'RM30.00', amount:'RM30.00',
icon:'card-outline', image1:require ('../../images/cardacc.png')
}, },
{ {
id:"1", id:"1",
...@@ -77,7 +81,7 @@ const DATE ={ ...@@ -77,7 +81,7 @@ const DATE ={
image:require('../../images/medal.png'), image:require('../../images/medal.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
] ]
} }
...@@ -91,7 +95,7 @@ const DATE ={ ...@@ -91,7 +95,7 @@ const DATE ={
image:require('../../images/coupon.png'), image:require('../../images/coupon.png'),
account:'Card', account:'Card',
amount:'RM30.00', amount:'RM30.00',
icon:'card-outline', image1:require ('../../images/cardacc.png')
}, },
{ {
id:"3", id:"3",
...@@ -99,7 +103,7 @@ const DATE ={ ...@@ -99,7 +103,7 @@ const DATE ={
image:require('../../images/refund.png'), image:require('../../images/refund.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
{ {
id:"4", id:"4",
...@@ -107,7 +111,7 @@ const DATE ={ ...@@ -107,7 +111,7 @@ const DATE ={
image:require('../../images/cheque.png'), image:require('../../images/cheque.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
] ]
} }
...@@ -122,7 +126,7 @@ const DATE ={ ...@@ -122,7 +126,7 @@ const DATE ={
account:'Card', account:'Card',
amount:'RM30.00', amount:'RM30.00',
amountCurrency:'Rp70,000', amountCurrency:'Rp70,000',
icon:'card-outline', image1:require ('../../images/cardacc.png')
}, },
{ {
id:"6", id:"6",
...@@ -130,7 +134,7 @@ const DATE ={ ...@@ -130,7 +134,7 @@ const DATE ={
image:require('../../images/sale.png'), image:require('../../images/sale.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
{ {
id:"7", id:"7",
...@@ -138,7 +142,7 @@ const DATE ={ ...@@ -138,7 +142,7 @@ const DATE ={
image:require('../../images/shoppingcart.png'), image:require('../../images/shoppingcart.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
] ]
} }
...@@ -152,7 +156,7 @@ const DATE3 ={ ...@@ -152,7 +156,7 @@ const DATE3 ={
image:require('../../images/education.png'), image:require('../../images/education.png'),
account:'Card', account:'Card',
amount:'RM30.00', amount:'RM30.00',
icon:'cash-outline', image1:require ('../../images/cardacc.png')
}, },
{ {
id:"9", id:"9",
...@@ -160,7 +164,7 @@ const DATE3 ={ ...@@ -160,7 +164,7 @@ const DATE3 ={
image:require('../../images/train.png'), image:require('../../images/train.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
{ {
id:"10", id:"10",
...@@ -168,7 +172,7 @@ const DATE3 ={ ...@@ -168,7 +172,7 @@ const DATE3 ={
image:require('../../images/cutlery.png'), image:require('../../images/cutlery.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
{ {
id:"11", id:"11",
...@@ -176,7 +180,7 @@ const DATE3 ={ ...@@ -176,7 +180,7 @@ const DATE3 ={
image:require('../../images/phone.png'), image:require('../../images/phone.png'),
account:'Wallet', account:'Wallet',
amount:'RM100.00', amount:'RM100.00',
icon:'wallet-outline' image1:require ('../../images/walletacc.png')
}, },
{ {
id:"12", id:"12",
...@@ -184,15 +188,15 @@ const DATE3 ={ ...@@ -184,15 +188,15 @@ const DATE3 ={
image:require('../../images/bill.png'), image:require('../../images/bill.png'),
account:'Cash', account:'Cash',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/cashacc.png')
}, },
{ {
id:"13", id:"13",
type:"Health", type:"Health",
image:require('../../images/firstaidkit.png'), image:require('../../images/firstaidkit.png'),
account:'Cash', account:'Debit',
amount:'RM100.00', amount:'RM100.00',
icon:'cash-outline' image1:require ('../../images/debitacc.png')
}, },
] ]
} }
...@@ -208,7 +212,7 @@ const DATE3 ={ ...@@ -208,7 +212,7 @@ const DATE3 ={
<View style={{marginBottom:15}}> <View style={{marginBottom:15}}>
<Text style={[styles.textStyle1, {marginHorizontal:10}]}>{item.type}</Text> <Text style={[styles.textStyle1, {marginHorizontal:10}]}>{item.type}</Text>
<View style={{flexDirection:'row'}}> <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> <Text style={[styles.textStyle2, {marginHorizontal:0, marginVertical:3}]}>{item.account}</Text>
</View> </View>
</View> </View>
......
import React, { useEffect, useRef, useState, memo, Component } from "react"; import React, { useEffect, useRef, useState, memo, Component } from "react";
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback,Button, View, Text, SectionList, Image, TouchableOpacity, TextInput, FlatList, ScrollView, SafeAreaView} from 'react-native'; import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Picker,Button, View, Text, Image, TouchableOpacity, TextInput, FlatList, SafeAreaView} from 'react-native';
import DashboardScreen from '../home'; import DashboardScreen from '../home';
import styles from './style'; import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker'; import DateTimePickerModal from 'react-native-modal-datetime-picker';
...@@ -11,45 +11,52 @@ import moment from 'moment/moment'; ...@@ -11,45 +11,52 @@ import moment from 'moment/moment';
import SelectDropdown from 'react-native-select-dropdown'; import SelectDropdown from 'react-native-select-dropdown';
import Select, {SelectItem} from '@redmin_delishaj/react-native-select'; import Select, {SelectItem} from '@redmin_delishaj/react-native-select';
import {Dropdown} from 'react-native-material-dropdown'; import {Dropdown} from 'react-native-material-dropdown';
import { createStore, combineReducers } from 'redux'; // import FlatlistPicker from 'react-native-flatlist-picker';
import { alertReducer } from 'react-native-redux-alert'; // import Picker from "react-native-picker-select";
// import { createStore, combineReducers } from 'redux';
// import { alertReducer } from 'react-native-redux-alert';
// import PropTypes from "prop-types"; // import PropTypes from "prop-types";
// import {Picker} from '@react-native-picker/picker'; // import {Picker} from '@react-native-picker/picker';
// import RNPickerSelect from 'react-native-picker-select'; // import RNPickerSelect from 'react-native-picker-select';
// import SelectList from 'react-native-dropdown-select-list'; // import SelectList from 'react-native-dropdown-select-list';
// import ReactNativeItemSelect from 'react-native-item-select'; // import ReactNativeItemSelect from 'react-native-item-select';
const rent = require ('../../images/rent.png'); // const rent = require ('../../images/rent.png');
const card = require ('../../images/visa.png'); // const card = require ('../../images/visa.png');
const salary = require ('../../images/cheque.png'); // const salary = require ('../../images/cheque.png');
const motor = require('../../images/car.png'); // const motor = require('../../images/car.png');
const wallet = require ('../../images/wallet1.png'); // const wallet = require ('../../images/wallet1.png');
const cash = require ('../../images/money.png'); // const cash = require ('../../images/money.png');
const cart = require ('../../images/shoppingcart.png'); // const cart = require ('../../images/shoppingcart.png');
const health = require ('../../images/firstaidkit.png'); // const health = require ('../../images/firstaidkit.png');
const sale = require ('../../images/sale.png'); // const sale = require ('../../images/sale.png');
const awards = require ('../../images/medal.png'); // const awards = require ('../../images/medal.png');
const less = require ('../../images/less.png'); // const less = require ('../../images/less.png');
const greater = require('../../images/greater.png'); // const greater = require('../../images/greater.png');
const calendar = require('../../images/calendar.png'); // const calendar = require('../../images/calendar.png');
const plus = require ('../../images/plus.png'); // const plus = require ('../../images/plus.png');
const acc = require ('../../images/acc.png'); const acc = require ('../../images/acc.png');
const tag = require ('../../images/tag.png'); const tag = require ('../../images/tag.png');
const clear = require ('../../images/clear.png'); // const clear = require ('../../images/clear.png');
const debit = require('../../images/debit.png'); // const debit = require('../../images/debit.png');
const addacc = require ('../../images/addacc.png'); // const addacc = require ('../../images/addacc.png');
const more = require('../../images/more.png'); // const more = require('../../images/more.png');
const cutlery = require ('../../images/cutlery.png'); // const cutlery = require ('../../images/cutlery.png');
const edit = require ('../../images/pencil.png'); // const edit = require ('../../images/pencil.png');
const bin = require ('../../images/delete.png'); // const bin = require ('../../images/delete.png');
const transport = require ('../../images/car.png'); // const transport = require ('../../images/car.png');
const bill = require('../../images/bill.png'); // const bill = require('../../images/bill.png');
const phone = require ('../../images/phone.png'); // const phone = require ('../../images/phone.png');
const allowance = require ('../../images/salary.png'); // const allowance = require ('../../images/salary.png');
const refund = require ('../../images/refund.png'); // const refund = require ('../../images/refund.png');
const coupon = require ('../../images/coupon.png'); // const coupon = require ('../../images/coupon.png');
const drop = require ('../../images/drop.png'); const drop = require ('../../images/drop.png');
const tickmark = require ('../../images/tickmark.png'); // const tickmark = require ('../../images/tickmark.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 onPress = () => console.log('press'); const onPress = () => console.log('press');
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY'); const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
const todayTime = moment().utcOffset('+08.00').format('LT'); const todayTime = moment().utcOffset('+08.00').format('LT');
...@@ -64,26 +71,26 @@ const ACC = [ ...@@ -64,26 +71,26 @@ const ACC = [
{ {
id:'0', id:'0',
title:'Cash', title:'Cash',
icon:'cash-outline', image:require ('../../images/cashacc.png'),
balance:'RM600.00', balance:'RM600.00',
}, },
{ {
id:'1', id:'1',
title:'Card', title:'Card',
icon:'card-outline', image:require ('../../images/cardacc.png'),
balance:'RM600.00', balance:'RM600.00',
}, },
{ {
id:'2', id:'2',
title:'Wallet', title:'Wallet',
icon:'wallet-outline', image:require ('../../images/walletacc.png'),
balance:'RM600.00', balance:'RM600.00',
}, },
{ {
id:'3', id:'3',
title:'Debit', title:'Debit',
icon:'card-sharp', image:require ('../../images/debitacc.png'),
balance:'RM600.00', balance:'RM600.00',
}, },
]; ];
...@@ -213,15 +220,26 @@ const EXP = [ ...@@ -213,15 +220,26 @@ const EXP = [
// }; // };
// }); // });
const CURRENCY = [
{label:'RM',value:'RM'},
// {label:'USD',value:'USD'},
// {label:'KRW',value:'KRW'},
// {label:'EURO',value:'EURO'},
// {label:'RM',value:'RM'},
// {label:'USD',value:'USD'},
// {label:'KRW',value:'KRW'},
// {label:'EURO',value:'EURO'},
];
const Transactions =()=> { const Transactions =()=> {
const [strAccSelected, setStrAccSelected] = useState('Account'); const [strAccSelected, setStrAccSelected] = useState('Account');
const [imgAccSelected, setImgAccSelected] = useState (wallet); const [imgAccSelected, setImgAccSelected] = useState (acc);
const [strCatSelected, setStrCatSelected] = useState('Category'); const [strCatSelected, setStrCatSelected] = useState('Category');
const [imgCatSelected, setImgCatSelected] = useState(tag); const [imgCatSelected, setImgCatSelected] = useState(tag);
const [strCurrSelected, setStrCurrSelected] = useState('RM');
// const [isFocus, setIsFocus] = useState(false);
// const [selected, setSelected] = React.useState("");
//const [selectedLanguage, setSelectedLanguage] = useState(); //const [selectedLanguage, setSelectedLanguage] = useState();
const [text, onChangeText] = React.useState(null); const [text, onChangeText] = React.useState(null);
const [number, onChangeNumber] = React.useState(null); const [number, onChangeNumber] = React.useState(null);
...@@ -260,44 +278,37 @@ const Transactions =()=> { ...@@ -260,44 +278,37 @@ const Transactions =()=> {
hideTimePicker(); hideTimePicker();
}; };
const [selected, setSelected] = React.useState(""); // const [selectedItem, setSelectedItem] = useState('');
// const config: SelectConfig = { const [income, setIncome] = useState(INC);
// fontSize: 18,
// backgroundColor: 'white',
// textColor: 'black',
// selectedBackgroundColor: 'lightgrey',
// selectedTextColor: 'grey',
// selectedFontWeight: 'bold',
// placeholderTextColor:'grey'
// }
const currList = [ const [expense, setExpense] = useState(false);
{text:'RM',value:'RM'},
{text:'USD',value:'USD'},
{text:'KRW',value:'KRW'},
{text:'EURO',value:'EURO'},
// {text:'RM',value:'RM'},
// {text:'USD',value:'USD'},
// {text:'KRW',value:'KRW'},
// {text:'EURO',value:'EURO'},
];
// const [selectAcc, setSelectAcc] = useState(false);
const [selectedItem, setSelectedItem] = useState(''); // const [blnPicker, setBlnPicker] = useState(true);
const [income, setIncome] = useState(INC); // const blnPicker = () => {
// setBlnPicker(true);
// };
const [expense, setExpense] = useState(false);
const [selectAcc, setSelectAcc] = useState(false);
const renderCurrency = ({ item }) => (
<SafeAreaView>
<TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>{setStrCurrSelected(item.label)}}>
<Text style={{marginTop:22, fontSize:25, marginHorizontal:5}}>{item.label}</Text>
<Image style={{width:15, height:15, marginHorizontal:33, marginTop:30}} source={drop}></Image>
</TouchableOpacity>
</SafeAreaView>
);
const renderItem = ({ item }) => ( const renderItem = ({ item }) => (
<SafeAreaView> <SafeAreaView>
<View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}> <View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
<TouchableOpacity style={{flexDirection:'row',marginBottom:10}} onPress={()=>{setStrAccSelected(item.title),setImgAccSelected(item.image)}}> <TouchableOpacity style={{flexDirection:'row',marginBottom:10}} onPress={()=>{setStrAccSelected(item.title),setImgAccSelected(item.image)}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:100,width:40, height:40, marginLeft:10, marginRight:10,justifyContent:'space-between'}}> <View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:100,width:40, height:40, marginLeft:10, marginRight:10,justifyContent:'space-between'}}>
<Ionics name={item.icon} size={25} color="#838383" style={{marginHorizontal:7, marginTop:6}}></Ionics></View> <Image style={{width:25,height:25, marginHorizontal:7, marginTop:6}} source={item.image}/></View>
<View style={{flexDirection:'row', justifyContent:'space-between',width:'45%'}}> <View style={{flexDirection:'row', justifyContent:'space-between',width:'45%'}}>
<Text style={{marginHorizontal:13, fontSize:18, marginTop:10, fontWeight:'600', color:'black', width:'145%'}}>{item.title}</Text> <Text style={{marginHorizontal:13, fontSize:18, marginTop:10, fontWeight:'600', color:'black', width:'145%'}}>{item.title}</Text>
<Text style={{fontSize:18,fontWeight:'600', color:'#006ad1', marginTop:10, marginRight:25}}>{item.balance}</Text> <Text style={{fontSize:18,fontWeight:'600', color:'#006ad1', marginTop:10, marginRight:25}}>{item.balance}</Text>
...@@ -333,6 +344,7 @@ const Transactions =()=> { ...@@ -333,6 +344,7 @@ const Transactions =()=> {
</SafeAreaView> </SafeAreaView>
); );
const YourAccount = () => const YourAccount = () =>
<SafeAreaView> <SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text> <Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
...@@ -342,11 +354,11 @@ const Transactions =()=> { ...@@ -342,11 +354,11 @@ const Transactions =()=> {
keyExtractor={item => item.id} keyExtractor={item => item.id}
/> />
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}> <TouchableOpacity style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}} <Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}
/> />
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text> <Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
</View> </TouchableOpacity>
</SafeAreaView> </SafeAreaView>
const IncomeCategory = () => const IncomeCategory = () =>
...@@ -379,6 +391,49 @@ const Transactions =()=> { ...@@ -379,6 +391,49 @@ const Transactions =()=> {
</TouchableOpacity> </TouchableOpacity>
</SafeAreaView> </SafeAreaView>
// onPress={()=>{setStrCurrSelected}}
// const showTimePicker = () => {
// setTimePickerVisibility(true);
// };
{/* <DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/> <DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>*/}
const ListCurrency = () => {
if (setBlnPicker){
return(
<FlatList
data={CURRENCY}
renderItem={renderCurrency}
keyExtractor={item => item.id}
/>
// {/* <FlatlistPicker
// data={CURRENCY}
// renderItem={renderCurrency}
// keyExtractor={item => item.id}
// containerStyle={styles.containerBox}
// dropdownStyle={{width:180}}
// dropdownTextStyle={{fontSize: 15}}
// /> */}
);
};
};
return ( return (
<View style= {styles.container}> <View style= {styles.container}>
<View style = {{flexDirection:'row', justifyContent:'flex-start', width:'100%', marginTop:30}}> <View style = {{flexDirection:'row', justifyContent:'flex-start', width:'100%', marginTop:30}}>
...@@ -428,7 +483,7 @@ const Transactions =()=> { ...@@ -428,7 +483,7 @@ const Transactions =()=> {
<YourAccount/> <YourAccount/>
</RBSheet> </RBSheet>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:0}}> <View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:0}}>
<Image source={imgAccSelected} style={{width:35, height:35, marginHorizontal:20, marginTop:10}}></Image> <Image source={imgAccSelected} style={{width:30, height:30, marginHorizontal:23, marginTop:13}}></Image>
<Text style={[styles.textStyle, {marginTop:17}]}>{strAccSelected}</Text> <Text style={[styles.textStyle, {marginTop:17}]}>{strAccSelected}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
...@@ -460,43 +515,39 @@ const Transactions =()=> { ...@@ -460,43 +515,39 @@ const Transactions =()=> {
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:10}}> <View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:10}}>
<Image source={imgCatSelected} style={{width:30, height:30, marginTop:15, marginHorizontal:20}}/> <Image source={imgCatSelected} style={{width:25, height:25, marginTop:15, marginHorizontal:15}}/>
<Text style={[styles.textStyle, {marginTop:17}]}>{strCatSelected}</Text> <Text style={[styles.textStyle, {marginTop:17}]}>{strCatSelected}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:370, height:120, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:13, marginTop:10}}> <View style ={{flexDirection:'row', backgroundColor:'transparent', width:370, height:120, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:13, marginTop:10}}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 20}} onChangeText={onChangeText} value={text} placeholder="Add Notes" placeholderTextColor={'grey'} fontSize={20}/> <TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 20}} onChangeText={onChangeText} value={text} placeholder="Add Notes" placeholderTextColor={'grey'} fontSize={20}/>
</View> </View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
<View style ={{flexDirection:'row',}}> <View style ={{flexDirection:'row',}}>
<Select
data={currList}
onSelect={value => setSelectedItem(value)}
value={selectedItem}
// config={config}
width={110}
borderRadius={6}
borderColor={'grey'}
borderWidth={1.5}
placeholder="RM"
dropdownHeight={'auto'}
dropdownStyle={{elevation:7,marginHorizontal:15,}}
// defaultOption={{text:'RM', value:'RM'}}
/>
<View style ={{flexDirection:'row',backgroundColor:'transparent', width:270, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10}}> <TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>{}}>
<Text style={{marginTop:22, fontSize:25, marginHorizontal:5}}>{strCurrSelected}</Text>
<Image style={{width:15, height:15, marginHorizontal:33, marginTop:30}} source={drop}></Image>
</TouchableOpacity>
{/*
<TouchableOpacity>
<Flatlist
data={CURRENCY}
renderItem={renderCurrency}
keyExtractor={item => item.id}
/>
</TouchableOpacity> */}
<View style ={{flexDirection:'row',backgroundColor:'transparent', width:"65%", height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginRight:10}}>
<TextInput style={{marginTop:7, fontSize:15, marginHorizontal:5}} onChangeNumber={onChangeNumber} value={number} placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={30}></TextInput> <TextInput style={{marginTop:7, fontSize:15, marginHorizontal:5}} onChangeNumber={onChangeNumber} value={number} placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={30}></TextInput>
</View> </View>
{/* <TouchableOpacity style= {{flexDirection:'row'}}>
{/* <TouchableOpacity style= {{flexDirection:'row'}}>
<View style={{flexDirection:'row',backgroundColor:'transparent', width:90, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:12}}> <View style={{flexDirection:'row',backgroundColor:'transparent', width:90, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:12}}>
<Text style={[styles.textStyle, {marginTop:18, fontSize:30, marginHorizontal: 15,}]}>RM</Text> <Text style={[styles.textStyle, {marginTop:18, fontSize:30, marginHorizontal: 15,}]}>RM</Text>
<Image style={{width:10, height:10, marginTop:32,}} source={drop}></Image> <Image style={{width:10, height:10, marginTop:32,}} source={drop}></Image>
...@@ -530,8 +581,8 @@ const Transactions =()=> { ...@@ -530,8 +581,8 @@ const Transactions =()=> {
isVisible={isDatePickerVisible} isVisible={isDatePickerVisible}
mode="date" mode="date"
onConfirm={handleConfirmDate} onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/> onCancel={hideDatePicker}
/>
<Text style ={[styles.textStyle,{marginHorizontal:52, marginTop:3,}]}>{confirmDate}</Text> <Text style ={[styles.textStyle,{marginHorizontal:52, marginTop:3,}]}>{confirmDate}</Text>
</TouchableOpacity> </TouchableOpacity>
......
...@@ -85,5 +85,19 @@ const styles = StyleSheet.create ({ ...@@ -85,5 +85,19 @@ const styles = StyleSheet.create ({
marginHorizontal:9, marginHorizontal:9,
marginTop: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; export default styles;
\ No newline at end of file
...@@ -6743,6 +6743,14 @@ react-native-elements@^3.4.2: ...@@ -6743,6 +6743,14 @@ react-native-elements@^3.4.2:
react-native-ratings "8.0.4" react-native-ratings "8.0.4"
react-native-size-matters "^0.3.1" 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: react-native-gesture-handler@^2.7.0:
version "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" 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: ...@@ -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" resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz#1f8d7a835ab4f5b1b1407ec8dddc1053b53fa3c6"
integrity sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw== 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: react-native-vector-icons@^7.1.0:
version "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" resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-7.1.0.tgz#145487d617b2a81d395d2cf64e6e065fcab3a454"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment