Skip to content

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

Change all fonts in the apps

parent a6d6ebfa
Hide whitespace changes
Inline Side-by-side
Showing with 760 additions and 574 deletions
App.js
View file @ 4aa41b36
...@@ -3,6 +3,8 @@ import { View, Text, TouchableOpacity, SafeAreaView, ScrollView, StyleSheet, Ima ...@@ -3,6 +3,8 @@ import { View, Text, TouchableOpacity, SafeAreaView, ScrollView, StyleSheet, Ima
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ListScreen from './screens/ListScreen'; import ListScreen from './screens/ListScreen';
import ItemScreen from './screens/ItemScreen';
import AddItemScreen from './screens/AddItemScreen';
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const meal = require('./images/breakfast.png'); const meal = require('./images/breakfast.png');
...@@ -14,13 +16,44 @@ const App = () => { ...@@ -14,13 +16,44 @@ const App = () => {
name="ListScreen" name="ListScreen"
component={ListScreen} component={ListScreen}
options={{ options={{
title: 'Shopping List', title: 'Shopping Lists',
headerStyle: { headerStyle: {
backgroundColor: '#ffc0cb', backgroundColor: 'white',
}, },
headerTintColor: 'grey', headerTintColor: 'black',
headerTitleStyle: { headerTitleStyle: {
fontWeight: 'normal', fontWeight: 'normal',
fontFamily: 'Poppins-SemiBold'
},
}}
/>
<Stack.Screen
name="ItemScreen"
component={ItemScreen}
options={{
title: 'List name',
headerStyle: {
backgroundColor: 'white',
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'normal',
fontFamily: 'Poppins-SemiBold'
},
}}
/>
<Stack.Screen
name="AddItemScreen"
component={AddItemScreen}
options={{
title: 'List name',
headerStyle: {
backgroundColor: 'white',
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'normal',
fontFamily: 'Poppins-SemiBold'
}, },
}} }}
/> />
......
react-native.config.js 0 → 100644
View file @ 4aa41b36
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
};
\ No newline at end of file
screens/AddItemScreen/index.js 0 → 100644
View file @ 4aa41b36
import React, { useEffect, useState } from 'react';
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 {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ListScreen from '../ListScreen';
import ItemScreen from '../ItemScreen';
const plusbutton = require('../../images/plusbutton.png');
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');
const AddItemScreen = ({navigation}) => {
return(
<View
style={{
flex:1,
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'center',
flexDirection:'column'
}}>
<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 + button to start adding products
</Text>
<TouchableOpacity
style={{
// backgroundColor:'red',
elevation:7,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
position:'absolute',
borderRadius:100,
right:24,
bottom:24
}}
// onPress={() =>
// setAddModalVisible(true)
// }
>
<View
style={{
backgroundColor: '#0077eb',
width:130,
height: 50,
flexDirection:'row',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
borderRadius:100
}}>
<MaterialCommunityIcons
name="plus"
size={25}
color='white'
/>
<Text
style={{
fontFamily:'Poppins-Regular',
fontSize:18,
color:'white',
alignSelf:'center',
marginTop:5,
marginHorizontal:5
}}>
ADD ITEM
</Text>
</View>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
itemCard:{
},
});
export default AddItemScreen;
\ No newline at end of file
screens/ItemScreen/index.js 0 → 100644
View file @ 4aa41b36
import React, { useEffect, useState } from 'react';
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 {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ListScreen from '../ListScreen';
import AddItemScreen from '../AddItemScreen';
const plusbutton = require('../../images/plusbutton.png');
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');
const ItemScreen = ({navigation}) => {
return(
<View
style={{
flex:1,
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'center',
flexDirection:'column'
}}>
<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 + button to start adding products
</Text>
<TouchableOpacity
style={{
// backgroundColor:'red',
elevation:7,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
position:'absolute',
borderRadius:100,
right:24,
bottom:24
}}
// onPress={() =>
// setAddModalVisible(true)
// }
>
<View
style={{
backgroundColor: '#0077eb',
width:130,
height: 50,
flexDirection:'row',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
borderRadius:100
}}>
<MaterialCommunityIcons
name="plus"
size={25}
color='white'
/>
<Text
style={{
fontFamily:'Poppins-Regular',
fontSize:18,
color:'white',
alignSelf:'center',
marginTop:5,
marginHorizontal:5
}}>
ADD ITEM
</Text>
</View>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
itemCard:{
},
});
export default ItemScreen;
\ No newline at end of file
screens/ListScreen/index.js
View file @ 4aa41b36
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, button} 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 {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';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
var db = openDatabase({ name: 'shoppinglist.db'}); import AntDesign from 'react-native-vector-icons/AntDesign';
const meal = require('../../images/breakfast.png'); import ItemScreen from '../ItemScreen';
import AddItemScreen from '../AddItemScreen';
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');
var db = openDatabase({ name: 'shoppinglist.db'});
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 [manageListModalVisible, setManageListModalVisible] = useState(false);
const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false); const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false);
const [id, setId] = useState (''); const [id, setId] = useState ('');
const [name, setName] = useState(''); const [name, setName] = useState('');
...@@ -26,8 +29,6 @@ const ListScreen = ({navigation}) => { ...@@ -26,8 +29,6 @@ const ListScreen = ({navigation}) => {
const [emptyList, setEmptyList] = useState ([]); const [emptyList, setEmptyList] = useState ([]);
const [selectedId, setSelectedId] = useState (''); const [selectedId, setSelectedId] = useState ('');
const [imageUri, setImageUri]= useState(''); const [imageUri, setImageUri]= useState('');
// const [imageUriGallery, setImageUriGallery]=useState('');
// create table // create table
useEffect(() => { useEffect(() => {
...@@ -51,29 +52,32 @@ const ListScreen = ({navigation}) => { ...@@ -51,29 +52,32 @@ const ListScreen = ({navigation}) => {
// add into list // add into list
const insertList = () => { const insertList = () => {
console.log(name, quantity); console.log(name, quantity, imageUri);
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');
} // }
// 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, quantity, image) VALUES (?,?,?)',
[name, quantity, image], [name, quantity, imageUri],
(tx, results) => { (tx, results) => {
console.log('Results', 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',
); );
onRefresh() onRefresh()
setName(''), setQuantity(0), setImage('') setName(''), setQuantity(0), setImageUri('')
} else alert('Add list failed'); } else alert('Add list failed');
},(error)=>{ },(error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
...@@ -88,7 +92,6 @@ useEffect(() => { ...@@ -88,7 +92,6 @@ useEffect(() => {
onRefresh() onRefresh()
}, []); }, []);
// update list // update list
const updateList = () => { const updateList = () => {
console.log(selectedId, name, quantity, image); console.log(selectedId, name, quantity, image);
...@@ -126,12 +129,13 @@ const updateList = () => { ...@@ -126,12 +129,13 @@ const updateList = () => {
} }
console.log(n,q,i) console.log(n,q,i)
setEditModalVisible(false) setEditModalVisible(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 = ?, quantity = ?, image = ? where id = ?',
[n, q, i, selectedId], [n, q, i, selectedId],
(tx, results) => { (tx, results) => {
console.log('Results', JSON.stringify(results)); console.log('Data update: ', JSON.stringify(results));
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
Alert.alert( Alert.alert(
'Success!', 'Success!',
...@@ -160,12 +164,13 @@ const deleteList = () => { ...@@ -160,12 +164,13 @@ const deleteList = () => {
console.log('Delete item ' + selectedId) console.log('Delete item ' + selectedId)
var temp = selectedId var temp = selectedId
setDeleteModalVisible(false) setDeleteModalVisible(false)
setManageListModalVisible(false)
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql( tx.executeSql(
'DELETE FROM list where id = ?', 'DELETE FROM list where id = ?',
[temp], [temp],
(tx, results) => { (tx, results) => {
console.log('Results', JSON.stringify(results)); console.log('Data deleted ', JSON.stringify(results));
if (results.rowsAffected > 0) { if (results.rowsAffected > 0) {
Alert.alert( Alert.alert(
'Success', 'Success',
...@@ -179,7 +184,7 @@ const deleteList = () => { ...@@ -179,7 +184,7 @@ const deleteList = () => {
{ cancelable: false } { cancelable: false }
); );
onRefresh() onRefresh()
setName(''), setQuantity(0) setName(''), setQuantity(0), setImage('')
} }
},(error)=>{ },(error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
...@@ -203,7 +208,7 @@ const onRefresh = () => { ...@@ -203,7 +208,7 @@ const onRefresh = () => {
}else{ }else{
setEmptyList(true) setEmptyList(true)
} }
console.log(JSON.stringify(temp)) console.log('Item: '+ JSON.stringify(temp))
},(error)=>{ },(error)=>{
console.log(JSON.stringify(error)) console.log(JSON.stringify(error))
} }
...@@ -214,9 +219,9 @@ const onRefresh = () => { ...@@ -214,9 +219,9 @@ const onRefresh = () => {
const listViewItemSeparator = () =>{ const listViewItemSeparator = () =>{
return ( return (
<View style={{ <View style={{
height: 0.1, // height: 0.1,
width: '100%', // width: '100%',
backgroundColor: 'pink' // backgroundColor: 'white'
}}/> }}/>
); );
}; };
...@@ -229,14 +234,27 @@ const emptyMessage = (status) => { ...@@ -229,14 +234,27 @@ const emptyMessage = (status) => {
alignItems: 'center', alignItems: 'center',
flex: 1 , flex: 1 ,
marginLeft:10, marginLeft:10,
marginRight:10 marginRight:10,
flexDirection:'column'
}}> }}>
<Text <Text
style={{ style={{
fontSize: 20, fontSize: 20,
textAlign: 'center' textAlign: 'center',
fontFamily:'Poppins-SemiBold',
color:'gray'
}}> }}>
No record in shopping list. Tap + to add a new list. Let's plan your shopping!
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-Light',
color:'gray',
marginTop:10
}}>
Tap + button to create your first list
</Text> </Text>
</View> </View>
); );
...@@ -287,6 +305,7 @@ const requestExternalWritePermission = async () => { ...@@ -287,6 +305,7 @@ const requestExternalWritePermission = async () => {
}; };
const openCamera = () => { const openCamera = () => {
requestCameraPermission()
const options={ const options={
storageOption : { storageOption : {
path:'images', path:'images',
...@@ -305,14 +324,18 @@ const openCamera = () => { ...@@ -305,14 +324,18 @@ const openCamera = () => {
console.log('User tapped custom button: ', response.customButton); console.log('User tapped custom button: ', response.customButton);
alert(response.customButton); alert(response.customButton);
} else { } else {
console.log('Response else = ', response);
const source = response.assets[0].uri const source = response.assets[0].uri
console.log(source) console.log(source)
setImage(source);
setImageUri(source); setImageUri(source);
setAddImageVisible(false);
} }
}); });
}; };
const openGallery = () => { const openGallery = () => {
requestExternalWritePermission()
const options={ const options={
storageOption : { storageOption : {
path:'images', path:'images',
...@@ -333,7 +356,9 @@ const openGallery = () => { ...@@ -333,7 +356,9 @@ const openGallery = () => {
} else { } else {
const source = response.assets[0].uri const source = response.assets[0].uri
console.log(source) console.log(source)
setImage(source);
setImageUri(source); setImageUri(source);
setAddImageVisible(false);
} }
}); });
}; };
...@@ -354,47 +379,52 @@ const listItemView = ( item ) => ( ...@@ -354,47 +379,52 @@ const listItemView = ( item ) => (
}}> }}>
<View <View
style = {styles.imageContainer}> style = {styles.imageContainer}>
<Image {/* <Image
style = {[styles.imageSize,{}]} style = {[styles.imageSize,{}]}
// source={imageUri} source={{uri : item.image}}
/> /> */}
<View <View
style={{ style={{
flexDirection:'column', flexDirection:'row',
marginHorizontal:10, marginHorizontal:10,
width:'200%' width:'200%'
}}> }}>
{/* <View <Text
style={{ style={[
backgroundColor:'white'}} styles.textName,
key={item.id}> {marginTop:1}
</View> */} ]}>
<Text {item.name}
style={[ </Text>
styles.textName, <View
{marginTop:13} style={{
]}> flexDirection:'row'
{item.name} }}>
</Text> </View>
<View {/* <Text
style={{ style={[
flexDirection:'row' styles.textName,
}}> {}
</View> ]}>
<Text Quantity: {item.quantity}
style={[ </Text> */}
styles.textName,
{}
]}>
Quantity: {item.quantity}
</Text>
</View> </View>
<TouchableOpacity <TouchableOpacity style={{marginHorizontal:150, width:'50%'}} onPress={()=>setManageListModalVisible(true)}>
<MaterialIcons
name="more-vert"
color="grey"
size={30}
/>
</TouchableOpacity>
<View>
{/* <Text>Test : {item.quantity}</Text> */}
</View>
{/* <TouchableOpacity
style={[ style={[
styles.editDeleteContainer, styles.editDeleteContainer,
{} {}
]} ]}
onPress = {()=>{setEditModalVisible(true), setUpdateItem(item), setSelectedId(item.id)}} onPress = {()=>{setEditModalVisible(true), setUpdateItem(item), setSelectedId(item.id), setImage(item.image)}}
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name="square-edit-outline" name="square-edit-outline"
...@@ -414,7 +444,8 @@ const listItemView = ( item ) => ( ...@@ -414,7 +444,8 @@ const listItemView = ( item ) => (
size={30} size={30}
color='white' color='white'
/> />
</TouchableOpacity> </TouchableOpacity> */}
</View> </View>
</View> </View>
</View> </View>
...@@ -526,294 +557,109 @@ const listItemView = ( item ) => ( ...@@ -526,294 +557,109 @@ const listItemView = ( item ) => (
} }
} }
const AddListModal = () => { const ManageListModal = () => {
if(manageListModalVisible){
console.log("Results "+ imageUri)
var img = imageUri != null && imageUri != undefined && imageUri!='' ? {uri:imageUri} : ''
if(addModalVisible){
return( return(
<Modal <Modal
animationType="none" animationType="none"
transparent={true} transparent={true}
visible={addModalVisible} visible={manageListModalVisible}
onRequestClose={() => { onRequestClose={()=> {
Alert.alert("Modal has been closed."); // Alert.alert("Modal has been closed.");
setAddModalVisible(!addModalVisible); setManageListModalVisible(!manageListModalVisible);
}}> }}>
<View <View
style={{ style={{
height:'100%', height:'100%',
width:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)', // backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center'
}}> }}>
<TouchableOpacity
<TouchableOpacity style={{
style={{ height:'100%',
height:'100%',
width:'100%', width:'100%',
position:'absolute', position:'absolute',
top:0, top:0,
flex:1 flex:1
}} }}
onPress={() => setAddModalVisible(false)} onPress={() => setManageListModalVisible(false)}
/> />
<View
<View style={styles.addModalView}> style={[styles.manageModalView,{}]}>
<View <TouchableOpacity
style={{ style={{
alignItems:'center', flexDirection:'row',
marginTop:20, marginTop:15,
}}> justifyContent:'center',
<Text // width:'100%',
style={{ // height:'5%',
fontSize:20, // marginHorizontal:50,
color:'black', }}
fontWeight:'bold' onPress={()=>setEditModalVisible(true)}>
}}> <MaterialCommunityIcons
Add new list name="pencil"
</Text> size={28}
</View> color='grey'
/>
<View <Text
style={{ style={{
flexDirection:'row', fontSize:20,
marginTop:20 fontFamily:'Poppins-Regular',
}}> color:'black',
<View style={{ textAlignVertical:'center',
justifyContent:'flex-start', marginHorizontal:25,
marginVertical:15 }}>
}}> Rename
<Text </Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flexDirection:'row',
marginTop:20,
justifyContent:'center',
marginRight:10
// width:'100%',
// height:'5%',
// marginHorizontal:10
}}
onPress={()=>setDeleteModalVisible(true)}>
<MaterialCommunityIcons
name="delete"
size={28}
color='#c60000'
/>
<Text
style={{ style={{
fontSize:15, fontSize:20,
color:'black' fontFamily:'Poppins-Regular',
}}>Name</Text> color:'#c60000',
</View> marginHorizontal:25,
<View }}>
style={{ Delete
backgroundColor:'transparent', </Text>
borderRadius:7, </TouchableOpacity>
borderColor:'white', </View>
borderWidth:3,
width:210,
height:50,
marginHorizontal:19
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:5
}}
onChangeText={(name) => setName(name)}
// onSelectionChange={}
/>
</View>
</View>
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:19
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Quantity
</Text>
</View>
<View
style={{
marginHorizontal:10,
marginTop:5
}}>
<InputSpinner
value={quantity}
min={0}
max={10}
step={1}
onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
rounded
// showBorder skin='default'
textColor='black'
fontSize={20}
colorMin='white'
colorMax='white'
buttonTextColor='#ed81a1'
colorPress="#ed81a1"
color='white'
width={200}
height={50}
/>
</View>
</View>
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:8
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Image
</Text>
</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
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:90,
height:90,
marginHorizontal:17,
alignItems:'center',
justifyContent:'center'
}}
onPress ={() =>setAddImageVisible(true)}
>
<MaterialCommunityIcons
name="image-plus"
size={30}
color="#ebebeb"
/>
</TouchableOpacity>
}
</View>
<View
style={{
flexDirection:'row',
margin:25,
marginTop:25
}}>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={() => setAddModalVisible(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'
}}>
CANCEL
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={insertList}>
<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',
}}>
SAVE
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View> </View>
</Modal> </Modal>
) )
}
} }
}
const EditListModal = () => { const AddListModal = () => {
if(editModalVisible){ // console.log("Results "+ imageUri)
return( // var img = imageUri != null && imageUri != undefined && imageUri != '' ? {uri:imageUri} : ''
<Modal if(addModalVisible){
return(
<Modal
animationType="none" animationType="none"
transparent={true} transparent={true}
visible={editModalVisible} visible={addModalVisible}
onRequestClose={() => { onRequestClose={() => {
Alert.alert("Modal has been closed."); Alert.alert("Modal has been closed.");
setEditModalVisible(!editModalVisible); setAddModalVisible(!addModalVisible);
}}> }}>
<View <View
style={{ style={{
...@@ -832,213 +678,274 @@ const EditListModal = () => { ...@@ -832,213 +678,274 @@ const EditListModal = () => {
top:0, top:0,
flex:1 flex:1
}} }}
onPress={() => setEditModalVisible(false)} onPress={() => setAddModalVisible(false)}
/> />
<View style={styles.editModalView}> <View style={styles.addModalView}>
<View <View
style={{ style={{
alignItems:'center', alignItems:'center',
marginTop:20, marginTop:35,
}}>
<Text
style={{
fontSize:20,
color:'black',
fontFamily:'Poppins-Regular'
}}> }}>
<Text Create new list
style={{ </Text>
fontSize:20, </View>
color:'black',
fontWeight:'bold'
}}>
Update list
</Text>
</View>
<View <View
style={{ style={{
flexDirection:'row', flexDirection:'row',
marginTop:20 marginTop:20
}}> }}>
<View style={{ <View
justifyContent:'flex-start', style={{
marginVertical:15 backgroundColor:'white',
}}> borderRadius:7,
<Text width:275,
style={{ height:50,
fontSize:15, marginHorizontal:19,
color:'black' marginTop:10,
}}>Name</Text> elevation:8,
</View> borderWidth:0.2,
<View borderColor:'white',
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:210,
height:50,
marginHorizontal:19
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:5
}}
onChangeText={(name) => setName(name)}
placeholderTextColor='black'
placeholder={updateItem.name}
/>
</View>
</View>
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Quantity
</Text>
</View>
<View
style={{
marginHorizontal:10,
marginTop:5
}}>
<InputSpinner
value={updateItem.quantity}
mine={0}
max={10}
step={1}
onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
rounded
// showBorder skin='square'
textColor='black'
fontSize={20}
colorMin='white'
colorMax='white'
buttonTextColor='#ed81a1'
colorPress="#ed81a1"
color='white'
width={200}
height={50}
/> }}>
</View> <TextInput
</View> style={{
<View fontSize:20,
marginHorizontal:5,
fontFamily:'Poppins-Bold',
alignItems:'center',
textAlignVertical:'top',
}}
placeholder="New List"
placeholderTextColor="grey"
onChangeText={(name) => setName(name)}
/>
</View>
</View>
<View
style={{
flexDirection:'row',
margin:25,
marginTop:45,
justifyContent:'space-between',
marginBottom:40
}}>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={() => setAddModalVisible(false)}
>
<View
style={{
backgroundColor:'#c60000',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{ style={{
flexDirection:'row', fontSize:20,
marginTop:20 color:'white',
alignItems:'center',
alignContent:'center',
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}> }}>
<View CANCEL
style={{ </Text>
justifyContent:'flex-start', </View>
marginVertical:8 </TouchableOpacity>
}}> <TouchableOpacity
<Text style={{
style={{ marginHorizontal:5
fontSize:15, }}
color:'black' onPress={() => navigation.navigate('ItemScreen')}
}}> // onPress={insertList}
Image >
</Text> <View
</View>
<TouchableOpacity
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:90,
height:90,
marginHorizontal:17,
alignItems:'center',
justifyContent:'center'
}}
onPress ={() =>setAddImageVisible(true)}>
<Image
// source={meal}
style={{
width:30,
height:30}}
/>
<Image
// source={{uri: filePath.uri}}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection:'row',
margin:25,
marginTop:25
}}>
<TouchableOpacity
style={{ style={{
marginHorizontal:5 backgroundColor:'#0077eb',
}} borderRadius:7,
onPress={() => setConfirmEditModalVisible(true)}> width:100,
<View height:50,
style={{ alignItems:'center',
backgroundColor:'transparent', alignContent:'center',
borderRadius:7, justifyContent:'center',
borderColor:'white', }}>
borderWidth:3, <Text
width:100, style={{
height:50, fontSize:20,
alignItems:'center', color:'white',
alignContent:'center', fontFamily:'Poppins-Medium'
justifyContent:'center' }}>
}}> CREATE
<Text </Text>
style={{ </View>
fontSize:20, </TouchableOpacity>
color:'black', </View>
alignItems:'center', </View>
alignContent:'center',
justifyContent:'center'
}}>
CANCEL
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={updateList}
>
<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',
}}>
SAVE
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View> </View>
</Modal> </Modal>
)
}
}
const EditListModal = () => {
// console.log("Results " + image)
if(editModalVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={editModalVisible}
onRequestClose={() => {
// Alert.alert("Modal has been closed.");
setEditModalVisible(!editModalVisible);
}}>
<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={() => setEditModalVisible(false)}
/>
<View style={styles.addModalView}>
<View
style={{
alignItems:'center',
marginTop:35,
}}>
<Text
style={{
fontSize:20,
color:'black',
fontFamily:'Poppins-Regular'
}}>
Rename list
</Text>
</View>
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View
style={{
backgroundColor:'white',
borderRadius:7,
width:275,
height:50,
marginHorizontal:19,
marginTop:10,
elevation:7,
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:5,
fontFamily:'Poppins-Bold',
alignItems:'center',
textAlignVertical:'top',
}}
// placeholder="New List"
placeholderTextColor="grey"
onChangeText={(name) => setName(name)}
/>
</View>
</View>
<View
style={{
flexDirection:'row',
margin:25,
marginTop:45,
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'
}}>
SAVE
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
) )
} }
} }
...@@ -1084,16 +991,16 @@ const DeleteListModal = () => { ...@@ -1084,16 +991,16 @@ const DeleteListModal = () => {
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'black',
fontWeight:'bold', fontFamily:'Poppins-SemiBold',
marginBottom:20 marginBottom:20,
}}> }}>
Delete this shopping list? Delete this shopping list?
</Text> </Text>
<Text <Text
style={{ style={{
fontSize:15, fontSize:18,
color:'black', color:'black',
fontWeight:'500' fontFamily:'Poppins-Regular'
}}> }}>
Are you sure? Are you sure?
</Text> </Text>
...@@ -1101,31 +1008,31 @@ const DeleteListModal = () => { ...@@ -1101,31 +1008,31 @@ const DeleteListModal = () => {
style={{ style={{
flexDirection:'row', flexDirection:'row',
margin:20, margin:20,
justifyContent:'flex-start',
}}> }}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:5}} marginHorizontal:5}}
onPress={() => setDeleteModalVisible(false)} onPress={() => {setDeleteModalVisible(false),setManageListModalVisible(false)}}
> >
<View <View
style={{ style={{
backgroundColor:'transparent', backgroundColor:'#c60000',
borderRadius:7, borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100, width:100,
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:'black', color:'white',
alignItems:'center', alignItems:'center',
alignContent:'center', alignContent:'center',
justifyContent:'center' justifyContent:'center',
fontFamily:'Poppins-Medium'
}}> }}>
NO NO
</Text> </Text>
...@@ -1138,10 +1045,8 @@ const DeleteListModal = () => { ...@@ -1138,10 +1045,8 @@ const DeleteListModal = () => {
> >
<View <View
style={{ style={{
backgroundColor:'transparent', backgroundColor:'#0077eb',
borderRadius:7, borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100, width:100,
height:50, height:50,
alignItems:'center', alignItems:'center',
...@@ -1151,7 +1056,8 @@ const DeleteListModal = () => { ...@@ -1151,7 +1056,8 @@ const DeleteListModal = () => {
<Text <Text
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'white',
fontFamily:'Poppins-Medium'
}}> }}>
YES YES
</Text> </Text>
...@@ -1174,7 +1080,7 @@ const confirmEditModal = () => { ...@@ -1174,7 +1080,7 @@ const confirmEditModal = () => {
transparent={true} transparent={true}
visible={confirmEditModalVisible} visible={confirmEditModalVisible}
onRequestClose={() => { onRequestClose={() => {
Alert.alert("Modal has been closed."); // Alert.alert("Modal has been closed.");
setConfirmEditModalVisible(!confirmEditModalVisible); setConfirmEditModalVisible(!confirmEditModalVisible);
}}> }}>
<View <View
...@@ -1207,16 +1113,16 @@ const confirmEditModal = () => { ...@@ -1207,16 +1113,16 @@ const confirmEditModal = () => {
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'black',
fontWeight:'bold', fontFamily:'Poppins-SemiBold',
marginBottom:20 marginBottom:20
}}> }}>
Cancel this list update? Cancel this list update?
</Text> </Text>
<Text <Text
style={{ style={{
fontSize:15, fontSize:18,
color:'black', color:'black',
fontWeight:'500' fontFamily:'Poppins-Regular'
}}> }}>
Are you sure? Are you sure?
</Text> </Text>
...@@ -1232,10 +1138,8 @@ const confirmEditModal = () => { ...@@ -1232,10 +1138,8 @@ const confirmEditModal = () => {
> >
<View <View
style={{ style={{
backgroundColor:'transparent', backgroundColor:'#c60000',
borderRadius:7, borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100, width:100,
height:50, height:50,
alignItems:'center', alignItems:'center',
...@@ -1245,10 +1149,11 @@ const confirmEditModal = () => { ...@@ -1245,10 +1149,11 @@ const confirmEditModal = () => {
<Text <Text
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'white',
alignItems:'center', alignItems:'center',
alignContent:'center', alignContent:'center',
justifyContent:'center' justifyContent:'center',
fontFamily:'Poppins-Medium'
}}> }}>
NO NO
</Text> </Text>
...@@ -1257,14 +1162,12 @@ const confirmEditModal = () => { ...@@ -1257,14 +1162,12 @@ const confirmEditModal = () => {
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:5}} marginHorizontal:5}}
onPress={()=>{setConfirmEditModalVisible(false), setEditModalVisible(false)}} onPress={()=>{setConfirmEditModalVisible(false), setEditModalVisible(false), setManageListModalVisible(false)}}
> >
<View <View
style={{ style={{
backgroundColor:'transparent', backgroundColor:'#0077eb',
borderRadius:7, borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100, width:100,
height:50, height:50,
alignItems:'center', alignItems:'center',
...@@ -1274,7 +1177,7 @@ const confirmEditModal = () => { ...@@ -1274,7 +1177,7 @@ const confirmEditModal = () => {
<Text <Text
style={{ style={{
fontSize:20, fontSize:20,
color:'black', color:'white',
}}> }}>
YES YES
</Text> </Text>
...@@ -1298,7 +1201,7 @@ const confirmEditModal = () => { ...@@ -1298,7 +1201,7 @@ const confirmEditModal = () => {
<View <View
style={{ style={{
flex:1, flex:1,
backgroundColor:'pink', backgroundColor:'white',
width:'100%' width:'100%'
}}> }}>
{emptyList ? emptyMessage(emptyList): {emptyList ? emptyMessage(emptyList):
...@@ -1311,7 +1214,7 @@ const confirmEditModal = () => { ...@@ -1311,7 +1214,7 @@ const confirmEditModal = () => {
} }
<TouchableOpacity <TouchableOpacity
style={{ style={{
backgroundColor:'#ffa7b5', // backgroundColor:'red',
elevation:7, elevation:7,
justifyContent:'center', justifyContent:'center',
alignItems:'center', alignItems:'center',
...@@ -1319,19 +1222,39 @@ const confirmEditModal = () => { ...@@ -1319,19 +1222,39 @@ const confirmEditModal = () => {
position:'absolute', position:'absolute',
borderRadius:100, borderRadius:100,
right:24, right:24,
bottom:24 bottom:20
}} }}
onPress={() => onPress={() =>
setAddModalVisible(true) setAddModalVisible(true)
}> }>
<Image <View
style={[ style={{
styles.addButton, backgroundColor: '#0077eb',
{elevation:8} width:130,
]} height: 50,
source={ flexDirection:'row',
plusbutton justifyContent:'center',
}/> alignContent:'center',
alignItems:'center',
borderRadius:100
}}>
<MaterialCommunityIcons
name="plus"
size={25}
color='white'
/>
<Text
style={{
fontFamily:'Poppins-Regular',
fontSize:18,
color:'white',
alignSelf:'center',
marginTop:5,
marginHorizontal:5
}}>
NEW LIST
</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{AddImage()} {AddImage()}
...@@ -1339,6 +1262,7 @@ const confirmEditModal = () => { ...@@ -1339,6 +1262,7 @@ const confirmEditModal = () => {
{EditListModal()} {EditListModal()}
{DeleteListModal()} {DeleteListModal()}
{confirmEditModal()} {confirmEditModal()}
{ManageListModal()}
</SafeAreaView> </SafeAreaView>
); );
}; };
...@@ -1347,24 +1271,24 @@ const styles = StyleSheet.create({ ...@@ -1347,24 +1271,24 @@ const styles = StyleSheet.create({
topContainer:{ topContainer:{
width:'100%', width:'100%',
height:80, height:80,
backgroundColor:'transparent', backgroundColor:'white',
}, },
outerContainer:{ outerContainer:{
width:'100%', width:'100%',
flex:1, flex:1,
backgroundColor:'#ffc0cb' backgroundColor:'white'
}, },
listCard:{ listCard:{
width:'95%', width:'95%',
height:100, height:100,
backgroundColor:'#ffdae0', backgroundColor:'white',
marginTop:10, marginTop:10,
// marginBottom:5, marginBottom:5,
marginHorizontal:10, marginHorizontal:10,
borderRadius:8, borderRadius:8,
elevation:0, elevation:5,
borderWidth:2, // borderWidth:2,
borderColor:'#ffdae0', borderColor:'white',
}, },
headerTitle:{ headerTitle:{
fontSize:29, fontSize:29,
...@@ -1397,9 +1321,12 @@ const styles = StyleSheet.create({ ...@@ -1397,9 +1321,12 @@ const styles = StyleSheet.create({
textName:{ textName:{
// flexDirection:'row', // flexDirection:'row',
// marginHorizontal:10, // marginHorizontal:10,
width:'100%', width:'200%',
// marginTop:10, // marginTop:10,
fontSize:20, fontSize:20,
fontFamily: 'Poppins-SemiBold',
color:'black'
}, },
// textQuantity:{ // textQuantity:{
// flexDirection:'row', // flexDirection:'row',
...@@ -1436,11 +1363,11 @@ const styles = StyleSheet.create({ ...@@ -1436,11 +1363,11 @@ const styles = StyleSheet.create({
addModalView:{ addModalView:{
position:'absolute', position:'absolute',
marginHorizontal:100, marginHorizontal:100,
backgroundColor:'pink', backgroundColor:'white',
borderRadius:20, borderRadius:20,
padding:25, // padding:25,
width:'80%', width:'80%',
height:450, height:300,
// justifyContent:'center', // justifyContent:'center',
// alignItems:'center', // alignItems:'center',
shadowOffset:{ shadowOffset:{
...@@ -1472,7 +1399,7 @@ const styles = StyleSheet.create({ ...@@ -1472,7 +1399,7 @@ const styles = StyleSheet.create({
deleteModalView:{ deleteModalView:{
position:'absolute', position:'absolute',
marginHorizontal:100, marginHorizontal:100,
backgroundColor:'pink', backgroundColor:'white',
borderRadius:20, borderRadius:20,
padding:25, padding:25,
width:'80%', width:'80%',
...@@ -1507,6 +1434,27 @@ const styles = StyleSheet.create({ ...@@ -1507,6 +1434,27 @@ const styles = StyleSheet.create({
shadowRadius:4, shadowRadius:4,
elevation:5 elevation:5
}, },
manageModalView:{
position:'absolute',
// marginHorizontal:100,
backgroundColor:'white',
borderRadius:7,
// padding:25,
width:'42%',
height:'13%',
justifyContent:'flex-start',
// flex:1,
// marginTop:'auto',
// justifyContent:'center',
// alignItems:'center',
shadowOffset:{
width:0,
height:2
},
shadowOpacity:0.25,
shadowRadius:4,
elevation:5
},
}); });
export default ListScreen; export default ListScreen;
\ No newline at end of file
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