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 @@ ...@@ -41,6 +41,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-extra-dimensions-android": "^1.2.5",
"react-native-flatlist-picker": "^1.0.1", "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",
......
mymoneymanager/screens/categories/index.js
View file @ 90b71037
import React, { useEffect, useState } from "react"; 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 { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import styles from '../categories/style'; import styles from '../categories/style';
...@@ -11,6 +11,7 @@ import {showAlert, closeAlert} from 'react-native-customisable-alert'; ...@@ -11,6 +11,7 @@ import {showAlert, closeAlert} from 'react-native-customisable-alert';
import AlertPro from "react-native-alert-pro"; import AlertPro from "react-native-alert-pro";
import { render } from "react-dom"; import { render } from "react-dom";
import Animated from "react-native-reanimated"; import Animated from "react-native-reanimated";
// import {openDatabase} from 'react-native-sqlite-storage'; // import {openDatabase} from 'react-native-sqlite-storage';
// import { TextInput } from "react-native-gesture-handler"; // import { TextInput } from "react-native-gesture-handler";
...@@ -39,8 +40,10 @@ const salary = require ('../../images/cheque.png'); ...@@ -39,8 +40,10 @@ const salary = require ('../../images/cheque.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 grant = require ('../../images/grant.png'); const grant = require ('../../images/grant.png');
const onPress = () => console.log('press'); const onPress = () => console.log('press');
// const deviceWeight = Dimensions.get("window").width;
// const deviceHeight =
// Platform.OS ===""
export default function CategoriesScreen({ navigation }) { export default function CategoriesScreen({ navigation }) {
const addCategoryAlert = () => const addCategoryAlert = () =>
...@@ -88,6 +91,12 @@ export default function CategoriesScreen({ navigation }) { ...@@ -88,6 +91,12 @@ export default function CategoriesScreen({ navigation }) {
{cancelable:false} {cancelable:false}
); );
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const INCOME={ const INCOME={
title: 'Income Categories', title: 'Income Categories',
data:[ data:[
...@@ -175,20 +184,30 @@ export default function CategoriesScreen({ navigation }) { ...@@ -175,20 +184,30 @@ export default function CategoriesScreen({ navigation }) {
}, },
] ]
} }
const renderItem = ({item}) => {
const renderItem = ({item}) => {
return( return(
<View style={{flexDirection:'column', justifyContent:'space-between'}}> <View style={{flexDirection:'column', justifyContent:'space-between'}}>
<View style={[styles.item]}> <View style={[styles.item]}>
<View style={{borderWidth:0.5,borderColor:'grey',borderRadius:100, width:50, height:50}}> <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> <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> <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}}> <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"/> <MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginHorizontal:5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}> <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"/> <MaterialCommunityIcons name="delete" size={20} color="red"/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -197,7 +216,6 @@ export default function CategoriesScreen({ navigation }) { ...@@ -197,7 +216,6 @@ export default function CategoriesScreen({ navigation }) {
} }
return ( return (
<View style = {[styles.container]}> <View style = {[styles.container]}>
<SectionList <SectionList
sections={[INCOME, EXPENSE]} sections={[INCOME, EXPENSE]}
......
mymoneymanager/screens/currency/addcurrency.js
View file @ 90b71037
import * as React from 'react'; import * as React from 'react';
import { useState } 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 { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer, StackActions } from '@react-navigation/native'; import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack';
...@@ -43,14 +43,31 @@ const handleButton = () =>{ ...@@ -43,14 +43,31 @@ const handleButton = () =>{
name:'Edit Currency', 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 AddCurrency =()=> {
const [name, onChangeName] = React.useState(null); const [name, onChangeName] = React.useState(null);
const [note, onChangeNote] = React.useState(null); const [note, onChangeNote] = React.useState(null);
const [targetAmount, onChangeTargetAmount] = React.useState(null); const [targetAmount, onChangeTargetAmount] = React.useState(null);
const [amountSaved, onChangeAmountSaved] = 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 [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [currencyExc, setCurrencyExc] = useState('1 USD');
const [currencySymbol, setCurrencySymbol] = useState('\u0024');
const [currencyCode, setCurrencyCode] = useState('USD');
const showDatePicker = () => { const showDatePicker = () => {
setDatePickerVisibility(true); setDatePickerVisibility(true);
...@@ -64,51 +81,102 @@ const AddCurrency =()=> { ...@@ -64,51 +81,102 @@ const AddCurrency =()=> {
console.warn("A date has been picked: ", date); console.warn("A date has been picked: ", date);
hideDatePicker(); 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 ( return (
<View style = {{backgroundColor:'white', height:'100%'}}> <View style = {{backgroundColor:'white', height:'100%'}}>
<View style={{marginHorizontal:20, marginTop:20}}> <View style={{marginHorizontal:20, marginTop:20}}>
<Text style={{marginBottom:20}}>Select currency</Text> <Text style={{marginBottom:20}}>Select currency</Text>
<Image style={{width:10, height:10, marginHorizontal:330,}} source={drop}></Image> <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={[styles.dividerLine,{marginBottom:30}]}></View>
<ListCurrency/>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<Text style={styles.text}>1 MYR = </Text> <View style={{flexDirection:'row', width:'57%'}}>
<Text style={[styles.text,{marginHorizontal:151, marginBottom:50}]}>1 USD = </Text> <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>
<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={{flexDirection:'row'}}>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}></View> <View style={[styles.dividerLine1,{marginHorizontal:0}]}>
<View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View> </View>
<View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}>
</View>
</View> </View>
<View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={{flexDirection:'row', width:'57%'}}>
<View style={{flexDirection:'column', justifyContent:'space-between'}}>
<View style={{flexDirection:'row'}}>
<Text style={[styles.text,{}]}>Code</Text> <Text style={[styles.text,{}]}>Code</Text>
<Text style={[styles.text,{marginHorizontal:156, marginBottom:50}]}>Symbol</Text></View>
</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={{flexDirection:'row'}}>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}></View> <View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
<View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View> <View style={[styles.dividerLine2,{marginHorizontal:60, marginBottom:30}]}></View>
</View> </View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<TouchableOpacity style={styles.saveButton}> <TouchableOpacity style={styles.saveButton}>
<Text style={{color:'white', fontWeight:'bold'}}>REFRESH FROM SERVER</Text> <Text style={{color:'white', fontWeight:'bold'}}>REFRESH FROM SERVER</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
); );
}; };
......
mymoneymanager/screens/currency/index.js
View file @ 90b71037
...@@ -58,6 +58,11 @@ const CURRENCY = [ ...@@ -58,6 +58,11 @@ const CURRENCY = [
title:'THB', title:'THB',
name:'Thai Baht', name:'Thai Baht',
}, },
// {
// id:'9',
// title:'',
// name:''
// }
] ]
const renderItem = ({ item }) => ( const renderItem = ({ item }) => (
...@@ -65,10 +70,14 @@ const renderItem = ({ item }) => ( ...@@ -65,10 +70,14 @@ const renderItem = ({ item }) => (
<View style = {{flexDirection:'row', justifyContent:'flex-end', marginRight:10}}> <View style = {{flexDirection:'row', justifyContent:'flex-end', marginRight:10}}>
<Text style ={{marginTop:10,fontSize:15, color:'dodgerblue'}}>{item.status}</Text> <Text style ={{marginTop:10,fontSize:15, color:'dodgerblue'}}>{item.status}</Text>
</View> </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> <Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:30, fontWeight:'500'}]}>{item.title}</Text>
<View style = {{flexDirection:'column', marginVertical:3}}> </View>
<TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:250, marginTop:5}} source={greater} ></Image></TouchableOpacity> <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>
</View> </View>
<Text style={{marginHorizontal:30}}>{item.name}</Text> <Text style={{marginHorizontal:30}}>{item.name}</Text>
......
mymoneymanager/screens/home/index.js
View file @ 90b71037
...@@ -248,40 +248,58 @@ export default function DashboardScreen({ navigation }) { ...@@ -248,40 +248,58 @@ export default function DashboardScreen({ navigation }) {
hideDatePicker(); hideDatePicker();
}; };
const [currCode, setCurrCode] = useState('RM');
const [totalAmount, setTotalAmount] = useState('');
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.containerBottom}> <View style={styles.containerBottom}>
<View style={{flexDirection:'row',marginTop:25,justifyContent:'space-between', width:'70%', marginHorizontal:70}}> <View style={{flexDirection:'row',marginTop:25,justifyContent:'space-between', width:'100%'}}>
<TouchableOpacity>
<Image style={{width:15, height:20,}} source={less} ></Image> <TouchableOpacity style={{flexDirection:'row', width:'5%', marginHorizontal:40}}>
<Image style={{width:15, height:20,}} source={less}></Image>
</TouchableOpacity> </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 <DateTimePickerModal
isVisible={isDatePickerVisible} isVisible={isDatePickerVisible}
mode="date" mode="date"
onConfirm={handleConfirmDate} onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/> onCancel={hideDatePicker}/>
<Text style={{fontSize:19, marginHorizontal:50, color:'black', width:'50%'}}>{confirmDate}</Text> <Text style={{fontSize:18, color:'black'}}>{confirmDate}</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={{flexDirection:'row', }}>
<TouchableOpacity style={{}}> <TouchableOpacity style={{flexDirection:'row', width:'6%'}}>
<Image style={{width:15, height:20, marginHorizontal:22}} source={greater}></Image> <Image style={{width:15, height:20}} source={greater}></Image>
</TouchableOpacity> </TouchableOpacity>
{/* <TouchableOpacity > <TouchableOpacity style={{width:'10%'}}>
<Ionics name="calendar-outline" size={20} color="black" style={{marginVertical:0, marginHorizontal:0}}/> <Ionics name="calendar-outline" size={20} color="black"/>
</TouchableOpacity> */} </TouchableOpacity>
</View>
</View> </View>
<View style ={{flexDirection:'row', justifyContent:'flex-start', marginTop:35, width:'90%'}}>
<Text style = {{fontSize:18, marginHorizontal:30, color:'black'}}>EXPENSE</Text> <View style ={{flexDirection:'row', justifyContent:'space-evenly', marginTop:35, width:'100%'}}>
<Text style = {{fontSize:18, marginHorizontal:35, color:'black'}}>INCOME</Text> <View style={{flexDirection:'row', width:'20%'}}>
<Text style = {{fontSize:18, marginHorizontal:50, color:'black'}}>TOTAL</Text> <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>
<View style ={{flexDirection:'row', justifyContent:'flex-start', marginTop:1, marginBottom:50}}>
<Text style = {{color:'red', fontSize:18, marginHorizontal:27}}>RM 422.00</Text> <View style ={{flexDirection:'row', justifyContent:'space-evenly', marginTop:1, marginBottom:50, width:'100%'}}>
<Text style = {{fontSize:18, marginHorizontal:20, color:'#006ad1'}}>RM 2,875.00</Text> <View style={{flexDirection:'row', width:'24%', marginRight:'auto', marginHorizontal:25}}>
<Text style = {{fontSize:18, marginHorizontal:27, color:'black'}}>RM 2,453.00</Text> <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>
</View> </View>
......
mymoneymanager/screens/profile/index.js
View file @ 90b71037
...@@ -16,7 +16,8 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker'; ...@@ -16,7 +16,8 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker';
import ImagePicker from 'react-native-image-crop-picker'; import ImagePicker from 'react-native-image-crop-picker';
import SidebarScreen from '../sidebar'; import SidebarScreen from '../sidebar';
import styles from './style'; 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'); const logo = require ('../../images/pic.png');
...@@ -41,51 +42,8 @@ const drop = require ('../../images/drop.png'); ...@@ -41,51 +42,8 @@ const drop = require ('../../images/drop.png');
const goalcolor = require('../../images/roundedrectangle.png'); const goalcolor = require('../../images/roundedrectangle.png');
const caricon = require ('../../images/caricon.png'); const caricon = require ('../../images/caricon.png');
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const profile = require ('../../images/profile.jpg'); const profile = require ('../../images/user.png');
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 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 Profile =()=> {
const [fname, onChangeFName] = useState('Farhani'); const [fname, onChangeFName] = useState('Farhani');
...@@ -95,8 +53,9 @@ const Profile =()=> { ...@@ -95,8 +53,9 @@ const Profile =()=> {
const [confirmPassword, onChangeConfirmPassword] = useState(''); const [confirmPassword, onChangeConfirmPassword] = useState('');
const [dob, setDOB] = useState('06/02/1999'); const [dob, setDOB] = useState('06/02/1999');
const [gender, setGender] = useState('Female'); const [gender, setGender] = useState('Female');
const [profilePic, setProfilePic] = useState(profile); const [profilePic, setProfilePic] = useState(profile);
const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const [isUploadOptionVisible, setUploadOptionVisible] = useState(false);
const showDatePicker = () => { const showDatePicker = () => {
setDatePickerVisibility(true); setDatePickerVisibility(true);
...@@ -110,9 +69,134 @@ const Profile =()=> { ...@@ -110,9 +69,134 @@ const Profile =()=> {
console.warn("A date has been picked: ", date); console.warn("A date has been picked: ", date);
hideDatePicker(); 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 ( return (
<SafeAreaView style={{flex:1}}>
<View style = {{backgroundColor:'white', height:'100%'}}> <View style = {{backgroundColor:'white', height:'100%'}}>
<ScrollView> <ScrollView>
<View style={{marginHorizontal:20, marginTop:20}}> <View style={{marginHorizontal:20, marginTop:20}}>
...@@ -124,23 +208,105 @@ const Profile =()=> { ...@@ -124,23 +208,105 @@ const Profile =()=> {
</View> </View>
</View> </View>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<View>
<View style={{flexDirection:'row'}}> <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'}}> <View style={{flexDirection:'row'}}>
<Icon name="upload" size={20} color="#5eb5ce"/> <Icon name="upload" size={20} color="#5eb5ce"/>
<Text style={{color:'#5eb5ce', marginHorizontal:10, fontSize:15}}>Upload Picture</Text> <Text style={{color:'#5eb5ce', marginHorizontal:10, fontSize:15}}>Upload Picture</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.button}> <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>
</View>
<View style={{marginTop:30, flexDirection:'row', justifyContent:'space-between', width:'100%'}}> <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:5}}>First Name</Text>
<Text style={{fontSize:15, marginHorizontal:90}}>Last Name</Text> <Text style={{fontSize:15, marginHorizontal:90}}>Last Name</Text>
...@@ -180,12 +346,19 @@ const Profile =()=> { ...@@ -180,12 +346,19 @@ const Profile =()=> {
</View> </View>
<View style={{marginTop:10, marginHorizontal:5,flexDirection:'row', justifyContent:'space-between', width:'100%'}}> <View style={{marginTop:10, marginHorizontal:5,flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
<View style={styles.input}> <View style={[styles.input,{flexDirection:'row', justifyContent:'space-between'}]}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} setDOB={setDOB} value={dob} fontSize={15}/></View> <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}]}> <View style={[styles.input,{marginRight:10}]}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} setGender={setGender} value={gender} fontSize={15}/> <TextInput style={{marginTop:3, fontSize:15, marginHorizontal:2}} setGender={setGender} value={gender} fontSize={15}/>
</View> </View>
</View> </View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<TouchableOpacity style={{alignItems: "center", <TouchableOpacity style={{alignItems: "center",
...@@ -203,7 +376,7 @@ const Profile =()=> { ...@@ -203,7 +376,7 @@ const Profile =()=> {
</ScrollView> </ScrollView>
</View> </View>
</SafeAreaView>
); );
}; };
......
mymoneymanager/screens/sidebar/index.js
View file @ 90b71037
...@@ -38,7 +38,7 @@ const settings = require ('../../images/settings.png'); ...@@ -38,7 +38,7 @@ const settings = require ('../../images/settings.png');
const categories = require ('../../images/categories.png'); const categories = require ('../../images/categories.png');
const statistics = require ('../../images/statistics.png'); const statistics = require ('../../images/statistics.png');
const reminder = require ('../../images/alarm.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){ ...@@ -64,20 +64,20 @@ function CustomDrawer(props){
<View style = {{flexDirection:'row'}}> <View style = {{flexDirection:'row'}}>
<TouchableOpacity onPress={() => props.navigation.navigate("Profile")}> <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}}> <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}/> <Image style={{width: 60, height: 60, borderColor:'powderblue', borderWidth: 1, elevation: 7,borderRadius: 100,}} source={profile}/>
</View> </View>
<View style={{flexDirection:'row',}}>
<View> <View style={{width:'100%'}}>
<Text style={{fontSize:18, marginHorizontal:28, marginVertical:5, fontWeight:'bold'}}>Farhani Halim</Text> <Text style={{fontSize:18, marginHorizontal:15, marginVertical:5, fontWeight:'bold'}}>Farhani Halim</Text>
<Text style={{marginHorizontal:25}}>@farhanihalim</Text> <Text style={{marginHorizontal:15}}>@farhanihalim</Text>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<View style ={{flexDirection:'row', justifyContent:'flex-start'}}> <View style ={{flexDirection:'row', justifyContent:'flex-start'}}>
</View> </View>
</View> </View>
</View> </View>
</View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
......
mymoneymanager/screens/transactions/index.js
View file @ 90b71037
import React, { useEffect, useRef, useState, memo, Component, Fragment } from "react"; 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 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';
...@@ -16,6 +16,7 @@ import Overlay from 'react-native-modal-overlay'; ...@@ -16,6 +16,7 @@ import Overlay from 'react-native-modal-overlay';
// import { Modal, Portal, Provider } from 'react-native-paper'; // import { Modal, Portal, Provider } from 'react-native-paper';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
// 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');
...@@ -266,6 +267,28 @@ const Transactions =()=> { ...@@ -266,6 +267,28 @@ const Transactions =()=> {
hideTimePicker(); 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 }) => ( 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%'}}>
...@@ -357,7 +380,6 @@ const Transactions =()=> { ...@@ -357,7 +380,6 @@ const Transactions =()=> {
const renderCurrency = ({ item }) => ( const renderCurrency = ({ item }) => (
<SafeAreaView> <SafeAreaView>
<TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}> <TouchableOpacity onPress={()=>{setStrCurrSelected(item.label)}}>
<Text style={{marginTop:10, fontSize:20, justifyContent:'center', alignItems:'center', marginHorizontal:100}}>{item.label}</Text> <Text style={{marginTop:10, fontSize:20, justifyContent:'center', alignItems:'center', marginHorizontal:100}}>{item.label}</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -478,7 +500,19 @@ const Transactions =()=> { ...@@ -478,7 +500,19 @@ const Transactions =()=> {
<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={()=>{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:'100%', justifyContent:'space-between'}}>
<View style={{flexDirection:'row', width:'80%'}}> <View style={{flexDirection:'row', width:'80%'}}>
<Text style={{marginTop:24, fontSize:20, marginHorizontal:5}}>{strCurrSelected}</Text> <Text style={{marginTop:24, fontSize:20, marginHorizontal:5}}>{strCurrSelected}</Text>
...@@ -489,16 +523,13 @@ const Transactions =()=> { ...@@ -489,16 +523,13 @@ const Transactions =()=> {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style ={{flexDirection:'row',backgroundColor:'transparent', width:"65%", height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginRight:10}}> <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>
</View> </View>
<View style = {{flexDirection:'row', justifyContent:'flex-start', marginTop:50}}> <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)}> <TouchableOpacity style={{justifyContent:'space-between', width:'50%',flexDirection:'row'}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<DateTimePickerModal <DateTimePickerModal
isVisible={isDatePickerVisible} isVisible={isDatePickerVisible}
...@@ -520,7 +551,7 @@ const Transactions =()=> { ...@@ -520,7 +551,7 @@ const Transactions =()=> {
</View> </View>
</View> </View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}> <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")} */} {/* onPress ={() => navigation.navigate("Dashboard")} */}
<Text style={{color:'white', fontWeight:'bold'}}>ADD</Text> <Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
</TouchableOpacity> </TouchableOpacity>
......
mymoneymanager/screens/wishlists/addwishlist.js
View file @ 90b71037
import * as React from 'react'; import * as React from 'react';
import { useState } 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 { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer, StackActions } from '@react-navigation/native'; import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack';
...@@ -39,7 +39,7 @@ const goalcolor = require('../../images/roundedrectangle.png'); ...@@ -39,7 +39,7 @@ const goalcolor = require('../../images/roundedrectangle.png');
const caricon = require ('../../images/caricon.png'); const caricon = require ('../../images/caricon.png');
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const onPress = ()=>console.log('press'); const onPress = ()=>console.log('press');
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
// const DATE =[ // const DATE =[
// { // {
// startDate: new Date() // startDate: new Date()
...@@ -51,8 +51,9 @@ const Wishlists =()=> { ...@@ -51,8 +51,9 @@ const Wishlists =()=> {
const [note, onChangeNote] = React.useState(null); const [note, onChangeNote] = React.useState(null);
const [targetAmount, onChangeTargetAmount] = React.useState(null); const [targetAmount, onChangeTargetAmount] = React.useState(null);
const [amountSaved, onChangeAmountSaved] = React.useState(null); const [amountSaved, onChangeAmountSaved] = React.useState(null);
const [confirmDate, setConfirmDate] = useState('');
const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [confirmDate, setConfirmDate] = useState(todayDate);
const showDatePicker = () => { const showDatePicker = () => {
setDatePickerVisibility(true); setDatePickerVisibility(true);
...@@ -63,18 +64,17 @@ const Wishlists =()=> { ...@@ -63,18 +64,17 @@ const Wishlists =()=> {
}; };
const handleConfirmDate = (date) => { const handleConfirmDate = (date) => {
console.warn("A date has been picked: ", date);
console.log(todayDate);
setConfirmDate(moment(date).format('MMM DD, YYYY'));
hideDatePicker(); hideDatePicker();
}; };
// const getDate = () => {
// let tempDate = date.toString().split(' ');
// return date !== ''
// ? `${tempDate[0]} ${tempDate[1]} ${tempDate[2]} ${tempDate[3]}`
// : '';
// };
return ( return (
<View style = {{backgroundColor:'white', height:'100%'}}> <View style = {{backgroundColor:'white', height:'100%'}}>
<KeyboardAvoidingView>
<ScrollView>
<View style={{marginHorizontal:20, marginTop:20}}> <View style={{marginHorizontal:20, marginTop:20}}>
<Text>Name</Text> <Text>Name</Text>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeName={onChangeName} value={name} placeholder="" placeholderTextColor={'grey'} fontSize={20}/> <TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeName={onChangeName} value={name} placeholder="" placeholderTextColor={'grey'} fontSize={20}/>
...@@ -93,17 +93,21 @@ const Wishlists =()=> { ...@@ -93,17 +93,21 @@ const Wishlists =()=> {
<View style={styles.dividerLine}></View> <View style={styles.dividerLine}></View>
<Text style={styles.text}>Desired date</Text> <Text style={styles.text}>Desired date</Text>
<View style={{flexDirection:'row'}}>
<TouchableOpacity style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}} title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<TouchableOpacity title="Show Date Picker" onPress = {()=>setDatePickerVisibility(!isDatePickerVisible)}>
<DateTimePickerModal <DateTimePickerModal
isVisible={isDatePickerVisible} isVisible={isDatePickerVisible}
mode="date" mode="date"
onConfirm={handleConfirmDate} onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/> onCancel={hideDatePicker}/>
<Text>{confirmDate}</Text>
<Image style={{width:10, height:10, marginTop:15, marginHorizontal:290, marginBottom:1 }} source={drop}></Image></TouchableOpacity> <View style={{flexDirection:'row', width:'80%'}}>
</View> <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={styles.dividerLine}></View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
...@@ -111,10 +115,15 @@ const Wishlists =()=> { ...@@ -111,10 +115,15 @@ const Wishlists =()=> {
<Text style={[styles.text]}>Icon</Text> <Text style={[styles.text]}>Icon</Text>
</View> </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> <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={{flexDirection:'row'}}>
<View style={[styles.dividerLine1,{marginHorizontal:0}]}></View> <View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
...@@ -124,14 +133,16 @@ const Wishlists =()=> { ...@@ -124,14 +133,16 @@ const Wishlists =()=> {
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeNote={onChangeNote} value={note} placeholder="-" placeholderTextColor={'grey'} fontSize={20}/> <TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeNote={onChangeNote} value={note} placeholder="-" placeholderTextColor={'grey'} fontSize={20}/>
<View style={styles.dividerLine}></View> <View style={styles.dividerLine}></View>
</View> </View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<TouchableOpacity style={styles.saveButton}> <TouchableOpacity style={styles.saveButton}>
<Text style={{color:'white', fontWeight:'bold'}}>ADD</Text> <Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView>
</KeyboardAvoidingView>
</View> </View>
); );
}; };
......
mymoneymanager/yarn.lock
View file @ 90b71037
...@@ -6703,6 +6703,11 @@ react-native-elements@^3.4.2: ...@@ -6703,6 +6703,11 @@ 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-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: react-native-flatlist-picker@^1.0.1:
version "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" 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