Skip to content

E
expensetracker
Commit 90b71037 authored by Farhani's avatar Farhani
Browse files
Options

Update modal to upload picture

parent f26b104a
Hide whitespace changes
Inline Side-by-side
Showing with 489 additions and 155 deletions
mymoneymanager/package.json
View file @ 90b71037
......@@ -41,6 +41,7 @@
"react-native-customisable-alert": "^0.1.20",
"react-native-dropdown-select-list": "^1.0.23",
"react-native-elements": "^3.4.2",
"react-native-extra-dimensions-android": "^1.2.5",
"react-native-flatlist-picker": "^1.0.1",
"react-native-gesture-handler": "^2.7.0",
"react-native-hide-show-password-input": "^1.2.0",
......
mymoneymanager/screens/categories/index.js
View file @ 90b71037
import React, { useEffect, useState } from "react";
import { Button, View, StyleSheet, Pressable, Modal, Alert, TextInput, Text,Image, Linking, SectionList, TouchableOpacity, ScrollView} from 'react-native';
import { Button, View, StyleSheet, Pressable, Modal, Alert, TextInput, Text,Image, Linking, SectionList, TouchableOpacity, ScrollView, Dimensions} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import styles from '../categories/style';
......@@ -11,6 +11,7 @@ import {showAlert, closeAlert} from 'react-native-customisable-alert';
import AlertPro from "react-native-alert-pro";
import { render } from "react-dom";
import Animated from "react-native-reanimated";
// import {openDatabase} from 'react-native-sqlite-storage';
// import { TextInput } from "react-native-gesture-handler";
......@@ -39,8 +40,10 @@ const salary = require ('../../images/cheque.png');
const refund = require ('../../images/refund.png');
const edu = require ('../../images/education.png');
const grant = require ('../../images/grant.png');
const onPress = () => console.log('press');
// const deviceWeight = Dimensions.get("window").width;
// const deviceHeight =
// Platform.OS ===""
export default function CategoriesScreen({ navigation }) {
const addCategoryAlert = () =>
......@@ -88,6 +91,12 @@ export default function CategoriesScreen({ navigation }) {
{cancelable:false}
);
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const INCOME={
title: 'Income Categories',
data:[
......@@ -175,20 +184,30 @@ export default function CategoriesScreen({ navigation }) {
},
]
}
const renderItem = ({item}) => {
const renderItem = ({item}) => {
return(
<View style={{flexDirection:'column', justifyContent:'space-between'}}>
<View style={[styles.item]}>
<View style={{borderWidth:0.5,borderColor:'grey',borderRadius:100, width:50, height:50}}>
<Image source={item.image} style={[styles.img,{marginHorizontal:10, marginVertical:10}]}/></View>
<View style={[styles.item]}>
<View style={{borderWidth:0.5,borderColor:'grey',borderRadius:100, width:50, height:50}}>
<Image source={item.image} style={[styles.img,{marginHorizontal:10, marginVertical:10}]}/></View>
<Text style ={{fontSize:19, fontWeight:'300',color:'black', marginHorizontal:15, marginVertical:15}}>{item.type}</Text>
<View style={{flexDirection:'row', justifyContent:'flex-end', marginLeft:'auto', marginVertical:15}}>
<TouchableOpacity style ={{backgroundColor:'#e8f4f8', width:25, height:25,marginHorizontal: 0,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={editButtonAlert}>
<TouchableOpacity style ={{backgroundColor:'#e8f4f8', width:25, height:25,marginHorizontal: 0,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={toggleModal}>
{/* <Modal
isVisible={isModalVisible}
onSwipeComplete={() =>setModalVisible(false)}
swipeDirection="left"
style={{width:'50%', height:'50%',}}
> */}
{/* <View style={{flex:1, width:'100%', height:'100%', justifyContent:'center', alignContent:'center', alignItems:'center', backgroundColor:'white'}}>
<Text>Heello</Text></View> */}
{/* </Modal> */}
<MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/>
</TouchableOpacity>
<TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginHorizontal:5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}>
<MaterialCommunityIcons name="delete" size={20} color="red"/>
<TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginHorizontal:5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}>
<MaterialCommunityIcons name="delete" size={20} color="red"/>
</TouchableOpacity>
</View>
</View>
......@@ -197,7 +216,6 @@ export default function CategoriesScreen({ navigation }) {
}
return (
<View style = {[styles.container]}>
<SectionList
sections={[INCOME, EXPENSE]}
......
mymoneymanager/screens/currency/addcurrency.js
View file @ 90b71037
import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, ScrollView} from 'react-native';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, ScrollView, FlatList} from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
......@@ -43,14 +43,31 @@ const handleButton = () =>{
name:'Edit Currency',
});
};
const CURRENCY = [
{title:'RM - Ringgit Malaysia',value:'RM'},
{title:'USD - United States Dollar',value:'USD'},
{title:'KRW - Korean Won',value:'KRW'},
{title:'EURO',value:'EURO'},
{title:'TEST',value:'TEST'},
{title:'TRY',value:'TRY'},
{title:'CUBA',value:'CUBA'},
// {label:'GFDFVF',value:'FGDFDWERDDF'},
];
const AddCurrency =()=> {
const [name, onChangeName] = React.useState(null);
const [note, onChangeNote] = React.useState(null);
const [targetAmount, onChangeTargetAmount] = React.useState(null);
const [amountSaved, onChangeAmountSaved] = React.useState(null);
const [currListVisible, setCurrListVisible] = useState(false);
const [currencyName, setCurrencyName] = useState('None');
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [currencyExc, setCurrencyExc] = useState('1 USD');
const [currencySymbol, setCurrencySymbol] = useState('\u0024');
const [currencyCode, setCurrencyCode] = useState('USD');
const showDatePicker = () => {
setDatePickerVisibility(true);
......@@ -64,51 +81,102 @@ const AddCurrency =()=> {
console.warn("A date has been picked: ", date);
hideDatePicker();
};
const renderCurrency = ({ item }) => (
<SafeAreaView>
<TouchableOpacity onPress={()=>{setCurrencyName(item.title)}}>
<Text style={{marginTop:10, fontSize:15, justifyContent:'center', alignItems:'center', marginHorizontal:10}}>{item.title}</Text>
</TouchableOpacity>
<View style={[styles.dividerLine,{marginTop:20}]}></View>
</SafeAreaView>
);
const ListCurrency = () => {
if (currListVisible){
return(
<SafeAreaView style={{height:'50%', width:'90%', justifyContent:'flex-start'}}>
<TouchableOpacity style={{height:'50%', width:'90%'}} onPress={()=>{setCurrListVisible(false)}}></TouchableOpacity>
<View style={{backgroundColor:'white', borderRadius:5, justifyContent:'center', marginHorizontal:20, width:'90%', height:'30%', marginTop:0, borderWidth:0.5, borderColor:'white', elevation:2, position:'absolute'}}>
<FlatList
data={CURRENCY}
renderItem={renderCurrency}
keyExtractor={item => item.id}
/>
</View>
</SafeAreaView>
);
};
};
return (
<View style = {{backgroundColor:'white', height:'100%'}}>
<View style={{marginHorizontal:20, marginTop:20}}>
<Text style={{marginBottom:20}}>Select currency</Text>
<Image style={{width:10, height:10, marginHorizontal:330,}} source={drop}></Image>
<View style={{marginHorizontal:20, marginTop:20}}>
<Text style={{marginBottom:20}}>Select currency</Text>
<TouchableOpacity onPress={()=>{setCurrListVisible(true)}}>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'90%'}}>
<Text style={{fontSize:20}}>{currencyName}</Text>
</View>
<View style={{flexDirection:'row', width:'5%'}}>
<Image style={{width:8, height:8, marginTop:10}} source={drop}></Image>
</View>
</View>
</TouchableOpacity>
<View style={[styles.dividerLine,{marginBottom:30}]}></View>
<View style={{flexDirection:'row'}}>
<Text style={styles.text}>1 MYR = </Text>
<Text style={[styles.text,{marginHorizontal:151, marginBottom:50}]}>1 USD = </Text>
<ListCurrency/>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'57%'}}>
<Text style={styles.text}>1 MYR = </Text></View>
<View style={{flexDirection:'row', width:'50%'}}>
<Text style={[styles.text,{marginBottom:20}]}>{currencyExc} =</Text></View>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'57%'}}>
<Text style={{fontSize:20}}>0.22709</Text>
</View>
<View style={{flexDirection:'row', width:'50%'}}>
<Text style={{fontSize:20, marginBottom:6}}>4.40350</Text>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
<View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}>
</View>
<View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}>
</View>
</View>
<View style={{flexDirection:'column', justifyContent:'space-between'}}>
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'57%'}}>
<Text style={[styles.text,{}]}>Code</Text>
<Text style={[styles.text,{marginHorizontal:156, marginBottom:50}]}>Symbol</Text></View>
</View>
<View style={{flexDirection:'row', width:'50%'}}>
<Text style={[styles.text,{marginBottom:20}]}>Symbol</Text>
</View>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'57%'}}>
<Text style={{fontSize:20}}>{currencyCode}</Text>
</View>
<View style={{flexDirection:'row', width:'50%'}}>
<Text style={{fontSize:20, marginBottom:6}}>US{currencySymbol}</Text>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
<View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View>
</View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity style={styles.saveButton}>
<Text style={{color:'white', fontWeight:'bold'}}>REFRESH FROM SERVER</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
};
......
mymoneymanager/screens/currency/index.js
View file @ 90b71037
......@@ -58,6 +58,11 @@ const CURRENCY = [
title:'THB',
name:'Thai Baht',
},
// {
// id:'9',
// title:'',
// name:''
// }
]
const renderItem = ({ item }) => (
......@@ -65,10 +70,14 @@ const renderItem = ({ item }) => (
<View style = {{flexDirection:'row', justifyContent:'flex-end', marginRight:10}}>
<Text style ={{marginTop:10,fontSize:15, color:'dodgerblue'}}>{item.status}</Text>
</View>
<View style = {{flexDirection:'row'}}>
<View style = {{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'80%'}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:30, fontWeight:'500'}]}>{item.title}</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:250, marginTop:5}} source={greater} ></Image></TouchableOpacity>
</View>
<View style = {{flexDirection:'column', marginVertical:3, width:'10%'}}>
<TouchableOpacity onPress={() => navigation.navigate("editcurrency")}>
<Image style={{width:15, height:20, marginTop:5}} source={greater} ></Image>
</TouchableOpacity>
</View>
</View>
<Text style={{marginHorizontal:30}}>{item.name}</Text>
......
mymoneymanager/screens/home/index.js
View file @ 90b71037
......@@ -248,40 +248,58 @@ export default function DashboardScreen({ navigation }) {
hideDatePicker();
};
const [currCode, setCurrCode] = useState('RM');
const [totalAmount, setTotalAmount] = useState('');
return (
<View style={styles.container}>
<View style={styles.containerBottom}>
<View style={{flexDirection:'row',marginTop:25,justifyContent:'space-between', width:'70%', marginHorizontal:70}}>
<TouchableOpacity>
<Image style={{width:15, height:20,}} source={less} ></Image>
<View style={{flexDirection:'row',marginTop:25,justifyContent:'space-between', width:'100%'}}>
<TouchableOpacity style={{flexDirection:'row', width:'5%', marginHorizontal:40}}>
<Image style={{width:15, height:20,}} source={less}></Image>
</TouchableOpacity>
<TouchableOpacity style={{}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<TouchableOpacity style={{width:'40%', flexDirection:'row', marginHorizontal:20}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>
<Text style={{fontSize:19, marginHorizontal:50, color:'black', width:'50%'}}>{confirmDate}</Text>
<Text style={{fontSize:18, color:'black'}}>{confirmDate}</Text>
</TouchableOpacity>
<View style={{flexDirection:'row', }}>
<TouchableOpacity style={{}}>
<Image style={{width:15, height:20, marginHorizontal:22}} source={greater}></Image>
<TouchableOpacity style={{flexDirection:'row', width:'6%'}}>
<Image style={{width:15, height:20}} source={greater}></Image>
</TouchableOpacity>
{/* <TouchableOpacity >
<Ionics name="calendar-outline" size={20} color="black" style={{marginVertical:0, marginHorizontal:0}}/>
</TouchableOpacity> */}
</View>
<TouchableOpacity style={{width:'10%'}}>
<Ionics name="calendar-outline" size={20} color="black"/>
</TouchableOpacity>
</View>
<View style ={{flexDirection:'row', justifyContent:'flex-start', marginTop:35, width:'90%'}}>
<Text style = {{fontSize:18, marginHorizontal:30, color:'black'}}>EXPENSE</Text>
<Text style = {{fontSize:18, marginHorizontal:35, color:'black'}}>INCOME</Text>
<Text style = {{fontSize:18, marginHorizontal:50, color:'black'}}>TOTAL</Text>
<View style ={{flexDirection:'row', justifyContent:'space-evenly', marginTop:35, width:'100%'}}>
<View style={{flexDirection:'row', width:'20%'}}>
<Text style = {{fontSize:15, color:'black'}}>EXPENSE</Text>
</View>
<View style={{flexDirection:'row',width:'22%'}}>
<Text style = {{fontSize:15, color:'black'}}>INCOME</Text>
</View>
<View style={{flexDirection:'row',width:'11%'}}>
<Text style = {{fontSize:15, color:'black'}}>TOTAL</Text>
</View>
</View>
<View style ={{flexDirection:'row', justifyContent:'flex-start', marginTop:1, marginBottom:50}}>
<Text style = {{color:'red', fontSize:18, marginHorizontal:27}}>RM 422.00</Text>
<Text style = {{fontSize:18, marginHorizontal:20, color:'#006ad1'}}>RM 2,875.00</Text>
<Text style = {{fontSize:18, marginHorizontal:27, color:'black'}}>RM 2,453.00</Text>
<View style ={{flexDirection:'row', justifyContent:'space-evenly', marginTop:1, marginBottom:50, width:'100%'}}>
<View style={{flexDirection:'row', width:'24%', marginRight:'auto', marginHorizontal:25}}>
<Text style = {{color:'red', fontSize:15,}}>{currCode} 1,000000.00</Text>
</View>
<View style={{flexDirection:'row', width:'28%'}}>
<Text style = {{fontSize:15, color:'#006ad1'}}>{currCode} 1,000000.00</Text>
</View>
<View style={{flexDirection:'row', marginLeft:'auto', width:'29%'}}>
<Text style = {{fontSize:15, color:'black'}}>{currCode} 1,000000.00</Text>
</View>
</View>
</View>
......
mymoneymanager/screens/profile/index.js
View file @ 90b71037
......@@ -16,7 +16,8 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker';
import ImagePicker from 'react-native-image-crop-picker';
import SidebarScreen from '../sidebar';
import styles from './style';
// import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import RBSheet from 'react-native-raw-bottom-sheet';
const logo = require ('../../images/pic.png');
......@@ -41,51 +42,8 @@ const drop = require ('../../images/drop.png');
const goalcolor = require('../../images/roundedrectangle.png');
const caricon = require ('../../images/caricon.png');
const Stack = createNativeStackNavigator();
const profile = require ('../../images/profile.jpg');
const requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "Cool Photo App Camera Permission",
message:
"Cool Photo App needs access to your camera " +
"so you can take awesome pictures.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera");
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
};
const profile = require ('../../images/user.png');
const requestGalleryPermission = async () => {
try{
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'Share image',
message: 'This app would like read media from storage.',
buttonPositive: 'Please accept bare mortal',
},
);
if (granted===PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the gallery");
} else {
console.log("Gallery permission denied");
}
} catch (err) {
console.warn(err);
}
};
const Profile =()=> {
const [fname, onChangeFName] = useState('Farhani');
......@@ -95,8 +53,9 @@ const Profile =()=> {
const [confirmPassword, onChangeConfirmPassword] = useState('');
const [dob, setDOB] = useState('06/02/1999');
const [gender, setGender] = useState('Female');
const [profilePic, setProfilePic] = useState(profile);
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [isUploadOptionVisible, setUploadOptionVisible] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
......@@ -110,9 +69,134 @@ const Profile =()=> {
console.warn("A date has been picked: ", date);
hideDatePicker();
};
// launchCamera(options, callback);
// const result = async launchCamera(options);
// launchImageLibrary(options, callback);
// const resultt = await launchImageLibrary(options);
const [filePath, setFilePath] = useState({});
const requestCameraPermission = async () => {
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: 'Camera Permission',
message: 'App needs camera permission',
},
);
// If CAMERA Permission is granted
return granted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn(err);
return false;
}
} else return true;
};
const requestExternalWritePermission = async () => {
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'External Storage Write Permission',
message: 'App needs write permission',
},
);
// If WRITE_EXTERNAL_STORAGE Permission is granted
return granted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn(err);
alert('Write permission err', err);
}
return false;
} else return true;
};
const captureImage = async (type) => {
let options = {
mediaType: 'photo',
maxWidth: 300,
maxHeight: 550,
quality: 1,
videoQuality: 'low',
durationLimit: 30, //Video max duration in seconds
saveToPhotos: true,
};
let isCameraPermitted = await requestCameraPermission();
let isStoragePermitted = await requestExternalWritePermission();
if (isCameraPermitted && isStoragePermitted) {
launchCamera(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
// alert('User cancelled camera picker');
return;
} else if (response.errorCode == 'camera_unavailable') {
alert('Camera not available on device');
return;
} else if (response.errorCode == 'permission') {
alert('Permission not satisfied');
return;
} else if (response.errorCode == 'others') {
alert(response.errorMessage);
return;
}
console.log('base64 -> ', response.base64);
console.log('uri -> ', response.uri);
console.log('width -> ', response.width);
console.log('height -> ', response.height);
console.log('fileSize -> ', response.fileSize);
console.log('type -> ', response.type);
console.log('fileName -> ', response.fileName);
setFilePath(response);
});
}
};
const chooseFile = (type) => {
let options = {
mediaType: 'photo',
maxWidth: 300,
maxHeight: 550,
quality: 1,
selectionLimit: 1,
includeBase64:true
};
launchImageLibrary(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
// alert('User cancelled camera picker');
return;
} else if (response.errorCode == 'camera_unavailable') {
alert('Camera not available on device');
return;
} else if (response.errorCode == 'permission') {
alert('Permission not satisfied');
return;
} else if (response.errorCode == 'others') {
alert(response.errorMessage);
return;
}
console.log('base64 -> ', response.base64);
console.log('uri -> ', response.uri);
console.log('width -> ', response.width);
console.log('height -> ', response.height);
console.log('fileSize -> ', response.fileSize);
console.log('type -> ', response.type);
console.log('fileName -> ', response.fileName);
setFilePath(response);
});
};
return (
<SafeAreaView style={{flex:1}}>
<View style = {{backgroundColor:'white', height:'100%'}}>
<ScrollView>
<View style={{marginHorizontal:20, marginTop:20}}>
......@@ -124,23 +208,105 @@ const Profile =()=> {
</View>
</View>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity style={styles.saveButton} title="request permissions" onPress={requestGalleryPermission}>
<TouchableOpacity style={styles.saveButton} onPress={()=>{this.RCSheet.open()}}>
<RBSheet
ref={ref => {
this.RCSheet = ref;
}}
height={300}
openDuration={250}
closeOnDragDown={true}
customStyles={{
container: {
justifyContent: "flex-start",
height:170,
}
}}
>
<View>
<Text style={{color:'black', fontSize:18, fontWeight:'500', marginHorizontal:20}}>Profile Photo</Text>
<View style={{flexDirection:'row', marginTop:25}}>
<View>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => captureImage('photo')}>
<View style={{
height:50,
width:50,
borderRadius:100,
borderColor:'lightgrey',
borderWidth:0.5,
marginHorizontal:25
}}
>
<Ionics
name="camera"
size={30}
color="grey"
style={{
marginHorizontal:9,
marginVertical:7
}}
/>
</View>
<Text style={{
color:'grey',
marginHorizontal:27,
marginTop:5
}}
>
Camera
</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => chooseFile('photo')}>
<View style={{
height:50,
width:50,
borderRadius:100,
borderColor:'lightgrey',
borderWidth:0.5,
marginHorizontal:25
}}
>
<Ionics name="image"
size={30}
color="grey"
style={{
marginHorizontal:10,
marginVertical:7
}}
/>
</View>
<Text style={{
color:'grey',
marginHorizontal:29,
marginTop:5}}>
Gallery
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</RBSheet>
<View style={{flexDirection:'row'}}>
<Icon name="upload" size={20} color="#5eb5ce"/>
<Text style={{color:'#5eb5ce', marginHorizontal:10, fontSize:15}}>Upload Picture</Text>
</View>
<Icon name="upload" size={20} color="#5eb5ce"/>
<Text style={{color:'#5eb5ce', marginHorizontal:10, fontSize:15}}>Upload Picture</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Icon name="delete" size={20} color="red"/></TouchableOpacity>
<Icon name="delete" size={20} color="red"/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View style={{marginTop:30, flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<Text style={{fontSize:15, marginHorizontal:5}}>First Name</Text>
<Text style={{fontSize:15, marginHorizontal:90}}>Last Name</Text>
......@@ -180,12 +346,19 @@ const Profile =()=> {
</View>
<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}} setDOB={setDOB} value={dob} fontSize={15}/></View>
<View style={[styles.input,{flexDirection:'row', justifyContent:'space-between'}]}>
<View style={{flexDirection:'row', width:'60%'}}>
<TextInput style={{marginTop:3, fontSize:15,}} setDOB={setDOB} value={dob} fontSize={15}/>
</View>
<View style={{flexDirection:'row', width:'20%', marginTop:8}}>
<Ionics name="calendar-outline" size={20} color="grey"/>
</View>
</View>
<View style={[styles.input,{marginRight:10}]}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} setGender={setGender} value={gender} fontSize={15}/>
</View>
</View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity style={{alignItems: "center",
......@@ -203,7 +376,7 @@ const Profile =()=> {
</ScrollView>
</View>
</SafeAreaView>
);
};
......
mymoneymanager/screens/sidebar/index.js
View file @ 90b71037
......@@ -38,7 +38,7 @@ const settings = require ('../../images/settings.png');
const categories = require ('../../images/categories.png');
const statistics = require ('../../images/statistics.png');
const reminder = require ('../../images/alarm.png');
const profile = require ('../../images/profile.jpg');
const profile = require ('../../images/user.png');
......@@ -64,20 +64,20 @@ function CustomDrawer(props){
<View style = {{flexDirection:'row'}}>
<TouchableOpacity onPress={() => props.navigation.navigate("Profile")}>
<View style ={{flexDirection:'row', marginHorizontal:5}}>
<View style ={{flexDirection:'row', marginHorizontal:5, justifyContent:'space-between',}}>
<View style={{backgroundColor:'#2693ff', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:50, height:50}}>
<Image style={{width: 60, height: 60, borderColor:'powderblue', borderWidth: 1, elevation: 7,borderRadius: 100,}} source={profile}/>
</View>
<View style={{flexDirection:'row',}}>
<View>
<Text style={{fontSize:18, marginHorizontal:28, marginVertical:5, fontWeight:'bold'}}>Farhani Halim</Text>
<Text style={{marginHorizontal:25}}>@farhanihalim</Text>
<View style={{width:'100%'}}>
<Text style={{fontSize:18, marginHorizontal:15, marginVertical:5, fontWeight:'bold'}}>Farhani Halim</Text>
<Text style={{marginHorizontal:15}}>@farhanihalim</Text>
<View style={{flexDirection:'row'}}>
<View style ={{flexDirection:'row', justifyContent:'flex-start'}}>
</View>
</View>
</View>
</View>
</View>
</TouchableOpacity>
......
mymoneymanager/screens/transactions/index.js
View file @ 90b71037
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 { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Button, View, Text, Image, TouchableOpacity, TextInput, FlatList, SafeAreaView, Alert, ToastAndroid} from 'react-native';
import DashboardScreen from '../home';
import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
......@@ -16,6 +16,7 @@ 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');
// const salary = require ('../../images/cheque.png');
......@@ -266,6 +267,28 @@ const Transactions =()=> {
hideTimePicker();
};
const showToast = () => {
ToastAndroid.show("Amount cannot be zero", ToastAndroid.SHORT);
};
const showToastWithGravity = () => {
ToastAndroid.showWithGravity(
"All Your Base Are Belong To Us",
ToastAndroid.SHORT,
ToastAndroid.CENTER
);
};
const showToastWithGravityAndOffset = () => {
ToastAndroid.showWithGravityAndOffset(
"A wild toast appeared!",
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
50
);
};
const renderItem = ({ item }) => (
<SafeAreaView>
<View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
......@@ -357,7 +380,6 @@ const Transactions =()=> {
const renderCurrency = ({ item }) => (
<SafeAreaView>
<TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}>
<Text style={{marginTop:10, fontSize:20, justifyContent:'center', alignItems:'center', marginHorizontal:100}}>{item.label}</Text>
</TouchableOpacity>
......@@ -478,7 +500,19 @@ const Transactions =()=> {
<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={()=>{setCurrListVisible(true)}}>
<TouchableOpacity
style ={{
flexDirection:'row',
backgroundColor:'transparent',
width:100,
height:80,
borderWidth:1.5,
borderColor:'grey',
borderRadius:6,
marginTop:10,
marginHorizontal:13}}
onPress={()=>{setCurrListVisible(true)}}>
<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>
......@@ -489,16 +523,13 @@ const Transactions =()=> {
</View>
</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>
</View>
</View>
<View style = {{flexDirection:'row', justifyContent:'flex-start', marginTop:50}}>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<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)}>
<DateTimePickerModal
isVisible={isDatePickerVisible}
......@@ -520,7 +551,7 @@ const Transactions =()=> {
</View>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
<TouchableOpacity style={styles.saveButton}>
<TouchableOpacity style={styles.saveButton} title="Toggle Toast" onPress={() => showToast()}>
{/* onPress ={() => navigation.navigate("Dashboard")} */}
<Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
</TouchableOpacity>
......
mymoneymanager/screens/wishlists/addwishlist.js
View file @ 90b71037
import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, ScrollView} from 'react-native';
import { Button, View, Text, TextInput, SectionList, Image, TouchableOpacity, ScrollView, KeyboardAvoidingView} from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
......@@ -39,7 +39,7 @@ const goalcolor = require('../../images/roundedrectangle.png');
const caricon = require ('../../images/caricon.png');
const Stack = createNativeStackNavigator();
const onPress = ()=>console.log('press');
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
// const DATE =[
// {
// startDate: new Date()
......@@ -51,8 +51,9 @@ const Wishlists =()=> {
const [note, onChangeNote] = React.useState(null);
const [targetAmount, onChangeTargetAmount] = React.useState(null);
const [amountSaved, onChangeAmountSaved] = React.useState(null);
const [confirmDate, setConfirmDate] = useState('');
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [confirmDate, setConfirmDate] = useState(todayDate);
const showDatePicker = () => {
setDatePickerVisibility(true);
......@@ -63,18 +64,17 @@ const Wishlists =()=> {
};
const handleConfirmDate = (date) => {
console.warn("A date has been picked: ", date);
console.log(todayDate);
setConfirmDate(moment(date).format('MMM DD, YYYY'));
hideDatePicker();
};
// const getDate = () => {
// let tempDate = date.toString().split(' ');
// return date !== ''
// ? `${tempDate[0]} ${tempDate[1]} ${tempDate[2]} ${tempDate[3]}`
// : '';
// };
return (
<View style = {{backgroundColor:'white', height:'100%'}}>
<KeyboardAvoidingView>
<ScrollView>
<View style={{marginHorizontal:20, marginTop:20}}>
<Text>Name</Text>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeName={onChangeName} value={name} placeholder="" placeholderTextColor={'grey'} fontSize={20}/>
......@@ -93,17 +93,21 @@ const Wishlists =()=> {
<View style={styles.dividerLine}></View>
<Text style={styles.text}>Desired date</Text>
<View style={{flexDirection:'row'}}>
<TouchableOpacity title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<TouchableOpacity style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>
<Text>{confirmDate}</Text>
<Image style={{width:10, height:10, marginTop:15, marginHorizontal:290, marginBottom:1 }} source={drop}></Image></TouchableOpacity>
</View>
<View style={{flexDirection:'row', width:'80%'}}>
<Text style={{fontSize:20, marginTop:15, marginHorizontal:3, marginBottom:15}}>{confirmDate}</Text>
</View>
<View style={{flexDirection:'row', width:'5%'}}>
<Image style={{width:10, height:10, marginTop:16}} source={drop}></Image>
</View>
</TouchableOpacity>
<View style={styles.dividerLine}></View>
<View style={{flexDirection:'row'}}>
......@@ -111,10 +115,15 @@ const Wishlists =()=> {
<Text style={[styles.text]}>Icon</Text>
</View>
<View style={{ height:35, width:95, borderRadius:5, marginTop:15, flexDirection:'row', marginBottom:10}}>
{/* <Image style={{width:10, height:10, marginHorizontal:110, marginTop:15}} source={drop}></Image> */}
<TouchableOpacity style={{ width:'100%', borderRadius:5, marginTop:15, flexDirection:'row', marginBottom:10,}}>
<View style={{flexDirection:'row', width:'35%'}}>
<Image style={{width:35, height:35, marginTop:1}} source={caricon}></Image>
</View>
</View>
<View style={{flexDirection:'row', width:'10%'}}>
<Image style={{width:10, height:10, marginTop:15}} source={drop}></Image>
</View>
</TouchableOpacity>
<View style={{flexDirection:'row'}}>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
......@@ -124,14 +133,16 @@ const Wishlists =()=> {
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeNote={onChangeNote} value={note} placeholder="-" placeholderTextColor={'grey'} fontSize={20}/>
<View style={styles.dividerLine}></View>
</View>
<View style={{flexDirection:'row'}}>
<TouchableOpacity style={styles.saveButton}>
<Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
);
};
......
mymoneymanager/yarn.lock
View file @ 90b71037
......@@ -6703,6 +6703,11 @@ react-native-elements@^3.4.2:
react-native-ratings "8.0.4"
react-native-size-matters "^0.3.1"
react-native-extra-dimensions-android@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/react-native-extra-dimensions-android/-/react-native-extra-dimensions-android-1.2.5.tgz#8ade91029aaac7519bf305116d39019e618a60f0"
integrity sha512-eorFo9X1vEqAWUkgcZ300yKBG1wtgNeE7tdWAH2CE+P50FGTniJg5Sr6l1iPWG8ZskQOuF+KeiSTFlDa4vLfMw==
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"
......
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