Skip to content

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

Change modal to text input

parent dd72260d
Show whitespace changes
Inline Side-by-side
Showing with 538 additions and 243 deletions
screens/AddItemScreen/index.js
View file @ fa600511
...@@ -9,6 +9,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons'; ...@@ -9,6 +9,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen'; import ListScreen from '../ListScreen';
import ItemScreen from '../ItemScreen'; import ItemScreen from '../ItemScreen';
const plusbutton = require('../../images/plusbutton.png'); const plusbutton = require('../../images/plusbutton.png');
var db = openDatabase({ name: 'shoppinglist.db'});
// const editbutton = require('../../images/editbutton.png'); // const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png'); // const deletebutton = require ('../../images/deletebutton.png');
......
screens/ItemScreen/index.js
View file @ fa600511
...@@ -5,27 +5,255 @@ import InputSpinner from 'react-native-input-spinner'; ...@@ -5,27 +5,255 @@ 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';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen'; import AntDesign from 'react-native-vector-icons/AntDesign';
import AddItemScreen from '../AddItemScreen';
const plusbutton = require('../../images/plusbutton.png');
const tick = require('../../images/tick.png'); const tick = require('../../images/tick.png');
const oil = require('../../images/oil.png'); const oil = require('../../images/oil.png');
const cat = require('../../images/cat.jpg'); const cat = require('../../images/cat.jpg');
// const editbutton = require('../../images/editbutton.png'); const write = require('../../images/write.png');
// const deletebutton = require ('../../images/deletebutton.png'); var db = openDatabase({ name: 'shoppinglist.db'});
const ItemScreen = ({navigation}) => { const ItemScreen = ({navigation}) => {
const [addItemVisible, setAddItemVisible] = useState(false); const [addItemVisible, setAddItemVisible] = useState(false);
const [manageItemModalVisible, setManageItemModalVisible] = useState(false); const [manageItemModalVisible, setManageItemModalVisible] = useState(false);
const addItemModal = () => { const [deleteModalVisible, setDeleteModalVisible] = useState(false);
if(addItemVisible){ const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false);
const [items, setItems] = useState([]);
const [emptyList, setEmptyList] = useState([]);
const [updateProduct, setUpdateProduct] = useState ([]);
const [product, setProduct] = useState('');
const [pic, setPic] = useState('');
const [quantity, setQuantity] = useState('');
const [selectedId, setSelectedId] = useState ('');
const [text, setText] = useState ([]);
// const [onSubmit, setOnSubmit] = useState ('');
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name from sqlite_master WHERE type='table' AND name='item'",
[],
function (tx, res) {
console.log('item: ', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS item', []);
txn.executeSql(
'CREATE TABLE IF NOT EXISTS item(prodid INTEGER PRIMARY KEY AUTOINCREMENT, product VARCHAR(100), quantity INT(10), image LONGTEXT)',
[],
);
}
},
);
});
}, []);
// add into list
const insertItem = () => {
console.log(product, quantity, pic);
if (product == '') {
alert('Please enter item');
}
else{
// setAddModalVisible(false)
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO item (product, quantity, image) VALUES (?,?,?)',
[product, quantity, pic],
(tx, results) => {
console.log('Data insert : ', results.rowsAffected);
if (results.rowsAffected > 0) {
Alert.alert(
'Success!',
'Data inserted successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh()
setProduct(''), setQuantity(''), setPic('')
} else alert('Add list failed');
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
}
}
// view list
useEffect(() => {
onRefresh()
}, []);
// update list
const updateItem = () => {
console.log(selectedId, product, quantity, pic);
console.log(updateProduct.product, updateProduct.quantity, updateProduct.pic);
var p = ''
var q = ''
var i = ''
if (product == '' && updateProduct.product == ''){
alert('Please enter item');
}
// else if (quantity == 0 && updateItem.quantity == 0){
// alert('Please enter quantity');
// }
// else if (image == '' && updateItem.image == ''){
// alert('')
// }
else {
if(product == ''){
p = updateProduct.product
}
else{
p = product
}
console.log(p,q,i)
// setEditModalVisible(false)
// setManageListModalVisible(false)
db.transaction((tx) => {
tx.executeSql(
'UPDATE item set product = ?, quantity = ?, image = ? where prodid = ?',
[p, q, i, selectedId],
(tx, results) => {
console.log('Data update: ', JSON.stringify(results));
if (results.rowsAffected > 0) {
Alert.alert(
'Success!',
'Data updated successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh()
setProduct(''), setQuantity(''), setPic('')
} (error)=>{
console.log(JSON.stringify(error))
}
}
);
});
}
};
//delete list
const deleteItem = () => {
console.log('Delete item : ' + selectedId)
var temps = selectedId
// setDeleteModalVisible(false)
// setManageListModalVisible(false)
db.transaction((tx) => {
tx.executeSql(
'DELETE FROM item where prodid = ?',
[temps],
(tx, results) => {
console.log('Data deleted ', JSON.stringify(results));
if (results.rowsAffected > 0) {
Alert.alert(
'Success',
'List deleted successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh()
setProduct('')
}
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
}
const onRefresh = () => {
db.transaction((tx) => {
tx.executeSql(
'SELECT * FROM item',
[],
(tx, results) => {
var temps = [];
for (let i = 0; i < results.rows.length; ++i)
temps.push(results.rows.item(i));
setItems(temps);
if (results.rows.length >=1){
setEmptyList(false);
}else{
setEmptyList(true)
}
console.log('Item: '+ JSON.stringify(temps))
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
};
const emptyMessage = (status) => {
return(
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf:'center',
alignContent:'center',
flex: 1 ,
marginLeft:10,
marginRight:10,
flexDirection:'column'
}}>
<Image
style={{
width:150,
height:150
}}
source={write}
/>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-SemiBold',
color:'gray'
}}>
What do you need to buy?
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-Light',
color:'gray',
marginTop:10
}}>
Tap grey box to add your first item.
</Text>
</View>
);
}
const DeleteListModal = () => {
if(deleteModalVisible){
return( return(
<Modal <Modal
animationType='none' animationType="none"
transparent={true} transparent={true}
visible={addItemVisible} visible={deleteModalVisible}
onRequestClose={()=> { onRequestClose={() => {
setAddItemVisible(!addItemVisible) Alert.alert("Modal has been closed.");
setDeleteModalVisible(!deleteModalVisible);
}}> }}>
<View <View
style={{ style={{
...@@ -43,101 +271,43 @@ const ItemScreen = ({navigation}) => { ...@@ -43,101 +271,43 @@ const ItemScreen = ({navigation}) => {
top:0, top:0,
flex:1 flex:1
}} }}
onPress ={()=> setAddItemVisible(false)} onPress={() => setDeleteModalVisible(false)}
/> />
<View <View
style={{ style={
backgroundColor:'white', styles.centeredView
width:"80%", }>
height:300, <View
justifyContent:'flex-start', style={
// position:'absolute', styles.deleteModalView
// bottom:0, }>
borderRadius:20,
}}>
<Text <Text
style={{ style={{
fontFamily:'Poppins-SemiBold',
fontSize:20, fontSize:20,
color:'black', color:'black',
alignSelf:'center', fontFamily:'Poppins-SemiBold',
marginTop:20 marginBottom:20,
}}> }}>
Add item Delete this shopping list?
</Text> </Text>
<View style={{ <Text
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={{ style={{
width:275, fontSize:18,
height:60, color:'black',
backgroundColor:'#ededed', fontFamily:'Poppins-Regular'
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'flex-start',
borderRadius:9,
// elevation:7,
marginTop:20,
marginHorizontal:19,
}}> }}>
<InputSpinner Are you sure?
// value={quantity} </Text>
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 <View
style={{ style={{
flexDirection:'row', flexDirection:'row',
margin:25, margin:20,
marginTop:30, justifyContent:'flex-start',
justifyContent:'space-between',
marginBottom:40,
}}> }}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:5 marginHorizontal:5}}
}} onPress={() => {setDeleteModalVisible(false),setManageItemModalVisible(false)}}
onPress={() => {setConfirmEditModalVisible(true)}}
> >
<View <View
style={{ style={{
...@@ -147,7 +317,7 @@ const ItemScreen = ({navigation}) => { ...@@ -147,7 +317,7 @@ const ItemScreen = ({navigation}) => {
height:50, height:50,
alignItems:'center', alignItems:'center',
alignContent:'center', alignContent:'center',
justifyContent:'center' justifyContent:'center',
}}> }}>
<Text <Text
style={{ style={{
...@@ -158,16 +328,14 @@ const ItemScreen = ({navigation}) => { ...@@ -158,16 +328,14 @@ const ItemScreen = ({navigation}) => {
justifyContent:'center', justifyContent:'center',
fontFamily:'Poppins-Medium' fontFamily:'Poppins-Medium'
}}> }}>
CANCEL NO
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:5 marginHorizontal:5}}
}} onPress={deleteItem}
// onPress={() => navigation.navigate('ItemScreen')}
// onPress={updateList}
> >
<View <View
style={{ style={{
...@@ -177,26 +345,27 @@ const ItemScreen = ({navigation}) => { ...@@ -177,26 +345,27 @@ const ItemScreen = ({navigation}) => {
height:50, height:50,
alignItems:'center', alignItems:'center',
alignContent:'center', alignContent:'center',
justifyContent:'center', justifyContent:'center'}}
}}> >
<Text <Text
style={{ style={{
fontSize:20, fontSize:20,
color:'white', color:'white',
fontFamily:'Poppins-Medium' fontFamily:'Poppins-Medium'
}}> }}>
ADD YES
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View>
</View> </View>
</View> </View>
</Modal> </Modal>
) )
} }
} }
const ManageItemModal = () => { const ManageItemModal = () => {
if(manageItemModalVisible){ if(manageItemModalVisible){
return( return(
...@@ -276,7 +445,7 @@ const ItemScreen = ({navigation}) => { ...@@ -276,7 +445,7 @@ const ItemScreen = ({navigation}) => {
flexDirection:'row', flexDirection:'row',
marginTop:20, marginTop:20,
}} }}
// onPress={()=>setDeleteModalVisible(true)} onPress={()=>setDeleteModalVisible(true)}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="delete" name="delete"
...@@ -302,7 +471,138 @@ const ItemScreen = ({navigation}) => { ...@@ -302,7 +471,138 @@ const ItemScreen = ({navigation}) => {
) )
} }
} }
const confirmEditModal = () => {
if(confirmEditModalVisible){
return( 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(0,0,0,.5)',
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',
fontFamily:'Poppins-SemiBold',
marginBottom:20
}}>
Cancel this list update?
</Text>
<Text
style={{
fontSize:18,
color:'black',
fontFamily:'Poppins-Regular'
}}>
Are you sure?
</Text>
<View
style={{
flexDirection:'row',
margin:20,
}}>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={() => setConfirmEditModalVisible(false)}
>
<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'
}}>
NO
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={()=>{setConfirmEditModalVisible(false), setManageListModalVisible(false), setEditModalVisible(false)}}
>
<View
style={{
backgroundColor:'#0077eb',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'}}
>
<Text
style={{
fontSize:20,
color:'white',
}}>
YES
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
const listItemSeparator = () =>{
return (
<View style={{
// height: 0.1,
// width: '100%',
// backgroundColor: 'white'
}}/>
);
};
const ItemView = (item) => (
<View <View
style={ style={
styles.container styles.container
...@@ -315,11 +615,11 @@ const ItemScreen = ({navigation}) => { ...@@ -315,11 +615,11 @@ const ItemScreen = ({navigation}) => {
style={ style={
styles.checkContainer styles.checkContainer
}> }>
<Ionicons {/* <Ionicons
name="checkmark" name="checkmark"
color="dodgerblue" color="dodgerblue"
size={20} size={20}
/> /> */}
</TouchableOpacity> </TouchableOpacity>
<Text <Text
style={[ style={[
...@@ -328,7 +628,7 @@ const ItemScreen = ({navigation}) => { ...@@ -328,7 +628,7 @@ const ItemScreen = ({navigation}) => {
width:'55%' width:'55%'
} }
]}> ]}>
Sunflower oil {item.product}
</Text> </Text>
<Text <Text
style={[ style={[
...@@ -337,7 +637,7 @@ const ItemScreen = ({navigation}) => { ...@@ -337,7 +637,7 @@ const ItemScreen = ({navigation}) => {
width:'7%', width:'7%',
} }
]}> ]}>
10 {item.quantity}
</Text> </Text>
<TouchableOpacity <TouchableOpacity
style={ style={
...@@ -349,7 +649,7 @@ const ItemScreen = ({navigation}) => { ...@@ -349,7 +649,7 @@ const ItemScreen = ({navigation}) => {
height:50, height:50,
borderRadius:100 borderRadius:100
}} }}
source={oil} source={cat}
/> />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
...@@ -367,15 +667,80 @@ const ItemScreen = ({navigation}) => { ...@@ -367,15 +667,80 @@ const ItemScreen = ({navigation}) => {
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<TouchableOpacity style={{backgroundColor:'red', width:50, height:50, borderRadius:100}} </View>
// onPress={() => navigation.navigate('AddItemScreen')} )
onPress={() => setAddItemVisible(true)} // const handleSubmit = event => {
// console.log('handleSubmit ran');
// event.preventDefault(); // 👈️ prevent page refresh
></TouchableOpacity> // // 👇️ clear all input values in the form
{addItemModal()} // setProduct('');
{ManageItemModal()} // };
// const submitClear = () => {
// setText([product])
// setProduct(' ')
// }
return(
<SafeAreaView
style={{
flex:1,
width:'100%'
}}>
<View
style={{
flex:1,
backgroundColor:"white",
}}>
{emptyList ? emptyMessage(emptyList):
<FlatList
data={items}
ItemSeparatorComponent={listItemSeparator}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => ItemView(item)}
/>
}
<View style={{
backgroundColor:'#ededed',
flexDirection:'row',
width:'100%',
height:60,
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:10,
fontFamily:'Poppins-SemiBold',
width:'100%',
}}
placeholder="Add new item"
placeholderTextColor="grey"
onChangeText={(product) => setProduct(product)}
returnKeyType="done"
onSubmitEditing={insertItem}
/>
<TouchableOpacity
style={{
right:60,
top:15
}}
// onPress={()=>{setProduct(product)}}
onPress={insertItem}
>
<AntDesign
name="pluscircle"
color='grey'
size={30}
/>
</TouchableOpacity>
</View> </View>
); </View>
{ManageItemModal()}
{confirmEditModal()}
{DeleteListModal()}
</SafeAreaView>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
...@@ -383,6 +748,12 @@ const styles = StyleSheet.create({ ...@@ -383,6 +748,12 @@ const styles = StyleSheet.create({
backgroundColor:'white', backgroundColor:'white',
flex:1, flex:1,
}, },
centeredView:{
flex:1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
itemCard:{ itemCard:{
backgroundColor:'white', backgroundColor:'white',
width:'100%', width:'100%',
...@@ -420,5 +791,24 @@ const styles = StyleSheet.create({ ...@@ -420,5 +791,24 @@ const styles = StyleSheet.create({
alignContent:'center', alignContent:'center',
marginTop:5, marginTop:5,
}, },
deleteModalView:{
position:'absolute',
marginHorizontal:100,
backgroundColor:'white',
borderRadius:20,
padding:25,
width:'80%',
height:200,
// justifyContent:'center',
alignItems:'center',
shadowColor:'#000',
shadowOffset:{
width:0,
height:2
},
shadowOpacity:0.25,
shadowRadius:4,
elevation:5
},
}); });
export default ItemScreen; export default ItemScreen;
\ No newline at end of file
screens/ListScreen/index.js
View file @ fa600511
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, AsyncStorage} 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 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';
import AntDesign from 'react-native-vector-icons/AntDesign';
import ItemScreen from '../ItemScreen';
import AddItemScreen from '../AddItemScreen';
const write = require('../../images/write.png'); 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');
...@@ -47,25 +42,38 @@ const ListScreen = ({navigation}) => { ...@@ -47,25 +42,38 @@ 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)',
[],
);
}
},
);
});
}, []);
// useEffect(() => {
// db.transaction(function (txn) {
// txn.executeSql(
// "SELECT name from sqlite_master WHERE type='table' AND name='item'",
// [],
// function (tx, res) {
// console.log('item: ', res.rows.length);
// if (res.rows.length == 0) {
// txn.executeSql('DROP TABLE IF EXISTS item', []);
// txn.executeSql(
// 'CREATE TABLE IF NOT EXISTS item(id INTEGER PRIMARY KEY AUTOINCREMENT, product VARCHAR(100), quantity INT(10), image LONGTEXT)',
// [],
// );
// }
// },
// );
// });
// }, []);
// const init = async () => {
// const promise = new Promise((resolve, reject) => {
// db.transaction(async (tx) => {
// await tx.executeSql(
// 'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100));')
// await tx.executeSql(
// 'CREATE TABLE IF NOT EXISTS item(id INTEGER PRIMARY KEY AUTOINCREMENT, product VARCHAR(100), quantity INT(10), image LONGTEXT);')
// resolve();
// })
// })
// return promise
// }
// add into list // add into list
...@@ -328,111 +336,6 @@ const listItemView = ( item ) => ( ...@@ -328,111 +336,6 @@ const listItemView = ( item ) => (
</View> </View>
) )
const AddImage = () => {
if(addImageVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={addImageVisible}
onRequestClose={() =>{
Alert.alert("Modal has been closed.");
setAddImageVisible(!addImageVisible);
}}>
<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 = {()=>{setAddImageVisible(false)}}>
</TouchableOpacity>
<View
style={styles.centeredView}>
<View
style={styles.centeredView}>
<View
style={styles.addImageView}>
<TouchableOpacity
style={{
justifyContent:'flex-start'
}}
onPress={()=>setAddImageVisible(false)}
>
<MaterialCommunityIcons
name="close-circle"
size={30}
color='white'
/>
</TouchableOpacity>
<View
style={{
alignItems:'center',
marginTop:1
}}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold',
justifyContent:'center'
}}>
Add image
</Text>
<TouchableOpacity
onPress={() => {openCamera()}}
>
<View
style={{
marginTop:25
}}>
<Text
style={{
fontSize:15,
color:'black',
}}>
Take photo
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => openGallery()}
>
<View
style={{
marginTop:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Add from gallery
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
const ManageListModal = () => { const ManageListModal = () => {
if(manageListModalVisible){ if(manageListModalVisible){
return( return(
...@@ -621,7 +524,8 @@ const listItemView = ( item ) => ( ...@@ -621,7 +524,8 @@ const listItemView = ( item ) => (
placeholder="New List" placeholder="New List"
placeholderTextColor="grey" placeholderTextColor="grey"
onChangeText={(name) => setName(name)} onChangeText={(name) => setName(name)}
returnKeyType="done"
onSubmitEditing={insertList}
/> />
</View> </View>
</View> </View>
...@@ -1155,7 +1059,6 @@ const confirmEditModal = () => { ...@@ -1155,7 +1059,6 @@ const confirmEditModal = () => {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{AddImage()}
{AddListModal()} {AddListModal()}
{EditListModal()} {EditListModal()}
{DeleteListModal()} {DeleteListModal()}
......
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