Skip to content

S
shoppinglist
Commit a6d6ebfa authored by Farhani's avatar Farhani
Browse files
Options

Add image picker for upload photo

parent a6a500ec
Show whitespace changes
Inline Side-by-side
Showing with 414 additions and 268 deletions
package.json
View file @ a6d6ebfa
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"react": "18.1.0", "react": "18.1.0",
"react-native": "^0.70.6", "react-native": "^0.70.6",
"react-native-image-picker": "^4.10.3", "react-native-image-picker": "^4.10.3",
"react-native-input-spinner": "^1.7.12",
"react-native-numeric-input": "^1.9.1", "react-native-numeric-input": "^1.9.1",
"react-native-safe-area-context": "^4.4.1", "react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2", "react-native-screens": "^3.18.2",
......
screens/ListScreen/index.js
View file @ a6d6ebfa
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform} from 'react-native'; import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage'; import { openDatabase } from 'react-native-sqlite-storage';
import ImagePicker from 'react-native-image-picker'; import ImagePicker from 'react-native-image-picker';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputQuantity from 'react-native-numeric-input'; import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
var db = openDatabase({ name: 'shoppinglist.db'}); var db = openDatabase({ name: 'shoppinglist.db'});
...@@ -11,74 +11,23 @@ const meal = require('../../images/breakfast.png'); ...@@ -11,74 +11,23 @@ const meal = require('../../images/breakfast.png');
const plusbutton = require('../../images/plusbutton.png'); const plusbutton = require('../../images/plusbutton.png');
const editbutton = require('../../images/editbutton.png'); const editbutton = require('../../images/editbutton.png');
const deletebutton = require ('../../images/deletebutton.png'); const deletebutton = require ('../../images/deletebutton.png');
// const LIST = [
// {
// id:'0',
// title:'Bread',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'1',
// title:'Shirt',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'2',
// title:'Shoes',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'0',
// title:'Bread',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'1',
// title:'Shirt',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'2',
// title:'Shoes',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'0',
// title:'Bread',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'1',
// title:'Shirt',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'2',
// title:'Shoes',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// ]
const ListScreen = ({navigation}) => { const ListScreen = ({navigation}) => {
const [addImageVisible, setAddImageVisible] = useState(false); const [addImageVisible, setAddImageVisible] = useState(false);
const [addModalVisible, setAddModalVisible] = useState(false); const [addModalVisible, setAddModalVisible] = useState(false);
const [editModalVisible, setEditModalVisible] = useState(false); const [editModalVisible, setEditModalVisible] = useState(false);
const [deleteModalVisible, setDeleteModalVisible] = useState(false); const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false);
const [id, setId] = useState ('');
const [name, setName] = useState(''); const [name, setName] = useState('');
const [quantity, setQuantity] = useState(''); const [quantity, setQuantity] = useState(0);
const [image, setImage] = useState(''); const [image, setImage] = useState('');
const [filePath, setFilePath] = useState({}); const [updateItem, setUpdateItem] = useState ([]);
const [items, setItems] = useState ([]); const [items, setItems] = useState ([]);
const [empty, setEmpty] = useState ([]); const [emptyList, setEmptyList] = useState ([]);
const [selectedId, setSelectedId] = useState ('');
const [imageUri, setImageUri]= useState('');
// const [imageUriGallery, setImageUriGallery]=useState('');
// create table // create table
useEffect(() => { useEffect(() => {
...@@ -91,38 +40,41 @@ const ListScreen = ({navigation}) => { ...@@ -91,38 +40,41 @@ const ListScreen = ({navigation}) => {
if (res.rows.length == 0) { if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS list', []); txn.executeSql('DROP TABLE IF EXISTS list', []);
txn.executeSql( txn.executeSql(
'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100), quantity INT(10))', 'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100), quantity INT(10), image LONGTEXT)',
[], [],
); );
} }
}, },
); );
}); });
console.log('Sucess!');
}, []); }, []);
// add into list // add into list
const addToList = () => { const insertList = () => {
console.log(name, quantity); console.log(name, quantity);
if (name == '') { if (name == '') {
alert('Please enter name'); alert('Please enter name');
return; // return;
} else }
if (quantity == 0){ else if (quantity == 0){
alert('Please enter quantity'); alert('Please enter quantity');
return;
} }
else{ else{
setAddModalVisible(false) setAddModalVisible(false)
db.transaction(function (tx) { db.transaction(function (tx) {
tx.executeSql( tx.executeSql(
'INSERT INTO list (name) VALUES (?)', 'INSERT INTO list (name, quantity, image) VALUES (?,?,?)',
[name], [name, quantity, image],
(tx, results) => { (tx, results) => {
console.log('Results', results.rowsAffected); console.log('Results', results.rowsAffected);
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
Alert.alert('Data Inserted Successfully'); Alert.alert(
} else alert('Failed creating list'); 'Success!',
'Data inserted successfully',
);
onRefresh()
setName(''), setQuantity(0), setImage('')
} else alert('Add list failed');
},(error)=>{ },(error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
} }
...@@ -131,45 +83,59 @@ db.transaction(function (tx) { ...@@ -131,45 +83,59 @@ db.transaction(function (tx) {
} }
} }
// navigateToListScreen = () => {
// navigation.navigate('ListScreen');
// }
// view list // view list
useEffect(() => { useEffect(() => {
db.transaction((tx) => { onRefresh()
tx.executeSql(
'SELECT * FROM list',
[],
(tx, results) => {
var temp = [];
for (let i = 0; i < results.rows.length; ++i)
temp.push(results.rows.item(i));
setItems(temp);
if (results.rows.length >=1){
setEmpty(false);
}else{
setEmpty(true)
}
console.log(JSON.stringify(temp))
}
);
});
}, []); }, []);
// update list // update list
const updateList = () => { const updateList = () => {
console.log(selectedId, name, quantity, image);
console.log(updateItem.name, updateItem.quantity, updateItem.image);
var n = ''
var q = 0
var i = ''
if (name == '' && updateItem.name == ''){
alert('Please enter name');
}
else if (quantity == 0 && updateItem.quantity == 0){
alert('Please enter quantity');
}
else if (image == '' && updateItem.image == ''){
alert('')
}
else {
if(name == ''){
n = updateItem.name
}
else{
n = name
}
if(quantity == 0){
q = updateItem.quantity
}
else{
q = quantity
}
if(image == ''){
i = updateItem.image
}
else{
i = image
}
console.log(n,q,i)
setEditModalVisible(false)
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql( tx.executeSql(
'SELECT * FROM list where id = ?', 'UPDATE list set name = ?, quantity = ?, image = ? where id = ?',
[id], [n, q, i, selectedId],
(tx, results) => { (tx, results) => {
console.log('Results', results.rowsAffected); console.log('Results', JSON.stringify(results));
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
Alert.alert( Alert.alert(
'Success', 'Success!',
'Successfully added into shopping list.', 'Data updated successfully.',
[ [
{ {
text: 'Ok', text: 'Ok',
...@@ -178,20 +144,28 @@ const updateList = () => { ...@@ -178,20 +144,28 @@ const updateList = () => {
], ],
{ cancelable: false } { cancelable: false }
); );
} else alert('Failed creating list'); onRefresh()
setName(''), setQuantity(0), setImage('')
} (error)=>{
console.log(JSON.stringify(error))
}
} }
); );
}); });
} }
};
//delete list //delete list
const deleteList = (id) => { const deleteList = () => {
console.log('Delete item ' + selectedId)
var temp = selectedId
setDeleteModalVisible(false)
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql( tx.executeSql(
'DELETE * FROM list where id = ?', 'DELETE FROM list where id = ?',
[name], [temp],
(tx, results) => { (tx, results) => {
console.log('Results', results.rowsAffected); console.log('Results', JSON.stringify(results));
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
Alert.alert( Alert.alert(
'Success', 'Success',
...@@ -204,12 +178,39 @@ const deleteList = (id) => { ...@@ -204,12 +178,39 @@ const deleteList = (id) => {
], ],
{ cancelable: false } { cancelable: false }
); );
} else alert('Failed creating list'); onRefresh()
setName(''), setQuantity(0)
}
},(error)=>{
console.log(JSON.stringify(error))
} }
); );
}); });
} }
const onRefresh = () => {
db.transaction((tx) => {
tx.executeSql(
'SELECT * FROM list',
[],
(tx, results) => {
var temp = [];
for (let i = 0; i < results.rows.length; ++i)
temp.push(results.rows.item(i));
setItems(temp);
if (results.rows.length >=1){
setEmptyList(false);
}else{
setEmptyList(true)
}
console.log(JSON.stringify(temp))
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
};
const listViewItemSeparator = () =>{ const listViewItemSeparator = () =>{
return ( return (
<View style={{ <View style={{
...@@ -285,118 +286,58 @@ const requestExternalWritePermission = async () => { ...@@ -285,118 +286,58 @@ const requestExternalWritePermission = async () => {
} else return true; } else return true;
}; };
const captureImage = async (type) => { const openCamera = () => {
let options = { const options={
mediaType: type, storageOption : {
maxWidth: 300, path:'images',
maxHeight: 550, mediaType:'photo',
quality: 1, },
// videoQuality: 'low', includeBase64: true,
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);
launchCamera(options, response => {
console.log('Response = ', response);
if (response.didCancel) { if (response.didCancel) {
alert('User cancelled camera picker'); console.log('User cancelled image picker');
return; } else if (response.error) {
} else if (response.errorCode == 'camera_unavailable') { console.log('ImagePicker Error: ', response.error);
alert('Camera not available on device'); } else if (response.customButton) {
return; console.log('User tapped custom button: ', response.customButton);
} else if (response.errorCode == 'permission') { alert(response.customButton);
alert('Permission not satisfied'); } else {
return; const source = response.assets[0].uri
} else if (response.errorCode == 'others') { console.log(source)
alert(response.errorMessage); setImageUri(source);
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) => { const openGallery = () => {
let options = { const options={
mediaType: type, storageOption : {
maxWidth: 300, path:'images',
maxHeight: 550, mediaType:'photo',
quality: 1, },
includeBase64: true,
}; };
launchImageLibrary(options, (response) => {
console.log('Response = ', response);
launchImageLibrary(options, response => {
console.log('Response = ', response);
if (response.didCancel) { if (response.didCancel) {
alert('User cancelled camera picker'); console.log('User cancelled image picker');
return; } else if (response.error) {
} else if (response.errorCode == 'camera_unavailable') { console.log('ImagePicker Error: ', response.error);
alert('Camera not available on device'); } else if (response.customButton) {
return; console.log('User tapped custom button: ', response.customButton);
} else if (response.errorCode == 'permission') { alert(response.customButton);
alert('Permission not satisfied'); } else {
return; const source = response.assets[0].uri
} else if (response.errorCode == 'others') { console.log(source)
alert(response.errorMessage); setImageUri(source);
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 = () => {
// let options = {
// title: 'Select Image',
// customButtons: [
// {
// name: 'customOptionKey',
// title: 'Choose Photo from Custom Option'
// },
// ],
// storageOptions: {
// skipBackup: true,
// path: 'images',
// },
// };
// ImagePicker.showImagePicker(options, (response) => {
// console.log('Response = ', response);
// if (response.didCancel) {
// console.log('User cancelled image picker');
// } else if (response.error) {
// console.log('ImagePicker Error: ', response.error);
// } else if (response.customButton) {
// console.log(
// 'User tapped custom button: ',
// response.customButton
// );
// alert(response.customButton);
// } else {
// let source = response;
// // You can also display the image using data:
// // let source = {
// // uri: 'data:image/jpeg;base64,' + response.data
// // };
// setFilePath(source);
// }
// });
// };
const listItemView = ( item ) => ( const listItemView = ( item ) => (
<View <View
...@@ -415,7 +356,7 @@ const listItemView = ( item ) => ( ...@@ -415,7 +356,7 @@ const listItemView = ( item ) => (
style = {styles.imageContainer}> style = {styles.imageContainer}>
<Image <Image
style = {[styles.imageSize,{}]} style = {[styles.imageSize,{}]}
source={meal} // source={imageUri}
/> />
<View <View
style={{ style={{
...@@ -453,7 +394,7 @@ const listItemView = ( item ) => ( ...@@ -453,7 +394,7 @@ const listItemView = ( item ) => (
styles.editDeleteContainer, styles.editDeleteContainer,
{} {}
]} ]}
onPress = {()=>setEditModalVisible(true)} onPress = {()=>{setEditModalVisible(true), setUpdateItem(item), setSelectedId(item.id)}}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="square-edit-outline" name="square-edit-outline"
...@@ -466,7 +407,7 @@ const listItemView = ( item ) => ( ...@@ -466,7 +407,7 @@ const listItemView = ( item ) => (
styles.editDeleteContainer, styles.editDeleteContainer,
{marginHorizontal:10,} {marginHorizontal:10,}
]} ]}
onPress = {()=>setDeleteModalVisible(true)} onPress = {()=>{setDeleteModalVisible(true), setSelectedId(item.id)}}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="delete" name="delete"
...@@ -515,22 +456,35 @@ const listItemView = ( item ) => ( ...@@ -515,22 +456,35 @@ const listItemView = ( item ) => (
style={styles.centeredView}> style={styles.centeredView}>
<View <View
style={styles.addImageView}> style={styles.addImageView}>
<TouchableOpacity
style={{
justifyContent:'flex-start'
}}
onPress={()=>setAddImageVisible(false)}
>
<MaterialCommunityIcons
name="close-circle"
size={30}
color='white'
/>
</TouchableOpacity>
<View <View
style={{ style={{
alignItems:'center', alignItems:'center',
marginTop:10 marginTop:1
}}> }}>
<Text <Text
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'black',
fontWeight:'bold' fontWeight:'bold',
justifyContent:'center'
}}> }}>
Add image Add image
</Text> </Text>
</View>
<TouchableOpacity <TouchableOpacity
onPress={() => captureImage('photo')}> onPress={() => {openCamera()}}
>
<View <View
style={{ style={{
marginTop:25 marginTop:25
...@@ -545,7 +499,8 @@ const listItemView = ( item ) => ( ...@@ -545,7 +499,8 @@ const listItemView = ( item ) => (
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => chooseFile('photo')}> onPress={() => openGallery()}
>
<View <View
style={{ style={{
marginTop:15 marginTop:15
...@@ -560,6 +515,8 @@ const listItemView = ( item ) => ( ...@@ -560,6 +515,8 @@ const listItemView = ( item ) => (
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View>
</View> </View>
</View> </View>
</View> </View>
...@@ -570,6 +527,10 @@ const listItemView = ( item ) => ( ...@@ -570,6 +527,10 @@ const listItemView = ( item ) => (
} }
const AddListModal = () => { const AddListModal = () => {
console.log("Results "+ imageUri)
var img = imageUri != null && imageUri != undefined && imageUri!='' ? {uri:imageUri} : ''
if(addModalVisible){ if(addModalVisible){
return( return(
<Modal <Modal
...@@ -642,7 +603,12 @@ const listItemView = ( item ) => ( ...@@ -642,7 +603,12 @@ const listItemView = ( item ) => (
marginHorizontal:19 marginHorizontal:19
}}> }}>
<TextInput <TextInput
style={{
fontSize:20,
marginHorizontal:5
}}
onChangeText={(name) => setName(name)} onChangeText={(name) => setName(name)}
// onSelectionChange={}
/> />
</View> </View>
</View> </View>
...@@ -666,26 +632,27 @@ const listItemView = ( item ) => ( ...@@ -666,26 +632,27 @@ const listItemView = ( item ) => (
</View> </View>
<View <View
style={{ style={{
marginHorizontal:5, marginHorizontal:10,
marginTop:5 marginTop:5
}}> }}>
<InputQuantity <InputSpinner
value={quantity} value={quantity}
minValue={0} min={0}
maxValue={100} max={10}
// onChangeText={(name) => setName(name) step={1}
onChangeNumber={(quantity) => setQuantity(quantity)} onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)} onLimitReached={(isMax, msg) => console.log(isMax,msg)}
totalHeight={50}
totalWidth={150}
iconSize={25}
step={1.5}
valueType='integer'
rounded rounded
// showBorder skin='default'
textColor='black' textColor='black'
iconStyle={{color:'white'}} fontSize={20}
rightButtonBackgroundColor='#ed81a1' colorMin='white'
leftButtonBackgroundColor='#ed81a1' colorMax='white'
buttonTextColor='#ed81a1'
colorPress="#ed81a1"
color='white'
width={200}
height={50}
/> />
</View> </View>
</View> </View>
...@@ -707,6 +674,44 @@ const listItemView = ( item ) => ( ...@@ -707,6 +674,44 @@ const listItemView = ( item ) => (
Image Image
</Text> </Text>
</View> </View>
{imageUri != null && imageUri != undefined && imageUri!=''
?
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:90,
height:90,
marginHorizontal:17,
// alignItems:'center',
// justifyContent:'center'
}}>
<Image
style={{
height:'100%',
width:'100%',
}}
source={img}
/>
<View
style={{
position:'absolute',
// justifyContent:'flex-end',
right:0,
// marginHorizontal:60,
width:'100%',
height:'20%'
}}>
<MaterialCommunityIcons
name="window-close"
size={20}
color="white"
/>
</View>
</View>
:
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor:'transparent', backgroundColor:'transparent',
...@@ -719,17 +724,16 @@ const listItemView = ( item ) => ( ...@@ -719,17 +724,16 @@ const listItemView = ( item ) => (
alignItems:'center', alignItems:'center',
justifyContent:'center' justifyContent:'center'
}} }}
onPress ={() =>setAddImageVisible(true)}> onPress ={() =>setAddImageVisible(true)}
<Image >
source={meal} <MaterialCommunityIcons
style={{ name="image-plus"
width:30, size={30}
height:30}} color="#ebebeb"
/>
<Image
source={{uri: filePath.uri}}
/> />
</TouchableOpacity> </TouchableOpacity>
}
</View> </View>
<View <View
style={{ style={{
...@@ -770,7 +774,7 @@ const listItemView = ( item ) => ( ...@@ -770,7 +774,7 @@ const listItemView = ( item ) => (
style={{ style={{
marginHorizontal:5 marginHorizontal:5
}} }}
onPress={addToList}> onPress={insertList}>
<View <View
style={{ style={{
backgroundColor:'transparent', backgroundColor:'transparent',
...@@ -842,7 +846,7 @@ const EditListModal = () => { ...@@ -842,7 +846,7 @@ const EditListModal = () => {
color:'black', color:'black',
fontWeight:'bold' fontWeight:'bold'
}}> }}>
Edit list Update list
</Text> </Text>
</View> </View>
...@@ -872,7 +876,13 @@ const EditListModal = () => { ...@@ -872,7 +876,13 @@ const EditListModal = () => {
marginHorizontal:19 marginHorizontal:19
}}> }}>
<TextInput <TextInput
style={{
fontSize:20,
marginHorizontal:5
}}
onChangeText={(name) => setName(name)} onChangeText={(name) => setName(name)}
placeholderTextColor='black'
placeholder={updateItem.name}
/> />
</View> </View>
</View> </View>
...@@ -896,26 +906,28 @@ const EditListModal = () => { ...@@ -896,26 +906,28 @@ const EditListModal = () => {
</View> </View>
<View <View
style={{ style={{
marginHorizontal:5, marginHorizontal:10,
marginTop:5 marginTop:5
}}> }}>
<InputQuantity <InputSpinner
value={quantity} value={updateItem.quantity}
minValue={0} mine={0}
maxValue={100} max={10}
// onChangeText={(name) => setName(name) step={1}
onChangeNumber={(quantity) => setQuantity(quantity)} onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)} onLimitReached={(isMax, msg) => console.log(isMax,msg)}
totalHeight={50}
totalWidth={150}
iconSize={25}
step={1.5}
valueType='integer'
rounded rounded
// showBorder skin='square'
textColor='black' textColor='black'
iconStyle={{color:'white'}} fontSize={20}
rightButtonBackgroundColor='#ed81a1' colorMin='white'
leftButtonBackgroundColor='#ed81a1' colorMax='white'
buttonTextColor='#ed81a1'
colorPress="#ed81a1"
color='white'
width={200}
height={50}
/> />
</View> </View>
</View> </View>
...@@ -951,13 +963,13 @@ const EditListModal = () => { ...@@ -951,13 +963,13 @@ const EditListModal = () => {
}} }}
onPress ={() =>setAddImageVisible(true)}> onPress ={() =>setAddImageVisible(true)}>
<Image <Image
source={meal} // source={meal}
style={{ style={{
width:30, width:30,
height:30}} height:30}}
/> />
<Image <Image
source={{uri: filePath.uri}} // source={{uri: filePath.uri}}
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -971,7 +983,7 @@ const EditListModal = () => { ...@@ -971,7 +983,7 @@ const EditListModal = () => {
style={{ style={{
marginHorizontal:5 marginHorizontal:5
}} }}
onPress={() => setEditModalVisible(false)}> onPress={() => setConfirmEditModalVisible(true)}>
<View <View
style={{ style={{
backgroundColor:'transparent', backgroundColor:'transparent',
...@@ -1000,7 +1012,7 @@ const EditListModal = () => { ...@@ -1000,7 +1012,7 @@ const EditListModal = () => {
style={{ style={{
marginHorizontal:5 marginHorizontal:5
}} }}
// onPress={addToList} onPress={updateList}
> >
<View <View
style={{ style={{
...@@ -1075,7 +1087,7 @@ const DeleteListModal = () => { ...@@ -1075,7 +1087,7 @@ const DeleteListModal = () => {
fontWeight:'bold', fontWeight:'bold',
marginBottom:20 marginBottom:20
}}> }}>
Delete this record? Delete this shopping list?
</Text> </Text>
<Text <Text
style={{ style={{
...@@ -1122,7 +1134,7 @@ const DeleteListModal = () => { ...@@ -1122,7 +1134,7 @@ const DeleteListModal = () => {
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:5}} marginHorizontal:5}}
onPress={() => setDeleteModalVisible(false)} onPress={deleteList}
> >
<View <View
style={{ style={{
...@@ -1135,7 +1147,6 @@ const DeleteListModal = () => { ...@@ -1135,7 +1147,6 @@ const DeleteListModal = () => {
alignItems:'center', alignItems:'center',
alignContent:'center', alignContent:'center',
justifyContent:'center'}} justifyContent:'center'}}
onPress={deleteList}
> >
<Text <Text
style={{ style={{
...@@ -1154,6 +1165,130 @@ const DeleteListModal = () => { ...@@ -1154,6 +1165,130 @@ const DeleteListModal = () => {
) )
} }
} }
const confirmEditModal = () => {
if(confirmEditModalVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={confirmEditModalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setConfirmEditModalVisible(!confirmEditModalVisible);
}}>
<View
style={{
height:'100%',
width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center',
alignItems:'center'
}}>
<TouchableOpacity
style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress={() => setConfirmEditModalVisible(false)}
/>
<View
style={
styles.centeredView
}>
<View
style={
styles.deleteModalView
}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold',
marginBottom:20
}}>
Cancel this list update?
</Text>
<Text
style={{
fontSize:15,
color:'black',
fontWeight:'500'
}}>
Are you sure?
</Text>
<View
style={{
flexDirection:'row',
margin:20,
}}>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={() => setConfirmEditModalVisible(false)}
>
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{
fontSize:20,
color:'black',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
NO
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={()=>{setConfirmEditModalVisible(false), setEditModalVisible(false)}}
>
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'}}
>
<Text
style={{
fontSize:20,
color:'black',
}}>
YES
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
return ( return (
<SafeAreaView <SafeAreaView
style={{ style={{
...@@ -1166,7 +1301,7 @@ const DeleteListModal = () => { ...@@ -1166,7 +1301,7 @@ const DeleteListModal = () => {
backgroundColor:'pink', backgroundColor:'pink',
width:'100%' width:'100%'
}}> }}>
{empty ? emptyMessage(empty): {emptyList ? emptyMessage(emptyList):
<FlatList <FlatList
data={items} data={items}
ItemSeparatorComponent={listViewItemSeparator} ItemSeparatorComponent={listViewItemSeparator}
...@@ -1203,6 +1338,7 @@ const DeleteListModal = () => { ...@@ -1203,6 +1338,7 @@ const DeleteListModal = () => {
{AddListModal()} {AddListModal()}
{EditListModal()} {EditListModal()}
{DeleteListModal()} {DeleteListModal()}
{confirmEditModal()}
</SafeAreaView> </SafeAreaView>
); );
}; };
...@@ -1243,11 +1379,13 @@ const styles = StyleSheet.create({ ...@@ -1243,11 +1379,13 @@ const styles = StyleSheet.create({
height:75, height:75,
justifyContent:'center', justifyContent:'center',
alignItems:'center', alignItems:'center',
borderWidth:0.1,
borderColor:'#ffdae0',
borderRadius:5,
}, },
imageContainer:{ imageContainer:{
// borderRadius:10, // borderWidth:5,
// borderWidth:2,
// borderColor:'grey',
flexDirection:'row', flexDirection:'row',
// backgroundColor:'red', // backgroundColor:'red',
marginTop:11, marginTop:11,
...@@ -1355,11 +1493,11 @@ const styles = StyleSheet.create({ ...@@ -1355,11 +1493,11 @@ const styles = StyleSheet.create({
marginHorizontal:100, marginHorizontal:100,
backgroundColor:'pink', backgroundColor:'pink',
borderRadius:20, borderRadius:20,
padding:25, padding:10,
width:'80%', width:'80%',
height:200, height:200,
// justifyContent:'center', // justifyContent:'center',
alignItems:'center', // alignItems:'center',
shadowColor:'#000', shadowColor:'#000',
shadowOffset:{ shadowOffset:{
width:0, width:0,
......
yarn.lock
View file @ a6d6ebfa
...@@ -5542,6 +5542,13 @@ react-native-image-picker@^4.10.3: ...@@ -5542,6 +5542,13 @@ react-native-image-picker@^4.10.3:
resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.10.3.tgz#cdc11d9836b4cfa57e658c0700201babf8fdca10" resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.10.3.tgz#cdc11d9836b4cfa57e658c0700201babf8fdca10"
integrity sha512-gLX8J6jCBkUt6jogpSdA7YyaGVLGYywRzMEwBciXshihpFZjc/cRlKymAVlu6Q7HMw0j3vrho6pI8ZGC5O/FGg== integrity sha512-gLX8J6jCBkUt6jogpSdA7YyaGVLGYywRzMEwBciXshihpFZjc/cRlKymAVlu6Q7HMw0j3vrho6pI8ZGC5O/FGg==
react-native-input-spinner@^1.7.12:
version "1.7.12"
resolved "https://registry.yarnpkg.com/react-native-input-spinner/-/react-native-input-spinner-1.7.12.tgz#a6640a0c591a209d508816f04bb71e30db514a54"
integrity sha512-U6Cprz8TocsBjbk2fXeaQs5wuHnJCrbIlVbSgL/5FF9X5Mpzp/xcTyqF4I/fUL0z5uZrVceAmEJ2pWBcAJPtew==
dependencies:
prop-types "^15.7.2"
react-native-numeric-input@^1.9.1: react-native-numeric-input@^1.9.1:
version "1.9.1" version "1.9.1"
resolved "https://registry.yarnpkg.com/react-native-numeric-input/-/react-native-numeric-input-1.9.1.tgz#eff20699a51ecce6cbd1e3682f68dad981d84e35" resolved "https://registry.yarnpkg.com/react-native-numeric-input/-/react-native-numeric-input-1.9.1.tgz#eff20699a51ecce6cbd1e3682f68dad981d84e35"
......
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