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
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ListScreen from './screens/ListScreen';
import ItemScreen from './screens/ItemScreen';
import AddItemScreen from './screens/AddItemScreen';
const Stack = createNativeStackNavigator();
const meal = require('./images/breakfast.png');
......@@ -14,13 +16,44 @@ const App = () => {
name="ListScreen"
component={ListScreen}
options={{
title: 'Shopping List',
title: 'Shopping Lists',
headerStyle: {
backgroundColor: '#ffc0cb',
backgroundColor: 'white',
},
headerTintColor: 'grey',
headerTintColor: 'black',
headerTitleStyle: {
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 { 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 ImagePicker from 'react-native-image-picker';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
var db = openDatabase({ name: 'shoppinglist.db'});
const meal = require('../../images/breakfast.png');
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 plusbutton = require('../../images/plusbutton.png');
const editbutton = require('../../images/editbutton.png');
const deletebutton = require ('../../images/deletebutton.png');
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');
var db = openDatabase({ name: 'shoppinglist.db'});
const ListScreen = ({navigation}) => {
const [addImageVisible, setAddImageVisible] = useState(false);
const [addModalVisible, setAddModalVisible] = useState(false);
const [editModalVisible, setEditModalVisible] = useState(false);
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [manageListModalVisible, setManageListModalVisible] = useState(false);
const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false);
const [id, setId] = useState ('');
const [name, setName] = useState('');
......@@ -26,8 +29,6 @@ const ListScreen = ({navigation}) => {
const [emptyList, setEmptyList] = useState ([]);
const [selectedId, setSelectedId] = useState ('');
const [imageUri, setImageUri]= useState('');
// const [imageUriGallery, setImageUriGallery]=useState('');
// create table
useEffect(() => {
......@@ -51,29 +52,32 @@ const ListScreen = ({navigation}) => {
// add into list
const insertList = () => {
console.log(name, quantity);
console.log(name, quantity, imageUri);
if (name == '') {
alert('Please enter name');
// return;
}
else if (quantity == 0){
alert('Please enter quantity');
}
// else if (quantity == 0){
// alert('Please enter quantity');
// }
// else if (imageUri == ''){
// alert('Please insert photo');
// }
else{
setAddModalVisible(false)
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO list (name, quantity, image) VALUES (?,?,?)',
[name, quantity, image],
[name, quantity, imageUri],
(tx, results) => {
console.log('Results', results.rowsAffected);
console.log('Data insert :', results.rowsAffected);
if (results.rowsAffected > 0) {
Alert.alert(
'Success!',
'Data inserted successfully',
);
onRefresh()
setName(''), setQuantity(0), setImage('')
setName(''), setQuantity(0), setImageUri('')
} else alert('Add list failed');
},(error)=>{
console.log(JSON.stringify(error))
......@@ -88,7 +92,6 @@ useEffect(() => {
onRefresh()
}, []);
// update list
const updateList = () => {
console.log(selectedId, name, quantity, image);
......@@ -126,12 +129,13 @@ const updateList = () => {
}
console.log(n,q,i)
setEditModalVisible(false)
setManageListModalVisible(false)
db.transaction((tx) => {
tx.executeSql(
'UPDATE list set name = ?, quantity = ?, image = ? where id = ?',
[n, q, i, selectedId],
(tx, results) => {
console.log('Results', JSON.stringify(results));
console.log('Data update: ', JSON.stringify(results));
if (results.rowsAffected > 0) {
Alert.alert(
'Success!',
......@@ -160,12 +164,13 @@ const deleteList = () => {
console.log('Delete item ' + selectedId)
var temp = selectedId
setDeleteModalVisible(false)
setManageListModalVisible(false)
db.transaction((tx) => {
tx.executeSql(
'DELETE FROM list where id = ?',
[temp],
(tx, results) => {
console.log('Results', JSON.stringify(results));
console.log('Data deleted ', JSON.stringify(results));
if (results.rowsAffected > 0) {
Alert.alert(
'Success',
......@@ -179,7 +184,7 @@ const deleteList = () => {
{ cancelable: false }
);
onRefresh()
setName(''), setQuantity(0)
setName(''), setQuantity(0), setImage('')
}
},(error)=>{
console.log(JSON.stringify(error))
......@@ -203,7 +208,7 @@ const onRefresh = () => {
}else{
setEmptyList(true)
}
console.log(JSON.stringify(temp))
console.log('Item: '+ JSON.stringify(temp))
},(error)=>{
console.log(JSON.stringify(error))
}
......@@ -214,9 +219,9 @@ const onRefresh = () => {
const listViewItemSeparator = () =>{
return (
<View style={{
height: 0.1,
width: '100%',
backgroundColor: 'pink'
// height: 0.1,
// width: '100%',
// backgroundColor: 'white'
}}/>
);
};
......@@ -229,14 +234,27 @@ const emptyMessage = (status) => {
alignItems: 'center',
flex: 1 ,
marginLeft:10,
marginRight:10
marginRight:10,
flexDirection:'column'
}}>
<Text
style={{
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>
</View>
);
......@@ -287,6 +305,7 @@ const requestExternalWritePermission = async () => {
};
const openCamera = () => {
requestCameraPermission()
const options={
storageOption : {
path:'images',
......@@ -305,14 +324,18 @@ const openCamera = () => {
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',
......@@ -333,7 +356,9 @@ const openGallery = () => {
} else {
const source = response.assets[0].uri
console.log(source)
setImage(source);
setImageUri(source);
setAddImageVisible(false);
}
});
};
......@@ -354,47 +379,52 @@ const listItemView = ( item ) => (
}}>
<View
style = {styles.imageContainer}>
<Image
{/* <Image
style = {[styles.imageSize,{}]}
// source={imageUri}
/>
source={{uri : item.image}}
/> */}
<View
style={{
flexDirection:'column',
flexDirection:'row',
marginHorizontal:10,
width:'200%'
}}>
{/* <View
style={{
backgroundColor:'white'}}
key={item.id}>
</View> */}
<Text
style={[
styles.textName,
{marginTop:13}
]}>
{item.name}
</Text>
<View
style={{
flexDirection:'row'
}}>
</View>
<Text
style={[
styles.textName,
{}
]}>
Quantity: {item.quantity}
</Text>
<Text
style={[
styles.textName,
{marginTop:1}
]}>
{item.name}
</Text>
<View
style={{
flexDirection:'row'
}}>
</View>
{/* <Text
style={[
styles.textName,
{}
]}>
Quantity: {item.quantity}
</Text> */}
</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={[
styles.editDeleteContainer,
{}
]}
onPress = {()=>{setEditModalVisible(true), setUpdateItem(item), setSelectedId(item.id)}}
onPress = {()=>{setEditModalVisible(true), setUpdateItem(item), setSelectedId(item.id), setImage(item.image)}}
>
<MaterialCommunityIcons
name="square-edit-outline"
......@@ -414,7 +444,8 @@ const listItemView = ( item ) => (
size={30}
color='white'
/>
</TouchableOpacity>
</TouchableOpacity> */}
</View>
</View>
</View>
......@@ -526,294 +557,109 @@ const listItemView = ( item ) => (
}
}
const AddListModal = () => {
console.log("Results "+ imageUri)
var img = imageUri != null && imageUri != undefined && imageUri!='' ? {uri:imageUri} : ''
if(addModalVisible){
const ManageListModal = () => {
if(manageListModalVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={addModalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setAddModalVisible(!addModalVisible);
visible={manageListModalVisible}
onRequestClose={()=> {
// Alert.alert("Modal has been closed.");
setManageListModalVisible(!manageListModalVisible);
}}>
<View
style={{
style={{
height:'100%',
width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
// backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center',
alignItems:'center'
}}>
<TouchableOpacity
style={{
height:'100%',
<TouchableOpacity
style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress={() => setAddModalVisible(false)}
}}
onPress={() => setManageListModalVisible(false)}
/>
<View style={styles.addModalView}>
<View
style={{
alignItems:'center',
marginTop:20,
}}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold'
}}>
Add new list
</Text>
</View>
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View style={{
justifyContent:'flex-start',
marginVertical:15
}}>
<Text
<View
style={[styles.manageModalView,{}]}>
<TouchableOpacity
style={{
flexDirection:'row',
marginTop:15,
justifyContent:'center',
// width:'100%',
// height:'5%',
// marginHorizontal:50,
}}
onPress={()=>setEditModalVisible(true)}>
<MaterialCommunityIcons
name="pencil"
size={28}
color='grey'
/>
<Text
style={{
fontSize:20,
fontFamily:'Poppins-Regular',
color:'black',
textAlignVertical:'center',
marginHorizontal:25,
}}>
Rename
</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={{
fontSize:15,
color:'black'
}}>Name</Text>
</View>
<View
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)}
// 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>
fontSize:20,
fontFamily:'Poppins-Regular',
color:'#c60000',
marginHorizontal:25,
}}>
Delete
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
)
)
}
}
}
const EditListModal = () => {
if(editModalVisible){
return(
<Modal
const AddListModal = () => {
// console.log("Results "+ imageUri)
// var img = imageUri != null && imageUri != undefined && imageUri != '' ? {uri:imageUri} : ''
if(addModalVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={editModalVisible}
visible={addModalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setEditModalVisible(!editModalVisible);
setAddModalVisible(!addModalVisible);
}}>
<View
style={{
......@@ -832,213 +678,274 @@ const EditListModal = () => {
top:0,
flex:1
}}
onPress={() => setEditModalVisible(false)}
onPress={() => setAddModalVisible(false)}
/>
<View style={styles.editModalView}>
<View
style={{
alignItems:'center',
marginTop:20,
<View style={styles.addModalView}>
<View
style={{
alignItems:'center',
marginTop:35,
}}>
<Text
style={{
fontSize:20,
color:'black',
fontFamily:'Poppins-Regular'
}}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold'
}}>
Update list
</Text>
</View>
Create new list
</Text>
</View>
<View
style={{
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View style={{
justifyContent:'flex-start',
marginVertical:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>Name</Text>
</View>
<View
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
style={{
backgroundColor:'white',
borderRadius:7,
width:275,
height:50,
marginHorizontal:19,
marginTop:10,
elevation:8,
borderWidth:0.2,
borderColor:'white',
/>
</View>
</View>
<View
}}>
<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={() => setAddModalVisible(false)}
>
<View
style={{
backgroundColor:'#c60000',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{
flexDirection:'row',
marginTop:20
fontSize:20,
color:'white',
alignItems:'center',
alignContent:'center',
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:8
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Image
</Text>
</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
CANCEL
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={() => navigation.navigate('ItemScreen')}
// onPress={insertList}
>
<View
style={{
marginHorizontal:5
}}
onPress={() => setConfirmEditModalVisible(true)}>
<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={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>
backgroundColor:'#0077eb',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center',
}}>
<Text
style={{
fontSize:20,
color:'white',
fontFamily:'Poppins-Medium'
}}>
CREATE
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</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 = () => {
style={{
fontSize:20,
color:'black',
fontWeight:'bold',
marginBottom:20
fontFamily:'Poppins-SemiBold',
marginBottom:20,
}}>
Delete this shopping list?
Delete this shopping list?
</Text>
<Text
style={{
fontSize:15,
fontSize:18,
color:'black',
fontWeight:'500'
fontFamily:'Poppins-Regular'
}}>
Are you sure?
</Text>
......@@ -1101,31 +1008,31 @@ const DeleteListModal = () => {
style={{
flexDirection:'row',
margin:20,
justifyContent:'flex-start',
}}>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={() => setDeleteModalVisible(false)}
onPress={() => {setDeleteModalVisible(false),setManageListModalVisible(false)}}
>
<View
style={{
backgroundColor:'transparent',
backgroundColor:'#c60000',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
justifyContent:'center',
}}>
<Text
style={{
fontSize:20,
color:'black',
color:'white',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
NO
</Text>
......@@ -1138,10 +1045,8 @@ const DeleteListModal = () => {
>
<View
style={{
backgroundColor:'transparent',
backgroundColor:'#0077eb',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
......@@ -1151,7 +1056,8 @@ const DeleteListModal = () => {
<Text
style={{
fontSize:20,
color:'black',
color:'white',
fontFamily:'Poppins-Medium'
}}>
YES
</Text>
......@@ -1174,7 +1080,7 @@ const confirmEditModal = () => {
transparent={true}
visible={confirmEditModalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
// Alert.alert("Modal has been closed.");
setConfirmEditModalVisible(!confirmEditModalVisible);
}}>
<View
......@@ -1207,16 +1113,16 @@ const confirmEditModal = () => {
style={{
fontSize:20,
color:'black',
fontWeight:'bold',
fontFamily:'Poppins-SemiBold',
marginBottom:20
}}>
Cancel this list update?
</Text>
<Text
style={{
fontSize:15,
fontSize:18,
color:'black',
fontWeight:'500'
fontFamily:'Poppins-Regular'
}}>
Are you sure?
</Text>
......@@ -1232,10 +1138,8 @@ const confirmEditModal = () => {
>
<View
style={{
backgroundColor:'transparent',
backgroundColor:'#c60000',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
......@@ -1245,10 +1149,11 @@ const confirmEditModal = () => {
<Text
style={{
fontSize:20,
color:'black',
color:'white',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
NO
</Text>
......@@ -1257,14 +1162,12 @@ const confirmEditModal = () => {
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={()=>{setConfirmEditModalVisible(false), setEditModalVisible(false)}}
onPress={()=>{setConfirmEditModalVisible(false), setEditModalVisible(false), setManageListModalVisible(false)}}
>
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
backgroundColor:'#0077eb',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
......@@ -1274,7 +1177,7 @@ const confirmEditModal = () => {
<Text
style={{
fontSize:20,
color:'black',
color:'white',
}}>
YES
</Text>
......@@ -1298,7 +1201,7 @@ const confirmEditModal = () => {
<View
style={{
flex:1,
backgroundColor:'pink',
backgroundColor:'white',
width:'100%'
}}>
{emptyList ? emptyMessage(emptyList):
......@@ -1311,7 +1214,7 @@ const confirmEditModal = () => {
}
<TouchableOpacity
style={{
backgroundColor:'#ffa7b5',
// backgroundColor:'red',
elevation:7,
justifyContent:'center',
alignItems:'center',
......@@ -1319,19 +1222,39 @@ const confirmEditModal = () => {
position:'absolute',
borderRadius:100,
right:24,
bottom:24
bottom:20
}}
onPress={() =>
setAddModalVisible(true)
}>
<Image
style={[
styles.addButton,
{elevation:8}
]}
source={
plusbutton
}/>
<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
}}>
NEW LIST
</Text>
</View>
</TouchableOpacity>
</View>
{AddImage()}
......@@ -1339,6 +1262,7 @@ const confirmEditModal = () => {
{EditListModal()}
{DeleteListModal()}
{confirmEditModal()}
{ManageListModal()}
</SafeAreaView>
);
};
......@@ -1347,24 +1271,24 @@ const styles = StyleSheet.create({
topContainer:{
width:'100%',
height:80,
backgroundColor:'transparent',
backgroundColor:'white',
},
outerContainer:{
width:'100%',
flex:1,
backgroundColor:'#ffc0cb'
backgroundColor:'white'
},
listCard:{
width:'95%',
height:100,
backgroundColor:'#ffdae0',
backgroundColor:'white',
marginTop:10,
// marginBottom:5,
marginBottom:5,
marginHorizontal:10,
borderRadius:8,
elevation:0,
borderWidth:2,
borderColor:'#ffdae0',
elevation:5,
// borderWidth:2,
borderColor:'white',
},
headerTitle:{
fontSize:29,
......@@ -1397,9 +1321,12 @@ const styles = StyleSheet.create({
textName:{
// flexDirection:'row',
// marginHorizontal:10,
width:'100%',
width:'200%',
// marginTop:10,
fontSize:20,
fontFamily: 'Poppins-SemiBold',
color:'black'
},
// textQuantity:{
// flexDirection:'row',
......@@ -1436,11 +1363,11 @@ const styles = StyleSheet.create({
addModalView:{
position:'absolute',
marginHorizontal:100,
backgroundColor:'pink',
backgroundColor:'white',
borderRadius:20,
padding:25,
// padding:25,
width:'80%',
height:450,
height:300,
// justifyContent:'center',
// alignItems:'center',
shadowOffset:{
......@@ -1472,7 +1399,7 @@ const styles = StyleSheet.create({
deleteModalView:{
position:'absolute',
marginHorizontal:100,
backgroundColor:'pink',
backgroundColor:'white',
borderRadius:20,
padding:25,
width:'80%',
......@@ -1507,6 +1434,27 @@ const styles = StyleSheet.create({
shadowRadius:4,
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;
\ 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