Skip to content

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

Add increment and decrement value to input quantity

parent c9cc0c7e
Show whitespace changes
Inline Side-by-side
Showing with 1114 additions and 391 deletions
.vscode/settings.json 0 → 100644
View file @ a6a500ec
{
"java.configuration.updateBuildConfiguration": "automatic"
}
\ No newline at end of file
App.js
View file @ a6a500ec
...@@ -2,14 +2,7 @@ import * as React from 'react'; ...@@ -2,14 +2,7 @@ import * as React from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, ScrollView, StyleSheet, Image} from 'react-native'; import { View, Text, TouchableOpacity, SafeAreaView, ScrollView, StyleSheet, Image} from 'react-native';
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/index'; import ListScreen from './screens/ListScreen';
// import HomeScreen from './pages/HomeScreen';
// import RegisterUser from './pages/RegisterUser';
// import UpdateUser from './pages/UpdateUser';
// import ViewUser from './pages/ViewUser';
// import ViewAllUser from './pages/ViewAllUser';
// import DeleteUser from './pages/DeleteUser';
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const meal = require('./images/breakfast.png'); const meal = require('./images/breakfast.png');
...@@ -23,9 +16,9 @@ const App = () => { ...@@ -23,9 +16,9 @@ const App = () => {
options={{ options={{
title: 'Shopping List', title: 'Shopping List',
headerStyle: { headerStyle: {
backgroundColor: 'pink', backgroundColor: '#ffc0cb',
}, },
headerTintColor: 'white', headerTintColor: 'grey',
headerTitleStyle: { headerTitleStyle: {
fontWeight: 'normal', fontWeight: 'normal',
}, },
...@@ -33,120 +26,7 @@ const App = () => { ...@@ -33,120 +26,7 @@ const App = () => {
/> />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
// <SafeAreaView>
// <View style={styles.topContainer}>
// <Text style={styles.headerTitle}>SHOPPING LIST</Text>
// </View>
// <ScrollView>
// <View style = {styles.outerContainer}>
// <View style = {styles.listCard}>
// <View style={{flexDirection:'row'}}>
// <View style = {styles.imageContainer}>
// <Image style = {[styles.imageSize,{marginHorizontal:3, marginTop:2}]} source={meal}/>
// <View style={{flexDirection:'column'}}>
// <View style={{flexDirection:'row', justifyContent:'space-between', width:'100%'}}>
// <Text style={[styles.textName,{}]}>Grocery</Text>
// <TouchableOpacity style={[styles.editDeleteContainer,{marginHorizontal:15}]}>
// <Image source={meal} style={{width:30, height:30}}></Image>
// </TouchableOpacity>
// <TouchableOpacity style={[styles.editDeleteContainer,{}]}>
// <Image source={meal} style={{width:30, height:30}}></Image>
// </TouchableOpacity>
// </View>
// <View style={{flexDirection:'row'}}>
// <Text style={styles.textQuantity}>Quantity</Text>
// </View>
// </View>
// </View>
// </View>
// </View>
// <TouchableOpacity style={{backgroundColor:'red', width:70, height:70, position:'absolute', marginTop:650, marginHorizontal:300, borderRadius:100,}}>
// {/* <Image source={meal} style={{width:40, height:40}}></Image> */}
// </TouchableOpacity>
// </View>
// </ScrollView>
// </SafeAreaView>
); );
}; };
// const styles = StyleSheet.create({
// topContainer:{
// width:'100%',
// height:80,
// backgroundColor:'transparent',
// },
// outerContainer:{
// width:'100%',
// height:900,
// backgroundColor:'pink'
// },
// listCard:{
// width:'95%',
// height:100,
// backgroundColor:'yellow',
// marginTop:10,
// marginBottom:5,
// marginHorizontal:10,
// borderRadius:8,
// elevation:2
// },
// headerTitle:{
// fontSize:29,
// justifyContent:'center',
// alignItems:'center',
// marginHorizontal:100,
// marginTop:30,
// color:'pink',
// },
// imageSize:{
// width:75,
// height:75,
// justifyContent:'center',
// alignItems:'center',
// },
// imageContainer:{
// borderRadius:10,
// borderWidth:0.1,
// borderColor:'red',
// flexDirection:'row',
// backgroundColor:'red',
// marginTop:11,
// marginHorizontal:8,
// height:80,
// width:80,
// },
// textName:{
// flexDirection:'row',
// marginHorizontal:10,
// width:'75%',
// marginTop:10,
// fontSize:20,
// },
// textQuantity:{
// flexDirection:'row',
// marginHorizontal:10,
// // width:'75%',
// // marginTop:15,
// fontSize:15,
// },
// editDeleteContainer:{
// width:40,
// height:40,
// backgroundColor:'pink',
// marginTop:20,
// // marginHorizontal:10,
// borderRadius:8,
// borderColor:'pink',
// elevation:8,
// justifyContent:'center',
// alignItems:'center'
// },
// addContainer:{
// width:10,
// height:10,
// backgroundColor:'green',
// }
// });
export default App; export default App;
\ No newline at end of file
android/app/build.gradle
View file @ a6a500ec
...@@ -84,6 +84,9 @@ project.ext.react = [ ...@@ -84,6 +84,9 @@ project.ext.react = [
apply from: "../../node_modules/react-native/react.gradle" apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
/** /**
* Set this to true to create two separate APKs instead of one: * Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices * - An APK that only works on ARM devices
...@@ -253,7 +256,7 @@ dependencies { ...@@ -253,7 +256,7 @@ dependencies {
//noinspection GradleDynamicVersion //noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules implementation "com.facebook.react:react-native:+" // From node_modules
implementation project(':react-native-vector-icons')
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
......
android/app/src/debug/AndroidManifest.xml
View file @ a6a500ec
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
xmlns:tools="http://schemas.android.com/tools"> xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application <application
android:usesCleartextTraffic="true" android:usesCleartextTraffic="true"
tools:targetApi="28" tools:targetApi="28"
......
android/app/src/main/java/com/shoppinglist/MainApplication.java
View file @ a6a500ec
...@@ -12,6 +12,8 @@ import com.facebook.soloader.SoLoader; ...@@ -12,6 +12,8 @@ import com.facebook.soloader.SoLoader;
import com.shoppinglist.newarchitecture.MainApplicationReactNativeHost; import com.shoppinglist.newarchitecture.MainApplicationReactNativeHost;
import java.lang.reflect.InvocationTargetException; import java.lang.reflect.InvocationTargetException;
import java.util.List; import java.util.List;
import com.oblador.vectoricons.VectorIconsPackage;
public class MainApplication extends Application implements ReactApplication { public class MainApplication extends Application implements ReactApplication {
......
android/settings.gradle
View file @ a6a500ec
...@@ -2,6 +2,8 @@ rootProject.name = 'shoppinglist' ...@@ -2,6 +2,8 @@ rootProject.name = 'shoppinglist'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app' include ':app'
includeBuild('../node_modules/react-native-gradle-plugin') includeBuild('../node_modules/react-native-gradle-plugin')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") { if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
include(":ReactAndroid") include(":ReactAndroid")
......
package.json
View file @ a6a500ec
...@@ -12,12 +12,15 @@ ...@@ -12,12 +12,15 @@
"dependencies": { "dependencies": {
"@react-navigation/native": "^6.1.1", "@react-navigation/native": "^6.1.1",
"@react-navigation/native-stack": "^6.9.7", "@react-navigation/native-stack": "^6.9.7",
"link": "^1.5.1",
"react": "18.1.0", "react": "18.1.0",
"react-native": "0.70.6", "react-native": "^0.70.6",
"react-native-image-picker": "^4.10.3", "react-native-image-picker": "^4.10.3",
"react-native-numeric-input": "^1.9.1",
"react-native-safe-area-context": "^4.4.1", "react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2", "react-native-screens": "^3.18.2",
"react-native-sqlite-storage": "^6.0.1" "react-native-sqlite-storage": "^6.0.1",
"react-native-vector-icons": "^9.2.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.9", "@babel/core": "^7.12.9",
......
screens/ListScreen/index.js
View file @ a6a500ec
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, ScrollView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid} from 'react-native'; import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage'; import { openDatabase } from 'react-native-sqlite-storage';
import ImagePicker from 'react-native-image-picker';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputQuantity from 'react-native-numeric-input';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
var db = openDatabase({ name: 'shoppinglist.db'}); var db = openDatabase({ name: 'shoppinglist.db'});
const meal = require('../../images/breakfast.png'); const meal = require('../../images/breakfast.png');
const plusbutton = require('../../images/plusbutton.png');
const editbutton = require('../../images/editbutton.png');
const deletebutton = require ('../../images/deletebutton.png');
// const LIST = [
// {
// id:'0',
// title:'Bread',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'1',
// title:'Shirt',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'2',
// title:'Shoes',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'0',
// title:'Bread',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'1',
// title:'Shirt',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'2',
// title:'Shoes',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'0',
// title:'Bread',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'1',
// title:'Shirt',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// {
// id:'2',
// title:'Shoes',
// quantity:1,
// image: require('../../images/breakfast.png'),
// },
// ]
const LIST = [ const ListScreen = ({navigation}) => {
const [addImageVisible, setAddImageVisible] = useState(false);
const [addModalVisible, setAddModalVisible] = useState(false);
const [editModalVisible, setEditModalVisible] = useState(false);
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [name, setName] = useState('');
const [quantity, setQuantity] = useState('');
const [image, setImage] = useState('');
const [filePath, setFilePath] = useState({});
const [items, setItems] = useState ([]);
const [empty, setEmpty] = useState ([]);
// create table
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name from sqlite_master WHERE type='table' AND name='list'",
[],
function (tx, res) {
console.log('item:', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS list', []);
txn.executeSql(
'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100), quantity INT(10))',
[],
);
}
},
);
});
console.log('Sucess!');
}, []);
// add into list
const addToList = () => {
console.log(name, quantity);
if (name == '') {
alert('Please enter name');
return;
} else
if (quantity == 0){
alert('Please enter quantity');
return;
}
else{
setAddModalVisible(false)
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO list (name) VALUES (?)',
[name],
(tx, results) => {
console.log('Results', results.rowsAffected);
if (results.rowsAffected > 0) {
Alert.alert('Data Inserted Successfully');
} else alert('Failed creating list');
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
}
}
// navigateToListScreen = () => {
// navigation.navigate('ListScreen');
// }
// view list
useEffect(() => {
db.transaction((tx) => {
tx.executeSql(
'SELECT * FROM list',
[],
(tx, results) => {
var temp = [];
for (let i = 0; i < results.rows.length; ++i)
temp.push(results.rows.item(i));
setItems(temp);
if (results.rows.length >=1){
setEmpty(false);
}else{
setEmpty(true)
}
console.log(JSON.stringify(temp))
}
);
});
}, []);
// update list
const updateList = () => {
db.transaction((tx) => {
tx.executeSql(
'SELECT * FROM list where id = ?',
[id],
(tx, results) => {
console.log('Results', results.rowsAffected);
if (results.rowsAffected > 0) {
Alert.alert(
'Success',
'Successfully added into shopping list.',
[
{ {
id:'0', text: 'Ok',
title:'Bread', onPress: () => navigation.navigate('ListScreen'),
quantity:1,
image: require('../../images/breakfast.png'),
}, },
// { ],
// id:'1', { cancelable: false }
// title:'Shirt', );
// quantity:1, } else alert('Failed creating list');
// image: require('../../images/breakfast.png'), }
// }, );
// { });
// id:'2', }
// title:'Shoes',
// quantity:1, //delete list
// image: require('../../images/breakfast.png'), const deleteList = (id) => {
// }, db.transaction((tx) => {
] tx.executeSql(
'DELETE * FROM list where id = ?',
[name],
(tx, results) => {
console.log('Results', results.rowsAffected);
if (results.rowsAffected > 0) {
Alert.alert(
'Success',
'List deleted successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ListScreen'),
},
],
{ cancelable: false }
);
} else alert('Failed creating list');
}
);
});
}
const listViewItemSeparator = () =>{
return (
<View style={{
height: 0.1,
width: '100%',
backgroundColor: 'pink'
}}/>
);
};
const emptyMessage = (status) => {
return(
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1 ,
marginLeft:10,
marginRight:10
}}>
<Text
style={{
fontSize: 20,
textAlign: 'center'
}}>
No record in shopping list. Tap + to add a new list.
</Text>
</View>
);
}
const requestCameraPermission = async () => { const requestCameraPermission = async () => {
try { try {
...@@ -70,108 +285,195 @@ const requestExternalWritePermission = async () => { ...@@ -70,108 +285,195 @@ const requestExternalWritePermission = async () => {
} else return true; } else return true;
}; };
const captureImage = async (type) => {
let options = {
mediaType: type,
maxWidth: 300,
maxHeight: 550,
quality: 1,
// videoQuality: 'low',
durationLimit: 30, //Video max duration in seconds
saveToPhotos: true,
};
let isCameraPermitted = await requestCameraPermission();
let isStoragePermitted = await requestExternalWritePermission();
if (isCameraPermitted && isStoragePermitted) {
launchCamera(options, (response) => {
console.log('Response = ', response);
const ListScreen = (navigation) => { if (response.didCancel) {
const [addImageVisible, setAddImageVisible] = useState(false); alert('User cancelled camera picker');
const [addModalVisible, setAddModalVisible] = useState(false); return;
const [editModalVisible, setEditModalVisible] = useState(false); } else if (response.errorCode == 'camera_unavailable') {
const [deleteModalVisible, setDeleteModalVisible] = useState(false); alert('Camera not available on device');
const [name, setName] = useState(''); return;
const [quantity, setQuantity] = useState(''); } else if (response.errorCode == 'permission') {
const [image, setImage] = useState(''); alert('Permission not satisfied');
const [filePath, setFilePath] = useState({}); return;
} else if (response.errorCode == 'others') {
useEffect(() => { alert(response.errorMessage);
db.transaction(function (txn) { return;
txn.executeSql(
"SELECT name from sqlite_master WHERE type='table' AND name='list'",
[],
function (tx, res) {
console.log('item:', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS list', []);
txn.executeSql(
'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100), quantity INT(100), image LONGTEXT))',
[]
);
}
} }
); console.log('base64 -> ', response.base64);
console.log('uri -> ', response.uri);
console.log('width -> ', response.width);
console.log('height -> ', response.height);
console.log('fileSize -> ', response.fileSize);
console.log('type -> ', response.type);
console.log('fileName -> ', response.fileName);
setFilePath(response);
}); });
}, []); }
};
const chooseFile = () => { const chooseFile = (type) => {
let options = { let options = {
title: 'Select Image', mediaType: type,
customButtons: [ maxWidth: 300,
{ maxHeight: 550,
name: 'customOptionKey', quality: 1,
title: 'Choose Photo from Custom Option'
},
],
storageOptions: {
skipBackup: true,
path: 'images',
},
}; };
ImagePicker.showImagePicker(options, (response) => { launchImageLibrary(options, (response) => {
console.log('Response = ', response); console.log('Response = ', response);
if (response.didCancel) { if (response.didCancel) {
console.log('User cancelled image picker'); alert('User cancelled camera picker');
} else if (response.error) { return;
console.log('ImagePicker Error: ', response.error); } else if (response.errorCode == 'camera_unavailable') {
} else if (response.customButton) { alert('Camera not available on device');
console.log( return;
'User tapped custom button: ', } else if (response.errorCode == 'permission') {
response.customButton alert('Permission not satisfied');
); return;
alert(response.customButton); } else if (response.errorCode == 'others') {
} else { alert(response.errorMessage);
let source = response; return;
// You can also display the image using data:
// let source = {
// uri: 'data:image/jpeg;base64,' + response.data
// };
setFilePath(source);
} }
console.log('base64 -> ', response.base64);
console.log('uri -> ', response.uri);
console.log('width -> ', response.width);
console.log('height -> ', response.height);
console.log('fileSize -> ', response.fileSize);
console.log('type -> ', response.type);
console.log('fileName -> ', response.fileName);
setFilePath(response);
}); });
}; };
const renderItem = ({ item }) => ( // const chooseFile = () => {
// let options = {
// title: 'Select Image',
// customButtons: [
// {
// name: 'customOptionKey',
// title: 'Choose Photo from Custom Option'
// },
// ],
// storageOptions: {
// skipBackup: true,
// path: 'images',
// },
// };
// ImagePicker.showImagePicker(options, (response) => {
// console.log('Response = ', response);
// if (response.didCancel) {
// console.log('User cancelled image picker');
// } else if (response.error) {
// console.log('ImagePicker Error: ', response.error);
// } else if (response.customButton) {
// console.log(
// 'User tapped custom button: ',
// response.customButton
// );
// alert(response.customButton);
// } else {
// let source = response;
// // You can also display the image using data:
// // let source = {
// // uri: 'data:image/jpeg;base64,' + response.data
// // };
// setFilePath(source);
// }
// });
// };
<View style = {styles.outerContainer}> const listItemView = ( item ) => (
<View style = {styles.listCard}> <View
<View style={{flexDirection:'row'}}> style = {
<View style = {styles.imageContainer}> styles.outerContainer
<Image style = {[styles.imageSize,{}]} source={meal}/> }>
{/* <View style={{flexDirection:'row'}}> */} <View
<View style={{flexDirection:'column', marginHorizontal:10, width:'200%'}}> style = {
<Text style={[styles.textName,{marginTop:13}]}>{item.title}</Text> styles.listCard
<View style={{flexDirection:'row'}}> }>
<View
style={{
flexDirection:'row'
}}>
<View
style = {styles.imageContainer}>
<Image
style = {[styles.imageSize,{}]}
source={meal}
/>
<View
style={{
flexDirection:'column',
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> </View>
<Text style={[styles.textName,{}]}>Quantity: {item.quantity}</Text> <Text
style={[
styles.textName,
{}
]}>
Quantity: {item.quantity}
</Text>
</View> </View>
<TouchableOpacity style={[styles.editDeleteContainer,{}]} onPress = {()=>setEditModalVisible(true)}> <TouchableOpacity
<Image source={meal} style={{width:30, height:30}}/> style={[
</TouchableOpacity> styles.editDeleteContainer,
<TouchableOpacity style={[styles.editDeleteContainer,{marginHorizontal:10,}]} onPress = {()=>setDeleteModalVisible(true)}> {}
<Image source={item.image} style={{width:30, height:30}}></Image> ]}
onPress = {()=>setEditModalVisible(true)}
>
<MaterialCommunityIcons
name="square-edit-outline"
size={30}
color='white'
/>
</TouchableOpacity> </TouchableOpacity>
{/* <View style={{flexDirection:'row'}}> <TouchableOpacity
style={[
</View> */} styles.editDeleteContainer,
{/* <TouchableOpacity style={[styles.editDeleteContainer,{marginHorizontal:15}]} onPress = {()=>setEditModalVisible(true)}> {marginHorizontal:10,}
<Image source={meal} style={{width:30, height:30}}></Image> ]}
onPress = {()=>setDeleteModalVisible(true)}
>
<MaterialCommunityIcons
name="delete"
size={30}
color='white'
/>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={[styles.editDeleteContainer,{}]} onPress = {()=>setDeleteModalVisible(true)}>
<Image source={item.image} style={{width:30, height:30}}></Image>
</TouchableOpacity> */}
{/* </View> */}
{/* <View style={{flexDirection:'row'}}>
<Text style={styles.textQuantity}>Quantity: {item.quantity}</Text>
</View> */}
{/* </View> */}
</View> </View>
</View> </View>
</View> </View>
...@@ -181,14 +483,6 @@ const renderItem = ({ item }) => ( ...@@ -181,14 +483,6 @@ const renderItem = ({ item }) => (
const AddImage = () => { const AddImage = () => {
if(addImageVisible){ if(addImageVisible){
return( return(
<SafeAreaView style={{
position:'absolute',
height:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', alignItems:'center'
}}>
<TouchableOpacity style={{height:'100%', width:'100%'}} onPress = {()=>{setAddImageVisible(false)}}></TouchableOpacity>
<View style={styles.centeredView}>
<Modal <Modal
animationType="none" animationType="none"
transparent={true} transparent={true}
...@@ -196,43 +490,88 @@ const renderItem = ({ item }) => ( ...@@ -196,43 +490,88 @@ const renderItem = ({ item }) => (
onRequestClose={() =>{ onRequestClose={() =>{
Alert.alert("Modal has been closed."); Alert.alert("Modal has been closed.");
setAddImageVisible(!addImageVisible); setAddImageVisible(!addImageVisible);
}}>
<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 = {()=>{setAddImageVisible(false)}}>
<View style={styles.centeredView}> </TouchableOpacity>
<View style={styles.addImageView}> <View
<View style={{alignItems:'center'}}> style={styles.centeredView}>
<Text style={{fontSize:20, color:'black', fontWeight:'bold'}}>Add image</Text> <View
style={styles.centeredView}>
<View
style={styles.addImageView}>
<View
style={{
alignItems:'center',
marginTop:10
}}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold'
}}>
Add image
</Text>
</View> </View>
<TouchableOpacity> <TouchableOpacity
<View style={{marginTop:20}}> onPress={() => captureImage('photo')}>
<Text style={{fontSize:15, color:'black'}}>Take photo</Text> <View
style={{
marginTop:25
}}>
<Text
style={{
fontSize:15,
color:'black',
}}>
Take photo
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity> <TouchableOpacity
<View style={{marginTop:10}}> onPress={() => chooseFile('photo')}>
<Text style={{fontSize:15, color:'black'}}>Add from gallery</Text> <View
style={{
marginTop:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Add from gallery
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</Modal>
</View> </View>
</SafeAreaView> </View>
</Modal>
) )
} }
} }
const AddListModal = () => { const AddListModal = () => {
if(addModalVisible){ if(addModalVisible){
return( return(
<SafeAreaView style={{
position:'absolute',
height:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', alignItems:'center'
}}>
<TouchableOpacity style={{height:'100%', width:'100%'}} onPress = {()=>{setAddModalVisible(false)}}></TouchableOpacity>
<View style={styles.centeredView}>
<Modal <Modal
animationType="none" animationType="none"
transparent={true} transparent={true}
...@@ -240,61 +579,223 @@ const renderItem = ({ item }) => ( ...@@ -240,61 +579,223 @@ const renderItem = ({ item }) => (
onRequestClose={() => { onRequestClose={() => {
Alert.alert("Modal has been closed."); Alert.alert("Modal has been closed.");
setAddModalVisible(!addModalVisible); setAddModalVisible(!addModalVisible);
}}>
<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={() => setAddModalVisible(false)}
<View style={styles.centeredView}> />
<View style={styles.addModalView}> <View style={styles.addModalView}>
<View style={{alignItems:'center'}}> <View
<Text style={{fontSize:20, color:'black', fontWeight:'bold'}}>Add new list</Text> style={{
alignItems:'center',
marginTop:20,
}}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold'
}}>
Add new list
</Text>
</View> </View>
<View style={{flexDirection:'row', marginTop:20}}>
<View style={{justifyContent:'flex-start', marginVertical:15}}> <View
<Text style={{fontSize:15, color:'black'}}>Name</Text> style={{
flexDirection:'row',
marginTop:20
}}>
<View style={{
justifyContent:'flex-start',
marginVertical:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>Name</Text>
</View> </View>
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:210, height:50, marginHorizontal:19}}> <View
<TextInput onChangeText={setName}/> style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:210,
height:50,
marginHorizontal:19
}}>
<TextInput
onChangeText={(name) => setName(name)}
/>
</View> </View>
</View> </View>
<View style={{flexDirection:'row', marginTop:20}}> <View
<View style={{justifyContent:'flex-start', marginVertical:15}}> style={{
<Text style={{fontSize:15, color:'black'}}>Quantity</Text> flexDirection:'row',
<Image></Image> marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:19
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Quantity
</Text>
</View> </View>
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:210, height:50, marginHorizontal:5}}> <View
<TextInput onChangeNumber={setQuantity}/> style={{
marginHorizontal:5,
marginTop:5
}}>
<InputQuantity
value={quantity}
minValue={0}
maxValue={100}
// onChangeText={(name) => setName(name)
onChangeNumber={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
totalHeight={50}
totalWidth={150}
iconSize={25}
step={1.5}
valueType='integer'
rounded
textColor='black'
iconStyle={{color:'white'}}
rightButtonBackgroundColor='#ed81a1'
leftButtonBackgroundColor='#ed81a1'
/>
</View> </View>
</View> </View>
<View style={{flexDirection:'row', marginTop:20}}> <View
<View style={{justifyContent:'flex-start', marginVertical:8}}> style={{
<Text style={{fontSize:15, color:'black'}}>Image</Text> flexDirection:'row',
marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:8
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
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)}> <TouchableOpacity
{/* <Image source={meal} style={{width:30, height:30}}/> */} 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> </TouchableOpacity>
{/* <View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:40, height:40, marginHorizontal:1, alignItems:'center', justifyContent:'center'}}>
<Image source={meal} style={{width:30, height:30}}/>
</View> */}
</View> </View>
<View
<View style={{flexDirection:'row', margin:25, marginTop:25}}> style={{
<TouchableOpacity style={{marginHorizontal:5}} onPress={() => setAddModalVisible(false)}> flexDirection:'row',
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:100, height:50, alignItems:'center', alignContent:'center', justifyContent:'center'}}> margin:25,
<Text style={{fontSize:20, color:'black', alignItems:'center', alignContent:'center', justifyContent:'center'}}>CANCEL</Text> 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> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{marginHorizontal:5}} onPress={() => setAddModalVisible(false)}> <TouchableOpacity
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:100, height:50, alignItems:'center', alignContent:'center', justifyContent:'center'}}> style={{
<Text style={{fontSize:20, color:'black',}}>SAVE</Text> marginHorizontal:5
}}
onPress={addToList}>
<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> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</Modal> </Modal>
</View>
</SafeAreaView>
) )
} }
} }
...@@ -302,14 +803,6 @@ const renderItem = ({ item }) => ( ...@@ -302,14 +803,6 @@ const renderItem = ({ item }) => (
const EditListModal = () => { const EditListModal = () => {
if(editModalVisible){ if(editModalVisible){
return( return(
<SafeAreaView style={{
position:'absolute',
height:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', alignItems:'center'
}}>
<TouchableOpacity style={{height:'100%', width:'100%'}} onPress = {()=>{setDeleteModalVisible(false)}}></TouchableOpacity>
<View style={styles.centeredView}>
<Modal <Modal
animationType="none" animationType="none"
transparent={true} transparent={true}
...@@ -317,54 +810,223 @@ const EditListModal = () => { ...@@ -317,54 +810,223 @@ const EditListModal = () => {
onRequestClose={() => { onRequestClose={() => {
Alert.alert("Modal has been closed."); Alert.alert("Modal has been closed.");
setEditModalVisible(!editModalVisible); 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.centeredView}> />
<View style={styles.editModalView}> <View style={styles.editModalView}>
<View style={{alignItems:'center'}}> <View
<Text style={{fontSize:20, color:'black', fontWeight:'bold'}}>Edit list</Text> style={{
</View> alignItems:'center',
<View style={{flexDirection:'row', marginTop:20}}> marginTop:20,
<View style={{justifyContent:'flex-start', marginVertical:15}}> }}>
<Text style={{fontSize:15, color:'black'}}>Name</Text> <Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold'
}}>
Edit list
</Text>
</View> </View>
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:210, height:50, marginHorizontal:19}}>
<TextInput onChangeText={setName}/> <View
style={{
flexDirection:'row',
marginTop:20
}}>
<View style={{
justifyContent:'flex-start',
marginVertical:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>Name</Text>
</View> </View>
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:210,
height:50,
marginHorizontal:19
}}>
<TextInput
onChangeText={(name) => setName(name)}
/>
</View> </View>
<View style={{flexDirection:'row', marginTop:20}}>
<View style={{justifyContent:'flex-start', marginVertical:15}}>
<Text style={{fontSize:15, color:'black'}}>Quantity</Text>
<Image></Image>
</View> </View>
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:210, height:50, marginHorizontal:5}}> <View
<TextInput onChangeNumber={setQuantity}/> style={{
flexDirection:'row',
marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Quantity
</Text>
</View> </View>
<View
style={{
marginHorizontal:5,
marginTop:5
}}>
<InputQuantity
value={quantity}
minValue={0}
maxValue={100}
// onChangeText={(name) => setName(name)
onChangeNumber={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
totalHeight={50}
totalWidth={150}
iconSize={25}
step={1.5}
valueType='integer'
rounded
textColor='black'
iconStyle={{color:'white'}}
rightButtonBackgroundColor='#ed81a1'
leftButtonBackgroundColor='#ed81a1'
/>
</View> </View>
<View style={{flexDirection:'row', marginTop:20}}>
<View style={{justifyContent:'flex-start', marginVertical:1}}>
<Text style={{fontSize:15, color:'black'}}>Image</Text>
</View> </View>
<View
style={{
flexDirection:'row',
marginTop:20
}}>
<View
style={{
justifyContent:'flex-start',
marginVertical:8
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Image
</Text>
</View> </View>
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:265, height:125, marginHorizontal:1, marginTop:5}}> <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>
<View style={{flexDirection:'row', margin:25, marginTop:25}}> <View
<TouchableOpacity style={{marginHorizontal:5}} onPress={() => setEditModalVisible(false)}> style={{
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:100, height:50, alignItems:'center', alignContent:'center', justifyContent:'center'}}> flexDirection:'row',
<Text style={{fontSize:20, color:'black', alignItems:'center', alignContent:'center', justifyContent:'center'}}>CANCEL</Text> margin:25,
marginTop:25
}}>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={() => setEditModalVisible(false)}>
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{
fontSize:20,
color:'black',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
CANCEL
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{marginHorizontal:5}} onPress={() => setEditModalVisible(false)}> <TouchableOpacity
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:100, height:50, alignItems:'center', alignContent:'center', justifyContent:'center'}}> style={{
<Text style={{fontSize:20, color:'black',}}>SAVE</Text> marginHorizontal:5
}}
// onPress={addToList}
>
<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> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</Modal> </Modal>
</View>
</SafeAreaView>
) )
} }
} }
...@@ -372,14 +1034,6 @@ const EditListModal = () => { ...@@ -372,14 +1034,6 @@ const EditListModal = () => {
const DeleteListModal = () => { const DeleteListModal = () => {
if(deleteModalVisible){ if(deleteModalVisible){
return( return(
<SafeAreaView style={{
position:'absolute',
height:'100%', width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', alignItems:'center'
}}>
<TouchableOpacity style={{height:'100%', width:'100%'}} onPress = {()=>{setDeleteModalVisible(false)}}></TouchableOpacity>
<View style={styles.centeredView}>
<Modal <Modal
animationType="none" animationType="none"
transparent={true} transparent={true}
...@@ -387,42 +1041,164 @@ const DeleteListModal = () => { ...@@ -387,42 +1041,164 @@ const DeleteListModal = () => {
onRequestClose={() => { onRequestClose={() => {
Alert.alert("Modal has been closed."); Alert.alert("Modal has been closed.");
setDeleteModalVisible(!deleteModalVisible); setDeleteModalVisible(!deleteModalVisible);
}}>
<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={() => setDeleteModalVisible(false)}
/>
<View
style={
styles.centeredView
}>
<View
style={
styles.deleteModalView
}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold',
marginBottom:20
}}>
Delete this record?
</Text>
<Text
style={{
fontSize:15,
color:'black',
fontWeight:'500'
}}>
Are you sure?
</Text>
<View
style={{
flexDirection:'row',
margin:20,
}}>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={() => setDeleteModalVisible(false)}
> >
<View style={styles.centeredView}> <View
<View style={styles.deleteModalView}> style={{
<Text style={{fontSize:20, color:'black', fontWeight:'bold', marginBottom:20}}>Delete this record?</Text> backgroundColor:'transparent',
<Text style={{fontSize:15, color:'black', fontWeight:'500'}}>Are you sure?</Text> borderRadius:7,
<View style={{flexDirection:'row', margin:20,}}> borderColor:'white',
<TouchableOpacity style={{marginHorizontal:5}} onPress={() => setDeleteModalVisible(false)}> borderWidth:3,
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:100, height:50, alignItems:'center', alignContent:'center', justifyContent:'center'}}> width:100,
<Text style={{fontSize:20, color:'black', alignItems:'center', alignContent:'center', justifyContent:'center'}}>NO</Text> height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{
fontSize:20,
color:'black',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
NO
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{marginHorizontal:5}} onPress={() => setDeleteModalVisible(false)}> <TouchableOpacity
<View style={{backgroundColor:'transparent', borderRadius:7, borderColor:'white', borderWidth:3, width:100, height:50, alignItems:'center', alignContent:'center', justifyContent:'center'}}> style={{
<Text style={{fontSize:20, color:'black',}}>YES</Text> marginHorizontal:5}}
onPress={() => setDeleteModalVisible(false)}
>
<View
style={{
backgroundColor:'transparent',
borderRadius:7,
borderColor:'white',
borderWidth:3,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'}}
onPress={deleteList}
>
<Text
style={{
fontSize:20,
color:'black',
}}>
YES
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</Modal> </View>
</View> </Modal>
</SafeAreaView>
) )
} }
} }
return ( return (
<SafeAreaView> <SafeAreaView
style={{
flex:1,
width:'100%'
}}>
<View
style={{
flex:1,
backgroundColor:'pink',
width:'100%'
}}>
{empty ? emptyMessage(empty):
<FlatList <FlatList
data={LIST} data={items}
renderItem={renderItem} ItemSeparatorComponent={listViewItemSeparator}
keyExtractor={item => item.id} keyExtractor={(item,index) => index.toString()}
renderItem={({item}) => listItemView(item)}
/> />
<TouchableOpacity style={styles.addButton} onPress={() => setAddModalVisible(true)}> }
<Image style={{width:30, height:30}}></Image> <TouchableOpacity
style={{
backgroundColor:'#ffa7b5',
elevation:7,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
position:'absolute',
borderRadius:100,
right:24,
bottom:24
}}
onPress={() =>
setAddModalVisible(true)
}>
<Image
style={[
styles.addButton,
{elevation:8}
]}
source={
plusbutton
}/>
</TouchableOpacity> </TouchableOpacity>
</View>
{AddImage()} {AddImage()}
{AddListModal()} {AddListModal()}
{EditListModal()} {EditListModal()}
...@@ -439,20 +1215,20 @@ const styles = StyleSheet.create({ ...@@ -439,20 +1215,20 @@ const styles = StyleSheet.create({
}, },
outerContainer:{ outerContainer:{
width:'100%', width:'100%',
height:900, flex:1,
backgroundColor:'pink' backgroundColor:'#ffc0cb'
}, },
listCard:{ listCard:{
width:'95%', width:'95%',
height:100, height:100,
backgroundColor:'lightpink', backgroundColor:'#ffdae0',
marginTop:10, marginTop:10,
// marginBottom:5, // marginBottom:5,
marginHorizontal:10, marginHorizontal:10,
borderRadius:8, borderRadius:8,
elevation:8, elevation:0,
borderWidth:2, borderWidth:2,
borderColor:'white' borderColor:'#ffdae0',
}, },
headerTitle:{ headerTitle:{
fontSize:29, fontSize:29,
...@@ -498,32 +1274,19 @@ const styles = StyleSheet.create({ ...@@ -498,32 +1274,19 @@ const styles = StyleSheet.create({
editDeleteContainer:{ editDeleteContainer:{
width:40, width:40,
height:40, height:40,
backgroundColor:'#ffd8d8', backgroundColor:'#ffa7b5',
marginTop:20, marginTop:20,
// marginHorizontal:10, // marginHorizontal:10,
borderRadius:8, borderRadius:8,
borderColor:'pink', borderColor:'pink',
elevation:8, elevation:8,
justifyContent:'center', justifyContent:'center',
alignItems:'center' alignItems:'center',
}, alignContent:'center'
addContainer:{
width:10,
height:10,
backgroundColor:'green',
}, },
addButton:{ addButton:{
backgroundColor:'#ffd8d8', width:60,
elevation:7, height:60,
width:70,
height:70,
justifyContent:'center',
alignItems:'center',
position:'absolute',
borderRadius:100,
bottom:20,
left:310,
marginTop:210
}, },
centeredView:{ centeredView:{
flex:1, flex:1,
...@@ -542,7 +1305,6 @@ const styles = StyleSheet.create({ ...@@ -542,7 +1305,6 @@ const styles = StyleSheet.create({
height:450, height:450,
// justifyContent:'center', // justifyContent:'center',
// alignItems:'center', // alignItems:'center',
shadowColor:'#000',
shadowOffset:{ shadowOffset:{
width:0, width:0,
height:2 height:2
...@@ -591,11 +1353,11 @@ const styles = StyleSheet.create({ ...@@ -591,11 +1353,11 @@ const styles = StyleSheet.create({
addImageView:{ addImageView:{
position:'absolute', position:'absolute',
marginHorizontal:100, marginHorizontal:100,
backgroundColor:'white', backgroundColor:'pink',
borderRadius:20, borderRadius:20,
padding:25, padding:25,
width:'80%', width:'80%',
height:150, height:200,
// justifyContent:'center', // justifyContent:'center',
alignItems:'center', alignItems:'center',
shadowColor:'#000', shadowColor:'#000',
......
yarn.lock
View file @ a6a500ec
...@@ -2144,6 +2144,15 @@ cliui@^6.0.0: ...@@ -2144,6 +2144,15 @@ cliui@^6.0.0:
strip-ansi "^6.0.0" strip-ansi "^6.0.0"
wrap-ansi "^6.2.0" wrap-ansi "^6.2.0"
cliui@^7.0.2:
version "7.0.4"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
dependencies:
string-width "^4.2.0"
strip-ansi "^6.0.0"
wrap-ansi "^7.0.0"
clone-deep@^4.0.1: clone-deep@^4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387" resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
...@@ -3134,7 +3143,7 @@ gensync@^1.0.0-beta.2: ...@@ -3134,7 +3143,7 @@ gensync@^1.0.0-beta.2:
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
get-caller-file@^2.0.1: get-caller-file@^2.0.1, get-caller-file@^2.0.5:
version "2.0.5" version "2.0.5"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
...@@ -4416,6 +4425,11 @@ lines-and-columns@^1.1.6: ...@@ -4416,6 +4425,11 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
link@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/link/-/link-1.5.1.tgz#2fd37e759820ee077267c8473e4e31cde30a3c6d"
integrity sha512-80GBz0JfARAPedegdwtMHJ4tiPCQNqi9UZ0womJ5YU6Zw/Jc8JRji5cnhqkxGTTFAPLs1HftUDf81qUQg0aY0Q==
locate-path@^3.0.0: locate-path@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
...@@ -5433,7 +5447,7 @@ prompts@^2.0.1, prompts@^2.4.0: ...@@ -5433,7 +5447,7 @@ prompts@^2.0.1, prompts@^2.4.0:
kleur "^3.0.3" kleur "^3.0.3"
sisteransi "^1.0.5" sisteransi "^1.0.5"
prop-types@^15.8.1: prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1" version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
...@@ -5528,6 +5542,19 @@ react-native-image-picker@^4.10.3: ...@@ -5528,6 +5542,19 @@ react-native-image-picker@^4.10.3:
resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.10.3.tgz#cdc11d9836b4cfa57e658c0700201babf8fdca10" resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.10.3.tgz#cdc11d9836b4cfa57e658c0700201babf8fdca10"
integrity sha512-gLX8J6jCBkUt6jogpSdA7YyaGVLGYywRzMEwBciXshihpFZjc/cRlKymAVlu6Q7HMw0j3vrho6pI8ZGC5O/FGg== integrity sha512-gLX8J6jCBkUt6jogpSdA7YyaGVLGYywRzMEwBciXshihpFZjc/cRlKymAVlu6Q7HMw0j3vrho6pI8ZGC5O/FGg==
react-native-numeric-input@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/react-native-numeric-input/-/react-native-numeric-input-1.9.1.tgz#eff20699a51ecce6cbd1e3682f68dad981d84e35"
integrity sha512-uJiMjundXHiBcBLHgSqbfSjLdBM+4OBgLJLSsYG5/+XST5XWufsU8eZaEsn1miOkhjj2B7WgshjNX2Qm+4n3kw==
dependencies:
prop-types "^15.6.1"
react-native-pixel-perfect "^1.0.1"
react-native-pixel-perfect@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-native-pixel-perfect/-/react-native-pixel-perfect-1.0.2.tgz#8e6dc97e377caa4bd07f9e584ba438d53c0e25e8"
integrity sha512-0IvYCNkxuQbQC9q4tI+C3i6o38nbx916p7gBRBWuPxDhKBCuTkVV3VukcfW6vtjRlwQm6kwQcF9OtI+yUBt+YA==
react-native-safe-area-context@^4.4.1: react-native-safe-area-context@^4.4.1:
version "4.4.1" version "4.4.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
...@@ -5546,7 +5573,15 @@ react-native-sqlite-storage@^6.0.1: ...@@ -5546,7 +5573,15 @@ react-native-sqlite-storage@^6.0.1:
resolved "https://registry.yarnpkg.com/react-native-sqlite-storage/-/react-native-sqlite-storage-6.0.1.tgz#ce6a6b852f07abbea68658d5363818c8bef45dfb" resolved "https://registry.yarnpkg.com/react-native-sqlite-storage/-/react-native-sqlite-storage-6.0.1.tgz#ce6a6b852f07abbea68658d5363818c8bef45dfb"
integrity sha512-1tDFjrint6X6qSYKf3gDyz+XB+X79jfiL6xTugKHPRtF0WvqMtVgdLuNqZunIXjNEvNtNVEbXaeZ6MsguFu00A== integrity sha512-1tDFjrint6X6qSYKf3gDyz+XB+X79jfiL6xTugKHPRtF0WvqMtVgdLuNqZunIXjNEvNtNVEbXaeZ6MsguFu00A==
react-native@0.70.6: react-native-vector-icons@^9.2.0:
version "9.2.0"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz#3c0c82e95defd274d56363cbe8fead8d53167ebd"
integrity sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==
dependencies:
prop-types "^15.7.2"
yargs "^16.1.1"
react-native@^0.70.6:
version "0.70.6" version "0.70.6"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.6.tgz#d692f8b51baffc28e1a8bc5190cdb779de937aa8" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.6.tgz#d692f8b51baffc28e1a8bc5190cdb779de937aa8"
integrity sha512-xtQdImPHnwgraEx3HIZFOF+D1hJ9bC5mfpIdUGoMHRws6OmvHAjmFpO6qfdnaQ29vwbmZRq7yf14sbury74R/w== integrity sha512-xtQdImPHnwgraEx3HIZFOF+D1hJ9bC5mfpIdUGoMHRws6OmvHAjmFpO6qfdnaQ29vwbmZRq7yf14sbury74R/w==
...@@ -6853,6 +6888,15 @@ wrap-ansi@^6.2.0: ...@@ -6853,6 +6888,15 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0" string-width "^4.1.0"
strip-ansi "^6.0.0" strip-ansi "^6.0.0"
wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrappy@1: wrappy@1:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
...@@ -6909,6 +6953,11 @@ y18n@^4.0.0: ...@@ -6909,6 +6953,11 @@ y18n@^4.0.0:
resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf" resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ== integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
y18n@^5.0.5:
version "5.0.8"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
yallist@^3.0.2: yallist@^3.0.2:
version "3.1.1" version "3.1.1"
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
...@@ -6927,6 +6976,11 @@ yargs-parser@^18.1.2: ...@@ -6927,6 +6976,11 @@ yargs-parser@^18.1.2:
camelcase "^5.0.0" camelcase "^5.0.0"
decamelize "^1.2.0" decamelize "^1.2.0"
yargs-parser@^20.2.2:
version "20.2.9"
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1: yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1:
version "15.4.1" version "15.4.1"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
...@@ -6944,6 +6998,19 @@ yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1: ...@@ -6944,6 +6998,19 @@ yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1:
y18n "^4.0.0" y18n "^4.0.0"
yargs-parser "^18.1.2" yargs-parser "^18.1.2"
yargs@^16.1.1:
version "16.2.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
dependencies:
cliui "^7.0.2"
escalade "^3.1.1"
get-caller-file "^2.0.5"
require-directory "^2.1.1"
string-width "^4.2.0"
y18n "^5.0.5"
yargs-parser "^20.2.2"
yocto-queue@^0.1.0: yocto-queue@^0.1.0:
version "0.1.0" version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
......
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