Skip to content

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

Change app icon

parent 2db00341
Hide whitespace changes
Inline Side-by-side
Showing with 410 additions and 279 deletions
screens/AddItemScreen/index.js
View file @ dd72260d
...@@ -12,8 +12,109 @@ const plusbutton = require('../../images/plusbutton.png'); ...@@ -12,8 +12,109 @@ 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 AddItemScreen = ({navigation}) => { const AddItemScreen = ({navigation}) => {
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 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 openCamera = () => {
requestCameraPermission()
const options={
storageOption : {
path:'images',
mediaType:'photo',
},
includeBase64: true,
};
launchCamera(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 {
console.log('Response else = ', response);
const source = response.assets[0].uri
console.log(source)
// setImage(source);
// setImageUri(source);
// setAddImageVisible(false);
}
});
};
const openGallery = () => {
requestExternalWritePermission()
const options={
storageOption : {
path:'images',
mediaType:'photo',
},
includeBase64: true,
};
launchImageLibrary(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 {
const source = response.assets[0].uri
console.log(source)
// setImage(source);
// setImageUri(source);
// setAddImageVisible(false);
}
});
};
const [addImageModalVisible, setAddImageModalVisible] = useState(false); const [addImageModalVisible, setAddImageModalVisible] = useState(false);
const AddImageModal = () => { const AddImageModal = () => {
if(addImageModalVisible){ if(addImageModalVisible){
...@@ -30,7 +131,7 @@ const AddItemScreen = ({navigation}) => { ...@@ -30,7 +131,7 @@ const AddItemScreen = ({navigation}) => {
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -295,7 +396,7 @@ const styles = StyleSheet.create({ ...@@ -295,7 +396,7 @@ const styles = StyleSheet.create({
marginTop:50, marginTop:50,
}, },
textItem:{ textItem:{
fontFamily:'Poppins-SemiBold', fontFamily:'Poppins-Regular',
fontSize:20, fontSize:20,
color:'black', color:'black',
marginHorizontal:20, marginHorizontal:20,
......
screens/ItemScreen/index.js
View file @ dd72260d
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, button} from 'react-native'; import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform, button} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage'; import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner'; import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
...@@ -17,6 +16,7 @@ const cat = require('../../images/cat.jpg'); ...@@ -17,6 +16,7 @@ const cat = require('../../images/cat.jpg');
const ItemScreen = ({navigation}) => { const ItemScreen = ({navigation}) => {
const [addItemVisible, setAddItemVisible] = useState(false); const [addItemVisible, setAddItemVisible] = useState(false);
const [manageItemModalVisible, setManageItemModalVisible] = useState(false);
const addItemModal = () => { const addItemModal = () => {
if(addItemVisible){ if(addItemVisible){
return( return(
...@@ -31,7 +31,7 @@ const ItemScreen = ({navigation}) => { ...@@ -31,7 +31,7 @@ const ItemScreen = ({navigation}) => {
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -46,14 +46,194 @@ const ItemScreen = ({navigation}) => { ...@@ -46,14 +46,194 @@ const ItemScreen = ({navigation}) => {
onPress ={()=> setAddItemVisible(false)} onPress ={()=> setAddItemVisible(false)}
/> />
<View <View
style={{
backgroundColor:'white',
width:"80%",
height:300,
justifyContent:'flex-start',
// position:'absolute',
// bottom:0,
borderRadius:20,
}}>
<Text
style={{
fontFamily:'Poppins-SemiBold',
fontSize:20,
color:'black',
alignSelf:'center',
marginTop:20
}}>
Add item
</Text>
<View style={{
backgroundColor:'#ededed',
borderRadius:9,
width:275,
height:60,
marginHorizontal:19,
marginTop:15,
justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
}}>
<TextInput style={{
fontSize:20,
marginHorizontal:5,
fontFamily:'Poppins-SemiBold',
alignItems:'center',
textAlignVertical:'top',
width:'100%'
}}
placeholder="Add item"
placeholderTextColor="grey"
// onChangeText={(name) => setName(name)}
/>
</View>
<View
style={{
width:275,
height:60,
backgroundColor:'#ededed',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'flex-start',
borderRadius:9,
// elevation:7,
marginTop:20,
marginHorizontal:19,
}}>
<InputSpinner
// value={quantity}
min={0}
max={100}
step={1}
// onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
rounded
// showBorder skin='default'
textColor='black'
fontSize={20}
fontFamily="Poppins-Regular"
colorMin='white'
colorMax='white'
buttonTextColor='dodgerblue'
colorPress="dodgerblue"
color='white'
width={200}
height={50}
/>
</View>
<View
style={{
flexDirection:'row',
margin:25,
marginTop:30,
justifyContent:'space-between',
marginBottom:40,
}}>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={() => {setConfirmEditModalVisible(true)}}
>
<View
style={{
backgroundColor:'#c60000',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{
fontSize:20,
color:'white',
alignItems:'center',
alignContent:'center',
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
CANCEL
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5
}}
// onPress={() => navigation.navigate('ItemScreen')}
// onPress={updateList}
>
<View
style={{
backgroundColor:'#0077eb',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center',
}}>
<Text
style={{
fontSize:20,
color:'white',
fontFamily:'Poppins-Medium'
}}>
ADD
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
)
}
}
const ManageItemModal = () => {
if(manageItemModalVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={manageItemModalVisible}
onRequestClose={()=> {
// Alert.alert("Modal has been closed.");
setManageItemModalVisible(!manageItemModalVisible);
}}>
<View
style={{
height:'100%',
width:'100%',
backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center',
alignItems:'center'
}}>
<TouchableOpacity
style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress={() => setManageItemModalVisible(false)}
/>
<View
style={{backgroundColor:'white', style={{backgroundColor:'white',
width:"90%", width:"100%",
height:300, height:200,
justifyContent:'flex-start', justifyContent:'flex-start',
// position:'absolute', position:'absolute',
// bottom:0, bottom:0,
borderRadius:20, borderRadius:15,}}>
}}>
<Text <Text
style={{ style={{
fontFamily:'Poppins-SemiBold', fontFamily:'Poppins-SemiBold',
...@@ -62,7 +242,7 @@ const ItemScreen = ({navigation}) => { ...@@ -62,7 +242,7 @@ const ItemScreen = ({navigation}) => {
alignSelf:'center', alignSelf:'center',
marginTop:20 marginTop:20
}}> }}>
Photo Manage item
</Text> </Text>
<TouchableOpacity <TouchableOpacity
style={{ style={{
...@@ -70,10 +250,10 @@ const ItemScreen = ({navigation}) => { ...@@ -70,10 +250,10 @@ const ItemScreen = ({navigation}) => {
flexDirection:'row', flexDirection:'row',
marginTop:20, marginTop:20,
}} }}
onPress={()=> setEditModalVisible(true)} onPress={() => navigation.navigate('AddItemScreen')}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="camera" name="pencil"
size={30} size={30}
color="#838383" color="#838383"
/> />
...@@ -96,7 +276,7 @@ const ItemScreen = ({navigation}) => { ...@@ -96,7 +276,7 @@ const ItemScreen = ({navigation}) => {
flexDirection:'row', flexDirection:'row',
marginTop:20, marginTop:20,
}} }}
onPress={()=>setDeleteModalVisible(true)} // onPress={()=>setDeleteModalVisible(true)}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="delete" name="delete"
...@@ -178,7 +358,8 @@ const ItemScreen = ({navigation}) => { ...@@ -178,7 +358,8 @@ const ItemScreen = ({navigation}) => {
alignItems:'center', alignItems:'center',
alignContent:'center', alignContent:'center',
right:2, right:2,
}}> }}
onPress={() => setManageItemModalVisible(true)}>
<MaterialIcons <MaterialIcons
name="more-vert" name="more-vert"
color="grey" color="grey"
...@@ -192,6 +373,7 @@ const ItemScreen = ({navigation}) => { ...@@ -192,6 +373,7 @@ const ItemScreen = ({navigation}) => {
></TouchableOpacity> ></TouchableOpacity>
{addItemModal()} {addItemModal()}
{ManageItemModal()}
</View> </View>
); );
}; };
......
screens/ListScreen/index.js
View file @ dd72260d
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, button} from 'react-native'; import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform, Button, AsyncStorage} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage'; import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner'; import InputSpinner from 'react-native-input-spinner';
...@@ -8,6 +8,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; ...@@ -8,6 +8,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import AntDesign from 'react-native-vector-icons/AntDesign'; import AntDesign from 'react-native-vector-icons/AntDesign';
import ItemScreen from '../ItemScreen'; import ItemScreen from '../ItemScreen';
import AddItemScreen from '../AddItemScreen'; import AddItemScreen from '../AddItemScreen';
const write = require('../../images/write.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');
...@@ -20,15 +21,11 @@ const ListScreen = ({navigation}) => { ...@@ -20,15 +21,11 @@ const ListScreen = ({navigation}) => {
const [deleteModalVisible, setDeleteModalVisible] = useState(false); const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [manageListModalVisible, setManageListModalVisible] = useState(false); const [manageListModalVisible, setManageListModalVisible] = useState(false);
const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false); const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false);
const [id, setId] = useState ('');
const [name, setName] = useState(''); const [name, setName] = useState('');
const [quantity, setQuantity] = useState(0);
const [image, setImage] = useState('');
const [updateItem, setUpdateItem] = useState ([]); const [updateItem, setUpdateItem] = useState ([]);
const [items, setItems] = useState ([]); const [items, setItems] = useState ([]);
const [emptyList, setEmptyList] = useState ([]); const [emptyList, setEmptyList] = useState ([]);
const [selectedId, setSelectedId] = useState (''); const [selectedId, setSelectedId] = useState ('');
const [imageUri, setImageUri]= useState('');
// create table // create table
useEffect(() => { useEffect(() => {
...@@ -37,12 +34,12 @@ const ListScreen = ({navigation}) => { ...@@ -37,12 +34,12 @@ const ListScreen = ({navigation}) => {
"SELECT name from sqlite_master WHERE type='table' AND name='list'", "SELECT name from sqlite_master WHERE type='table' AND name='list'",
[], [],
function (tx, res) { function (tx, res) {
console.log('item:', res.rows.length); console.log('item: ', res.rows.length);
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), image LONGTEXT)', 'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100))',
[], [],
); );
} }
}, },
...@@ -50,34 +47,55 @@ const ListScreen = ({navigation}) => { ...@@ -50,34 +47,55 @@ const ListScreen = ({navigation}) => {
}); });
}, []); }, []);
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name from sqlite_master WHERE type='table' AND name='product'",
[],
function (tx, res) {
console.log('item: ', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS product', []);
txn.executeSql(
'CREATE TABLE IF NOT EXISTS product(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100), quantity INT(10), image LONGTEXT)',
[],
);
}
},
);
});
}, []);
// add into list // add into list
const insertList = () => { const insertList = () => {
console.log(name, quantity, imageUri); console.log(name);
if (name == '') { if (name == '') {
alert('Please enter name'); alert('Please enter list');
// return;
} }
// else if (quantity == 0){
// alert('Please enter quantity');
// }
// else if (imageUri == ''){
// alert('Please insert photo');
// }
else{ else{
setAddModalVisible(false) setAddModalVisible(false)
db.transaction(function (tx) { db.transaction(function (tx) {
tx.executeSql( tx.executeSql(
'INSERT INTO list (name, quantity, image) VALUES (?,?,?)', 'INSERT INTO list (name) VALUES (?)',
[name, quantity, imageUri], [name],
(tx, results) => { (tx, results) => {
console.log('Data insert :', results.rowsAffected); console.log('Data insert : ', results.rowsAffected);
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
Alert.alert( Alert.alert(
'Success!', 'Success!',
'Data inserted successfully', 'Data inserted successfully.',
); [
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh() onRefresh()
setName(''), setQuantity(0), setImageUri('') setName('')
} else alert('Add list failed'); } else alert('Add list failed');
},(error)=>{ },(error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
...@@ -94,20 +112,18 @@ useEffect(() => { ...@@ -94,20 +112,18 @@ useEffect(() => {
// update list // update list
const updateList = () => { const updateList = () => {
console.log(selectedId, name, quantity, image); console.log(selectedId, name);
console.log(updateItem.name, updateItem.quantity, updateItem.image); console.log(updateItem.name);
var n = '' var n = ''
var q = 0
var i = ''
if (name == '' && updateItem.name == ''){ if (name == '' && updateItem.name == ''){
alert('Please enter name'); alert('Please enter name');
} }
else if (quantity == 0 && updateItem.quantity == 0){ // else if (quantity == 0 && updateItem.quantity == 0){
alert('Please enter quantity'); // alert('Please enter quantity');
} // }
else if (image == '' && updateItem.image == ''){ // else if (image == '' && updateItem.image == ''){
alert('') // alert('')
} // }
else { else {
if(name == ''){ if(name == ''){
n = updateItem.name n = updateItem.name
...@@ -115,25 +131,13 @@ const updateList = () => { ...@@ -115,25 +131,13 @@ const updateList = () => {
else{ else{
n = name n = name
} }
if(quantity == 0){ console.log(n)
q = updateItem.quantity
}
else{
q = quantity
}
if(image == ''){
i = updateItem.image
}
else{
i = image
}
console.log(n,q,i)
setEditModalVisible(false) setEditModalVisible(false)
setManageListModalVisible(false) setManageListModalVisible(false)
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql( tx.executeSql(
'UPDATE list set name = ?, quantity = ?, image = ? where id = ?', 'UPDATE list set name = ? where id = ?',
[n, q, i, selectedId], [n, selectedId],
(tx, results) => { (tx, results) => {
console.log('Data update: ', JSON.stringify(results)); console.log('Data update: ', JSON.stringify(results));
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
...@@ -149,7 +153,7 @@ const updateList = () => { ...@@ -149,7 +153,7 @@ const updateList = () => {
{ cancelable: false } { cancelable: false }
); );
onRefresh() onRefresh()
setName(''), setQuantity(0), setImage('') setName('')
} (error)=>{ } (error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
} }
...@@ -161,7 +165,7 @@ const updateList = () => { ...@@ -161,7 +165,7 @@ const updateList = () => {
//delete list //delete list
const deleteList = () => { const deleteList = () => {
console.log('Delete item ' + selectedId) console.log('Delete item : ' + selectedId)
var temp = selectedId var temp = selectedId
setDeleteModalVisible(false) setDeleteModalVisible(false)
setManageListModalVisible(false) setManageListModalVisible(false)
...@@ -184,7 +188,7 @@ const deleteList = () => { ...@@ -184,7 +188,7 @@ const deleteList = () => {
{ cancelable: false } { cancelable: false }
); );
onRefresh() onRefresh()
setName(''), setQuantity(0), setImage('') setName('')
} }
},(error)=>{ },(error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
...@@ -232,11 +236,20 @@ const emptyMessage = (status) => { ...@@ -232,11 +236,20 @@ const emptyMessage = (status) => {
style={{ style={{
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
alignSelf:'center',
alignContent:'center',
flex: 1 , flex: 1 ,
marginLeft:10, marginLeft:10,
marginRight:10, marginRight:10,
flexDirection:'column' flexDirection:'column'
}}> }}>
<Image
style={{
width:150,
height:150
}}
source={write}
/>
<Text <Text
style={{ style={{
fontSize: 20, fontSize: 20,
...@@ -260,129 +273,23 @@ const emptyMessage = (status) => { ...@@ -260,129 +273,23 @@ const emptyMessage = (status) => {
); );
} }
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 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 openCamera = () => {
requestCameraPermission()
const options={
storageOption : {
path:'images',
mediaType:'photo',
},
includeBase64: true,
};
launchCamera(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 {
console.log('Response else = ', response);
const source = response.assets[0].uri
console.log(source)
setImage(source);
setImageUri(source);
setAddImageVisible(false);
}
});
};
const openGallery = () => {
requestExternalWritePermission()
const options={
storageOption : {
path:'images',
mediaType:'photo',
},
includeBase64: true,
};
launchImageLibrary(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 {
const source = response.assets[0].uri
console.log(source)
setImage(source);
setImageUri(source);
setAddImageVisible(false);
}
});
};
const listItemView = ( item ) => ( const listItemView = ( item ) => (
<View <View
style = { style = {
styles.outerContainer styles.outerContainer
}> }>
<View <TouchableOpacity
style = { style = {
styles.listCard styles.listCard
}> }
onPress={() => navigation.navigate('ItemScreen')}
>
<View <View
style={{ style={{
flexDirection:'row' flexDirection:'row'
}}> }}>
<View <View
style = {styles.imageContainer}> style = {styles.imageContainer}>
{/* <Image
style = {[styles.imageSize,{}]}
source={{uri : item.image}}
/> */}
<View <View
style={{ style={{
flexDirection:'row', flexDirection:'row',
...@@ -400,55 +307,24 @@ const listItemView = ( item ) => ( ...@@ -400,55 +307,24 @@ const listItemView = ( item ) => (
style={{ style={{
flexDirection:'row' flexDirection:'row'
}}> }}>
</View> </View>
{/* <Text
style={[
styles.textName,
{}
]}>
Quantity: {item.quantity}
</Text> */}
</View> </View>
<TouchableOpacity style={{marginHorizontal:150, width:'50%'}} onPress={()=>setManageListModalVisible(true)}> <TouchableOpacity
<MaterialIcons style={{
name="more-vert" marginHorizontal:150,
color="grey" width:'50%'
size={30} }}
/> onPress={()=>{setManageListModalVisible(true), setUpdateItem(item), setSelectedId(item.id)}}
</TouchableOpacity> >
<View> <MaterialIcons
{/* <Text>Test : {item.quantity}</Text> */} name="more-vert"
</View> color="grey"
{/* <TouchableOpacity size={30}
style={[ />
styles.editDeleteContainer, </TouchableOpacity>
{}
]}
onPress = {()=>{setEditModalVisible(true), setUpdateItem(item), setSelectedId(item.id), setImage(item.image)}}
>
<MaterialCommunityIcons
name="square-edit-outline"
size={30}
color='white'
/>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.editDeleteContainer,
{marginHorizontal:10,}
]}
onPress = {()=>{setDeleteModalVisible(true), setSelectedId(item.id)}}
>
<MaterialCommunityIcons
name="delete"
size={30}
color='white'
/>
</TouchableOpacity> */}
</View> </View>
</View> </View>
</View> </TouchableOpacity>
</View> </View>
) )
...@@ -467,7 +343,7 @@ const listItemView = ( item ) => ( ...@@ -467,7 +343,7 @@ const listItemView = ( item ) => (
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -572,7 +448,7 @@ const listItemView = ( item ) => ( ...@@ -572,7 +448,7 @@ const listItemView = ( item ) => (
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -602,7 +478,7 @@ const listItemView = ( item ) => ( ...@@ -602,7 +478,7 @@ const listItemView = ( item ) => (
alignSelf:'center', alignSelf:'center',
marginTop:20 marginTop:20
}}> }}>
Photo Manage list
</Text> </Text>
<TouchableOpacity <TouchableOpacity
style={{ style={{
...@@ -610,10 +486,10 @@ const listItemView = ( item ) => ( ...@@ -610,10 +486,10 @@ const listItemView = ( item ) => (
flexDirection:'row', flexDirection:'row',
marginTop:20, marginTop:20,
}} }}
onPress={()=> setEditModalVisible(true)} onPress={()=> {setEditModalVisible(true)}}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="camera" name="pencil"
size={30} size={30}
color="#838383" color="#838383"
/> />
...@@ -636,7 +512,7 @@ const listItemView = ( item ) => ( ...@@ -636,7 +512,7 @@ const listItemView = ( item ) => (
flexDirection:'row', flexDirection:'row',
marginTop:20, marginTop:20,
}} }}
onPress={()=>setDeleteModalVisible(true)} onPress={()=>{setDeleteModalVisible(true)}}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="delete" name="delete"
...@@ -680,7 +556,7 @@ const listItemView = ( item ) => ( ...@@ -680,7 +556,7 @@ const listItemView = ( item ) => (
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -695,17 +571,18 @@ const listItemView = ( item ) => ( ...@@ -695,17 +571,18 @@ const listItemView = ( item ) => (
}} }}
onPress={() => setAddModalVisible(false)} onPress={() => setAddModalVisible(false)}
/> />
<View style={styles.addModalView}> <View style={styles.modalView}>
<View <View
style={{ style={{
alignItems:'center', alignItems:'center',
marginTop:35, // marginTop:35,
}}> }}>
<Text <Text
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'black',
fontFamily:'Poppins-Regular' fontFamily:'Poppins-SemiBold',
marginTop:20,
}}> }}>
Create new list Create new list
</Text> </Text>
...@@ -721,9 +598,9 @@ const listItemView = ( item ) => ( ...@@ -721,9 +598,9 @@ const listItemView = ( item ) => (
backgroundColor:'#ededed', backgroundColor:'#ededed',
borderRadius:9, borderRadius:9,
width:275, width:275,
height:50, height:60,
marginHorizontal:19, marginHorizontal:19,
marginTop:10, marginTop:15,
// elevation:8, // elevation:8,
// borderWidth:0.2, // borderWidth:0.2,
// borderColor:'white', // borderColor:'white',
...@@ -789,8 +666,7 @@ const listItemView = ( item ) => ( ...@@ -789,8 +666,7 @@ const listItemView = ( item ) => (
style={{ style={{
marginHorizontal:5 marginHorizontal:5
}} }}
onPress={() => navigation.navigate('ItemScreen')} onPress={insertList}
// onPress={insertList}
> >
<View <View
style={{ style={{
...@@ -836,7 +712,7 @@ const EditListModal = () => { ...@@ -836,7 +712,7 @@ const EditListModal = () => {
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -851,7 +727,7 @@ const EditListModal = () => { ...@@ -851,7 +727,7 @@ const EditListModal = () => {
}} }}
onPress={() => setEditModalVisible(false)} onPress={() => setEditModalVisible(false)}
/> />
<View style={styles.addModalView}> <View style={styles.modalView}>
<View <View
style={{ style={{
alignItems:'center', alignItems:'center',
...@@ -894,7 +770,7 @@ const EditListModal = () => { ...@@ -894,7 +770,7 @@ const EditListModal = () => {
textAlignVertical:'top', textAlignVertical:'top',
width:'100%' width:'100%'
}} }}
placeholder="Rename List" placeholder={updateItem.name}
placeholderTextColor="grey" placeholderTextColor="grey"
onChangeText={(name) => setName(name)} onChangeText={(name) => setName(name)}
...@@ -943,7 +819,7 @@ const EditListModal = () => { ...@@ -943,7 +819,7 @@ const EditListModal = () => {
marginHorizontal:5 marginHorizontal:5
}} }}
// onPress={() => navigation.navigate('ItemScreen')} // onPress={() => navigation.navigate('ItemScreen')}
// onPress={updateList} onPress={updateList}
> >
<View <View
style={{ style={{
...@@ -988,7 +864,7 @@ const DeleteListModal = () => { ...@@ -988,7 +864,7 @@ const DeleteListModal = () => {
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -1110,7 +986,7 @@ const confirmEditModal = () => { ...@@ -1110,7 +986,7 @@ const confirmEditModal = () => {
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
...@@ -1185,7 +1061,7 @@ const confirmEditModal = () => { ...@@ -1185,7 +1061,7 @@ const confirmEditModal = () => {
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:5}} marginHorizontal:5}}
onPress={()=>{setConfirmEditModalVisible(false), setEditModalVisible(false), setManageListModalVisible(false)}} onPress={()=>{setConfirmEditModalVisible(false), setManageListModalVisible(false), setEditModalVisible(false)}}
> >
<View <View
style={{ style={{
...@@ -1213,7 +1089,6 @@ const confirmEditModal = () => { ...@@ -1213,7 +1089,6 @@ const confirmEditModal = () => {
</Modal> </Modal>
) )
} }
} }
return ( return (
<SafeAreaView <SafeAreaView
...@@ -1232,7 +1107,7 @@ const confirmEditModal = () => { ...@@ -1232,7 +1107,7 @@ const confirmEditModal = () => {
data={items} data={items}
ItemSeparatorComponent={listViewItemSeparator} ItemSeparatorComponent={listViewItemSeparator}
keyExtractor={(item,index) => index.toString()} keyExtractor={(item,index) => index.toString()}
renderItem={({item}) => listItemView(item)} renderItem={({ item }) => listItemView(item)}
/> />
} }
<TouchableOpacity <TouchableOpacity
...@@ -1268,7 +1143,7 @@ const confirmEditModal = () => { ...@@ -1268,7 +1143,7 @@ const confirmEditModal = () => {
/> />
<Text <Text
style={{ style={{
fontFamily:'Poppins-Regular', fontFamily:'Poppins-SemiBold',
fontSize:18, fontSize:18,
color:'white', color:'white',
alignSelf:'center', alignSelf:'center',
...@@ -1383,41 +1258,14 @@ const styles = StyleSheet.create({ ...@@ -1383,41 +1258,14 @@ const styles = StyleSheet.create({
marginTop: 22, marginTop: 22,
// backgroundColor:'white', // backgroundColor:'white',
}, },
addModalView:{ modalView:{
position:'absolute',
marginHorizontal:100,
backgroundColor:'white', backgroundColor:'white',
borderRadius:20, width:"80%",
// padding:25,
width:'80%',
height:300, height:300,
// justifyContent:'center', justifyContent:'flex-start',
// alignItems:'center', // position:'absolute',
shadowOffset:{ // bottom:0,
width:0,
height:2
},
shadowOpacity:0.25,
shadowRadius:4,
elevation:5
},
editModalView:{
position:'absolute',
marginHorizontal:100,
backgroundColor:'pink',
borderRadius:20, borderRadius:20,
padding:25,
width:'80%',
height:450,
// justifyContent:'center',
// alignItems:'center',
shadowOffset:{
width:0,
height:2
},
shadowOpacity:0.25,
shadowRadius:4,
elevation:5
}, },
deleteModalView:{ deleteModalView:{
position:'absolute', position:'absolute',
......
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