Skip to content

E
expensetracker
Commit 2e9362be authored by Farhani's avatar Farhani
Browse files
Options

Create flatlist for currency

parent 113f09ef
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 114 deletions
mymoneymanager/package.json
View file @ 2e9362be
......@@ -24,6 +24,7 @@
"@redmin_delishaj/react-native-select": "^1.0.6",
"@rneui/themed": "^4.0.0-rc.7",
"grid-flatlist-react-native": "^0.1.8",
"mod-react-native-overlay": "^0.5.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.39",
"pouchdb": "^7.3.0",
......@@ -31,10 +32,12 @@
"react-native": "0.70.4",
"react-native-alert-pro": "^1.1.2",
"react-native-androw": "^0.0.34",
"react-native-animatable": "^1.3.3",
"react-native-btr": "^2.2.0",
"react-native-button": "^3.0.1",
"react-native-chonse-select": "^1.0.5",
"react-native-config": "^1.4.11",
"react-native-custom-picker": "^0.4.0",
"react-native-customisable-alert": "^0.1.20",
"react-native-dropdown-select-list": "^1.0.23",
"react-native-elements": "^3.4.2",
......@@ -46,6 +49,7 @@
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^14.0.0",
"react-native-modal-overlay": "^1.3.1",
"react-native-modalbox": "^2.0.2",
"react-native-modern-datepicker": "^1.0.0-beta.91",
"react-native-pager-view": "^6.0.0",
......
mymoneymanager/screens/profile/index.js
View file @ 2e9362be
......@@ -42,11 +42,13 @@ const profile = require ('../../images/profile.jpg');
const Profile =()=> {
const [fname, onChangeFName] = React.useState(null);
const [lname, onChangeLName] = React.useState(null);
const [email, onChangeEmail] = React.useState(null);
const [password, onChangePassword] = React.useState(null);
const [confirmPassword, onChangeConfirmPassword] = React.useState(null);
const [fname, onChangeFName] = useState('Farhani');
const [lname, onChangeLName] = useState('Halim');
const [email, onChangeEmail] = useState('farhanihalim@gmail.com');
const [password, onChangePassword] = useState('');
const [confirmPassword, onChangeConfirmPassword] = useState('');
const [dob, setDOB] = useState('06/02/1999');
const [gender, setGender] = useState('Female');
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
......@@ -159,9 +161,9 @@ const requestCameraPermission = async () => {
<View style={{marginTop:10, marginHorizontal:5,flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={styles.input}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeFName={onChangeFName} value={fname} fontSize={15}/></View>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} setDOB={setDOB} value={dob} fontSize={15}/></View>
<View style={[styles.input,{marginRight:10}]}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} onChangeFName={onChangeLName} value={lname} fontSize={15}/>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} setGender={setGender} value={gender} fontSize={15}/>
</View>
</View>
......
mymoneymanager/screens/transactions/index.js
View file @ 2e9362be
import React, { useEffect, useRef, useState, memo, Component } from "react";
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Picker,Button, View, Text, Image, TouchableOpacity, TextInput, FlatList, SafeAreaView} from 'react-native';
import React, { useEffect, useRef, useState, memo, Component, Fragment } from "react";
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Button, View, Text, Image, TouchableOpacity, TextInput, FlatList, SafeAreaView, Alert} from 'react-native';
import DashboardScreen from '../home';
import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
......@@ -11,15 +11,10 @@ import moment from 'moment/moment';
import SelectDropdown from 'react-native-select-dropdown';
import Select, {SelectItem} from '@redmin_delishaj/react-native-select';
import {Dropdown} from 'react-native-material-dropdown';
// import FlatlistPicker from 'react-native-flatlist-picker';
// 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 {Picker} from '@react-native-picker/picker';
// import RNPickerSelect from 'react-native-picker-select';
// import SelectList from 'react-native-dropdown-select-list';
// import ReactNativeItemSelect from 'react-native-item-select';
import {Picker} from 'react-native-custom-picker';
import Overlay from 'react-native-modal-overlay';
// import { Modal, Portal, Provider } from 'react-native-paper';
import Modal from 'react-native-modal';
// const rent = require ('../../images/rent.png');
// const card = require ('../../images/visa.png');
......@@ -222,13 +217,9 @@ 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'},
{label:'USD',value:'USD'},
{label:'KRW',value:'KRW'},
{label:'EURO',value:'EURO'},
];
const Transactions =()=> {
......@@ -236,7 +227,7 @@ const Transactions =()=> {
const [imgAccSelected, setImgAccSelected] = useState (acc);
const [strCatSelected, setStrCatSelected] = useState('Category');
const [imgCatSelected, setImgCatSelected] = useState(tag);
const [strCurrSelected, setStrCurrSelected] = useState('RM');
// const [isFocus, setIsFocus] = useState(false);
// const [selected, setSelected] = React.useState("");
......@@ -283,25 +274,24 @@ const Transactions =()=> {
const [income, setIncome] = useState(INC);
const [expense, setExpense] = useState(false);
const [strCurrSelected, setStrCurrSelected] = useState('RM');
// const [selectAcc, setSelectAcc] = useState(false);
const [ currListVisible, setCurrListVisible] = useState(true);
// const [blnPicker, setBlnPicker] = useState(true);
// const showCurrList = ()=>{
// setCurrListVisible(true);
// }
// const hideCurrList = ()=> {
// setCurrListVisible(false);
// }
// const blnPicker = () => {
// setBlnPicker(true);
// };
// const handleConfirmCurrency = (strCurrSelected) => {
// console.log();
// setStrCurrSelected();
// hideCurrList();
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 }) => (
<SafeAreaView>
......@@ -407,33 +397,60 @@ const Transactions =()=> {
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>*/}
const renderCurrency = ({ item }) => (
<SafeAreaView>
<TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}>
<Text style={{marginTop:10, fontSize:20, marginHorizontal:20, alignItems:'center'}}>{item.label}</Text>
</TouchableOpacity>
</SafeAreaView>
);
const ListCurrency = () => {
if (setBlnPicker){
if (currListVisible){
return(
<SafeAreaView>
<TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>currListVisible}>
<View style={{flexDirection:'row', width:'100%', justifyContent:'space-between'}}>
<View style={{flexDirection:'row', width:'80%'}}>
<Text style={{marginTop:24, fontSize:20, marginHorizontal:5}}>{strCurrSelected}</Text>
</View>
<View style={{flexDirection:'row', width:'30%'}}>
<Image style={{width:15, height:15, marginTop:30}} source={drop}></Image>
</View>
</View>
</TouchableOpacity>
<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}}
// /> */}
{/* <View style={{backgroundColor:'rgba(52, 52, 52, alpha)', width:'100%'}}> */}
<View style={{backgroundColor:'white', opacity:0.9, borderRadius:2, justifyContent:'center', marginHorizontal:20, width:'70%', height:'50%', marginTop:70, borderWidth:0.5, borderColor:'white', elevation:2, position:'absolute',}}>
{/* <View> */}
<FlatList
// style={{alignItems:'flex-start'}}
data={CURRENCY}
renderItem={renderCurrency}
keyExtractor={item => item.id}
/>
</View>
{/* </View> */}
{/* </View> */}
{/* <Overlay
animationType="zoomIn" containerStyle={{backgroundColor: 'rgba(37, 8, 10, 0.78)'}}
childrenWrapperStyle={{backgroundColor: '#eee'}}
animationDuration={500}>
{
(hideCurrList) => (
<Fragment>
<Text>Some Modal Content</Text>
<Text onPress={hideCurrList}>Close</Text>
</Fragment>
)
}
</Overlay> */}
</SafeAreaView>
);
};
};
return (
<View style= {styles.container}>
<View style = {{flexDirection:'row', justifyContent:'flex-start', width:'100%', marginTop:30}}>
......@@ -528,52 +545,19 @@ const Transactions =()=> {
</View>
<View style ={{flexDirection:'row',}}>
<View style ={{flexDirection:'row'}}>
<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}}>
<ListCurrency/>
<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>
</View>
{/* <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}}>
<Text style={[styles.textStyle, {marginTop:18, fontSize:30, marginHorizontal: 15,}]}>RM</Text>
<Image style={{width:10, height:10, marginTop:32,}} source={drop}></Image>
</View>
</TouchableOpacity> */}
{/*<SelectList
onSelect={() => alert(selected)}
setSelected={setSelected}
data={eg}
placeholder="RM" fontSize={100}
placeholderTextColor={'black'}
arrowicon={<Icon name="chevron-down" size={12} color={'black'}/>}
searchicon={<Icon name="search" size={12} color={'black'}/>}
search={false}
//fontSize={50}
boxStyles={{borderRadius:5, marginHorizontal:13, height:80, width:100,borderWidth:1.5, marginTop:10}} //override default styles
dropdownStyles={{width:100, marginHorizontal:13, borderRadius:5, borderWidth:1.5,}}
dropdownTextStyles={{fontSize:15, justifyContent:'flex-start', color:'black'}}
//defaultOption={{ key:'1', value:'Jammu & Kashmir' }} //default selected option
/>*/}
</View>
</View>
{/* </View> */}
<View style = {{flexDirection:'row', justifyContent:'flex-start', marginTop:50}}>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<TouchableOpacity style={{justifyContent:'space-between', width:'50%',flexDirection:'row'}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
......
mymoneymanager/screens/transactions/style.js
View file @ 2e9362be
......@@ -88,8 +88,8 @@ const styles = StyleSheet.create ({
containerBox:{
borderWidth: 1,
borderColor: '#CECECE',
width: 250,
borderColor: '#CECECE',
width: 250,
height: 50,
alignSelf: 'center',
justifyContent: 'space-between',
......
mymoneymanager/screens/wishlists/addwishlist.js
View file @ 2e9362be
......@@ -67,12 +67,12 @@ const Wishlists =()=> {
hideDatePicker();
};
const getDate = () => {
let tempDate = date.toString().split(' ');
return date !== ''
? `${tempDate[0]} ${tempDate[1]} ${tempDate[2]} ${tempDate[3]}`
: '';
};
// const getDate = () => {
// let tempDate = date.toString().split(' ');
// return date !== ''
// ? `${tempDate[0]} ${tempDate[1]} ${tempDate[2]} ${tempDate[3]}`
// : '';
// };
return (
<View style = {{backgroundColor:'white', height:'100%'}}>
<View style={{marginHorizontal:20, marginTop:20}}>
......@@ -94,14 +94,15 @@ const Wishlists =()=> {
<View style={styles.dividerLine}></View>
<Text style={styles.text}>Desired date</Text>
<View style={{flexDirection:'row'}}>
<Text style= {styles.textInput}></Text>
<TouchableOpacity title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>
<Image style={{width:10, height:10, marginLeft:'auto', marginTop:15}} source={drop}></Image></TouchableOpacity>
<Text>{confirmDate}</Text>
<Image style={{width:10, height:10, marginTop:15, marginHorizontal:290, marginBottom:1 }} source={drop}></Image></TouchableOpacity>
</View>
<View style={styles.dividerLine}></View>
......
mymoneymanager/yarn.lock
View file @ 2e9362be
......@@ -5914,6 +5914,11 @@ mkdirp@^0.5.1:
dependencies:
minimist "^1.2.6"
mod-react-native-overlay@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/mod-react-native-overlay/-/mod-react-native-overlay-0.5.0.tgz#f39b98c9ef59063d26a058521d121ede2c8900d5"
integrity sha512-PVTwvHg+JlDywdtNVAeDnymo9hAK0oZLWCyO5uDJJMZyr9LWAOSfBRB58spYPCv47+G2QKNloRKBzuHugVaO9g==
modify-values@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
......@@ -6672,7 +6677,7 @@ react-native-androw@^0.0.34:
resolved "https://registry.yarnpkg.com/react-native-androw/-/react-native-androw-0.0.34.tgz#5c4214b155946004a57916619a518974ebd96b36"
integrity sha512-YuW0GxYNzABvPPe6k+JdLUF5CAzKSW5R6IxxA/+fg5gc+4avE1tZgLmnRfNtXJCbW9r90YLYp33S9Uu2pe//fg==
react-native-animatable@1.3.3, react-native-animatable@^1.3.1:
react-native-animatable@1.3.3, react-native-animatable@^1.2.4, react-native-animatable@^1.3.1, react-native-animatable@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
......@@ -6715,6 +6720,11 @@ react-native-config@^1.4.11:
resolved "https://registry.yarnpkg.com/react-native-config/-/react-native-config-1.4.11.tgz#f9ea08a8dffbe3fd4f2187d80d2594756526dee8"
integrity sha512-PdBFnfR3pljUNrJu4B2wiJ9TbAiz1J1WcG5KP8AFBqZi8ve5MV/CTCDnANaGrqhOxkBDJV73D/SrMENHe7TKBg==
react-native-custom-picker@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/react-native-custom-picker/-/react-native-custom-picker-0.4.0.tgz#258896b1eae65f95e4122b4bbdf6bfd68a27d0e3"
integrity sha512-zhpt3pEYo/6xH2F0+G//SCo3Q7QddAS8/Xrrwc8Cif/PfaPU15cEMUakBGyJ/5vAv67RtF74WQcGhfA4RS09xg==
react-native-customisable-alert@^0.1.20:
version "0.1.20"
resolved "https://registry.yarnpkg.com/react-native-customisable-alert/-/react-native-customisable-alert-0.1.20.tgz#af733b95e47ee4c98b98b3a065a4fd6c38d45e4c"
......@@ -6845,6 +6855,13 @@ react-native-modal-datetime-picker@^14.0.0:
dependencies:
prop-types "^15.7.2"
react-native-modal-overlay@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-modal-overlay/-/react-native-modal-overlay-1.3.1.tgz#bfb876603e035d026e1db16c5cce053414c0d842"
integrity sha512-K4J5IfJcNYNjoKDXWON5dyFf4W8UnNU5+rXcHq9ePRriUiTQPjHG2JaaqctA6GpGHU6CswApEOoxJyRw6rc9aw==
dependencies:
react-native-animatable "^1.2.4"
react-native-modal@^11.3.1:
version "11.10.0"
resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.10.0.tgz#94a6d3a2428ba5228cfb4dc174cacea79c871591"
......
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