Skip to content

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

Add new screen

parent 4aa41b36
Hide whitespace changes
Inline Side-by-side
Showing with 603 additions and 211 deletions
App.js
View file @ 2db00341
...@@ -46,7 +46,7 @@ const App = () => { ...@@ -46,7 +46,7 @@ const App = () => {
name="AddItemScreen" name="AddItemScreen"
component={AddItemScreen} component={AddItemScreen}
options={{ options={{
title: 'List name', title: 'Add new item',
headerStyle: { headerStyle: {
backgroundColor: 'white', backgroundColor: 'white',
}, },
......
screens/AddItemScreen/index.js
View file @ 2db00341
...@@ -4,94 +4,316 @@ import { openDatabase } from 'react-native-sqlite-storage'; ...@@ -4,94 +4,316 @@ import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner'; import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen'; import ListScreen from '../ListScreen';
import ItemScreen from '../ItemScreen'; import ItemScreen from '../ItemScreen';
const plusbutton = require('../../images/plusbutton.png'); const plusbutton = require('../../images/plusbutton.png');
// const editbutton = require('../../images/editbutton.png'); // const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png'); // const deletebutton = require ('../../images/deletebutton.png');
const AddItemScreen = ({navigation}) => { const AddItemScreen = ({navigation}) => {
const [addImageModalVisible, setAddImageModalVisible] = useState(false);
const AddImageModal = () => {
if(addImageModalVisible){
return( return(
<View <Modal
style={{ animationType="none"
flex:1, transparent={true}
justifyContent:'center', visible={addImageModalVisible}
alignContent:'center', onRequestClose={() =>{
alignItems:'center', setAddImageModalVisible(!addImageModalVisible);
alignSelf:'center', }}
flexDirection:'column' >
}}> <View
<Text style={{
style={{ height:'100%',
fontSize: 20, width:'100%',
textAlign: 'center', backgroundColor:'rgba(192,192,192,0.8)',
fontFamily:'Poppins-SemiBold', justifyContent:'center',
color:'gray' alignItems:'center'
}}> }}>
What do you need to buy? <TouchableOpacity
</Text> style={{
<Text height:'100%',
style={{ width:'100%',
fontSize: 20, position:'absolute',
textAlign: 'center', top:0,
fontFamily:'Poppins-Light', flex:1
color:'gray', }}
marginTop:10, onPress={() => setAddImageModalVisible(false)}
}}> />
Tap + button to start adding products <View
</Text> style={{
<TouchableOpacity backgroundColor:'white',
style={{ width:"100%",
// backgroundColor:'red', height:200,
elevation:7, justifyContent:'flex-start',
justifyContent:'center', position:'absolute',
alignItems:'center', bottom:0,
alignContent:'center', borderRadius:15,
position:'absolute', }}>
borderRadius:100, <Text
right:24, style={{
bottom:24 fontFamily:'Poppins-SemiBold',
}} fontSize:20,
// onPress={() => color:'black',
// setAddModalVisible(true) alignSelf:'center',
// } marginTop:20
> }}>
<View Photo
style={{ </Text>
backgroundColor: '#0077eb', <TouchableOpacity
width:130, style={{
height: 50, marginHorizontal:40,
flexDirection:'row', flexDirection:'row',
justifyContent:'center', marginTop:20,
alignContent:'center', }}>
alignItems:'center', <Ionicons
borderRadius:100 name="camera"
}}> size={30}
<MaterialCommunityIcons color="#838383"
name="plus" />
size={25} <Text
color='white' style={{
/> alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:20,
color:'black',
marginTop:5
}}>
Take a photo
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}>
<Ionicons
name="md-images"
size={30}
color="#838383"
/>
<Text <Text
style={{ style={{
alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular', fontFamily:'Poppins-Regular',
fontSize:18, fontSize:20,
color:'white', color:'black',
alignSelf:'center', marginTop:5
marginTop:5, }}>
marginHorizontal:5 Pick from gallery
}}> </Text>
ADD ITEM </TouchableOpacity>
</Text> </View>
</View> </View>
</TouchableOpacity> </Modal>
</View> )
}
}
return(
<View
style={
styles.container
}>
<TouchableOpacity
style={
styles.cameraContainer
}
onPress={() => setAddImageModalVisible(true)}
>
<Ionicons
name="camera"
size={30}
color="#838383"
/>
</TouchableOpacity>
<View
style={
styles.imageContainer
}>
</View>
<View
style={
styles.itemContainer
}>
<TextInput
style={
styles.textItem
}
placeholder="Butter"
//placeholderTextColor="grey"
>
</TextInput>
</View>
<View
style={
styles.quantityContainer
}>
<View
style={{
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'center'
}}>
<InputSpinner
// value={quantity}
min={0}
max={100}
step={1}
// onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
rounded
// showBorder skin='default'
textColor='black'
fontSize={20}
fontFamily="Poppins-Regular"
colorMin='white'
colorMax='white'
buttonTextColor='dodgerblue'
colorPress="dodgerblue"
color='white'
width={320}
height={50}
/>
</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',
marginTop:50,
}}>
<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',
marginTop:50,
}}>
<Text
style={{
fontSize:20,
color:'white',
fontFamily:'Poppins-Medium'
}}>
SAVE
</Text>
</View>
</TouchableOpacity>
</View>
{AddImageModal()}
</View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
itemCard:{ container:{
backgroundColor:'white',
flex:1,
},
cameraContainer:{
left:350,
marginTop:30,
},
imageContainer:{
width:200,
height:200,
backgroundColor:'white',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'center',
borderRadius:9,
elevation:7,
marginTop:20,
},
itemContainer:{
width:360,
height:60,
backgroundColor:'#ededed',
justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
borderRadius:9,
// elevation:7,
marginTop:50,
},
textItem:{
fontFamily:'Poppins-SemiBold',
fontSize:20,
color:'black',
marginHorizontal:20,
width:'100%',
marginTop:5,
},
quantityContainer:{
width:360,
height:60,
backgroundColor:'#ededed',
justifyContent:'center',
alignContent:'center',
alignItems:'flex-start',
alignSelf:'flex-start',
borderRadius:9,
// elevation:7,
marginTop:30,
marginHorizontal:16,
}, },
}); });
export default AddItemScreen; export default AddItemScreen;
\ No newline at end of file
screens/ItemScreen/index.js
View file @ 2db00341
...@@ -4,94 +4,239 @@ import { openDatabase } from 'react-native-sqlite-storage'; ...@@ -4,94 +4,239 @@ import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner'; import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen'; import ListScreen from '../ListScreen';
import AddItemScreen from '../AddItemScreen'; import AddItemScreen from '../AddItemScreen';
const plusbutton = require('../../images/plusbutton.png'); const plusbutton = require('../../images/plusbutton.png');
const tick = require('../../images/tick.png');
const oil = require('../../images/oil.png');
const cat = require('../../images/cat.jpg');
// const editbutton = require('../../images/editbutton.png'); // const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png'); // const deletebutton = require ('../../images/deletebutton.png');
const ItemScreen = ({navigation}) => { const ItemScreen = ({navigation}) => {
return( const [addItemVisible, setAddItemVisible] = useState(false);
<View const addItemModal = () => {
style={{ if(addItemVisible){
flex:1, return(
justifyContent:'center', <Modal
alignContent:'center', animationType='none'
alignItems:'center', transparent={true}
alignSelf:'center', visible={addItemVisible}
flexDirection:'column' onRequestClose={()=> {
setAddItemVisible(!addItemVisible)
}}> }}>
<Text <View
style={{ style={{
fontSize: 20, height:'100%',
textAlign: 'center', width:'100%',
fontFamily:'Poppins-SemiBold', backgroundColor:'rgba(192,192,192,0.8)',
color:'gray' justifyContent:'center',
alignItems:'center'
}}> }}>
What do you need to buy? <TouchableOpacity
</Text> style={{
<Text height:'100%',
style={{ width:'100%',
fontSize: 20, position:'absolute',
textAlign: 'center', top:0,
fontFamily:'Poppins-Light', flex:1
color:'gray', }}
marginTop:10, onPress ={()=> setAddItemVisible(false)}
}}> />
Tap + button to start adding products <View
</Text> style={{backgroundColor:'white',
<TouchableOpacity width:"90%",
style={{ height:300,
// backgroundColor:'red', justifyContent:'flex-start',
elevation:7, // position:'absolute',
justifyContent:'center', // bottom:0,
alignItems:'center', borderRadius:20,
alignContent:'center', }}>
position:'absolute', <Text
borderRadius:100, style={{
right:24, fontFamily:'Poppins-SemiBold',
bottom:24 fontSize:20,
}} color:'black',
// onPress={() => alignSelf:'center',
// setAddModalVisible(true) marginTop:20
// } }}>
> Photo
<View </Text>
style={{ <TouchableOpacity
backgroundColor: '#0077eb', style={{
width:130, marginHorizontal:40,
height: 50, flexDirection:'row',
flexDirection:'row', marginTop:20,
justifyContent:'center', }}
alignContent:'center', onPress={()=> setEditModalVisible(true)}
alignItems:'center', >
borderRadius:100 <MaterialCommunityIcons
}}> name="camera"
<MaterialCommunityIcons size={30}
name="plus" color="#838383"
size={25} />
color='white'
/>
<Text <Text
style={{ style={{
alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular', fontFamily:'Poppins-Regular',
fontSize:18, fontSize:20,
color:'white', color:'black',
alignSelf:'center', marginTop:5
marginTop:5, }}>
marginHorizontal:5 Rename
}}> </Text>
ADD ITEM </TouchableOpacity>
</Text> <TouchableOpacity
</View> style={{
</TouchableOpacity> marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}
onPress={()=>setDeleteModalVisible(true)}
>
<MaterialCommunityIcons
name="delete"
size={30}
color="#c60000"
/>
<Text
style={{
alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:20,
color:'#c60000',
marginTop:5
}}>
Delete
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
)
}
}
return(
<View
style={
styles.container
}>
<View
style={
styles.itemCard
}>
<TouchableOpacity
style={
styles.checkContainer
}>
<Ionicons
name="checkmark"
color="dodgerblue"
size={20}
/>
</TouchableOpacity>
<Text
style={[
styles.textList,
{color:'black',
width:'55%'
}
]}>
Sunflower oil
</Text>
<Text
style={[
styles.textList,
{color:'black',
width:'7%',
}
]}>
10
</Text>
<TouchableOpacity
style={
styles.imageCointainer
}>
<Image
style={{
width:50,
height:50,
borderRadius:100
}}
source={oil}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent:'center',
alignItems:'center',
alignContent:'center',
right:2,
}}>
<MaterialIcons
name="more-vert"
color="grey"
size={30}
/>
</TouchableOpacity>
</View>
<TouchableOpacity style={{backgroundColor:'red', width:50, height:50, borderRadius:100}}
// onPress={() => navigation.navigate('AddItemScreen')}
onPress={() => setAddItemVisible(true)}
></TouchableOpacity>
{addItemModal()}
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{
backgroundColor:'white',
flex:1,
},
itemCard:{ itemCard:{
backgroundColor:'white',
width:'100%',
height:70,
elevation:7,
marginTop:5,
flexDirection:'row',
},
textList:{
fontFamily:'Poppins-SemiBold',
fontSize:15,
textAlignVertical:'center',
},
checkContainer:{
backgroundColor:'white',
borderRadius:100,
borderWidth:2,
borderColor:'dodgerblue',
height:25,
width:25,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
marginHorizontal:15,
marginTop:22,
},
imageCointainer:{
width:60,
height:60,
borderRadius:100,
borderColor:'white',
borderWidth:0.1,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
marginTop:5,
}, },
}); });
export default ItemScreen; export default ItemScreen;
\ No newline at end of file
screens/ListScreen/index.js
View file @ 2db00341
...@@ -572,7 +572,7 @@ const listItemView = ( item ) => ( ...@@ -572,7 +572,7 @@ const listItemView = ( item ) => (
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'
}}> }}>
...@@ -587,60 +587,75 @@ const listItemView = ( item ) => ( ...@@ -587,60 +587,75 @@ const listItemView = ( item ) => (
onPress={() => setManageListModalVisible(false)} onPress={() => setManageListModalVisible(false)}
/> />
<View <View
style={[styles.manageModalView,{}]}> style={{backgroundColor:'white',
<TouchableOpacity width:"100%",
height:200,
justifyContent:'flex-start',
position:'absolute',
bottom:0,
borderRadius:15,}}>
<Text
style={{
fontFamily:'Poppins-SemiBold',
fontSize:20,
color:'black',
alignSelf:'center',
marginTop:20
}}>
Photo
</Text>
<TouchableOpacity
style={{
marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}
onPress={()=> setEditModalVisible(true)}
>
<MaterialCommunityIcons
name="camera"
size={30}
color="#838383"
/>
<Text
style={{ style={{
flexDirection:'row', alignSelf:'center',
marginTop:15, textAlignVertical:'center',
justifyContent:'center', marginHorizontal:30,
// width:'100%', fontFamily:'Poppins-Regular',
// height:'5%', fontSize:20,
// marginHorizontal:50, color:'black',
}} marginTop:5
onPress={()=>setEditModalVisible(true)}> }}>
<MaterialCommunityIcons Rename
name="pencil" </Text>
size={28} </TouchableOpacity>
color='grey' <TouchableOpacity
/> style={{
<Text marginHorizontal:40,
style={{ flexDirection:'row',
fontSize:20, marginTop:20,
fontFamily:'Poppins-Regular', }}
color:'black', onPress={()=>setDeleteModalVisible(true)}
textAlignVertical:'center', >
marginHorizontal:25, <MaterialCommunityIcons
}}> name="delete"
Rename size={30}
</Text> color="#c60000"
</TouchableOpacity> />
<Text
<TouchableOpacity style={{
style={{ alignSelf:'center',
flexDirection:'row', textAlignVertical:'center',
marginTop:20, marginHorizontal:30,
justifyContent:'center', fontFamily:'Poppins-Regular',
marginRight:10 fontSize:20,
// width:'100%', color:'#c60000',
// height:'5%', marginTop:5
// marginHorizontal:10 }}>
}} Delete
onPress={()=>setDeleteModalVisible(true)}> </Text>
<MaterialCommunityIcons </TouchableOpacity>
name="delete"
size={28}
color='#c60000'
/>
<Text
style={{
fontSize:20,
fontFamily:'Poppins-Regular',
color:'#c60000',
marginHorizontal:25,
}}>
Delete
</Text>
</TouchableOpacity>
</View> </View>
</View> </View>
</Modal> </Modal>
...@@ -703,24 +718,28 @@ const listItemView = ( item ) => ( ...@@ -703,24 +718,28 @@ const listItemView = ( item ) => (
}}> }}>
<View <View
style={{ style={{
backgroundColor:'white', backgroundColor:'#ededed',
borderRadius:7, borderRadius:9,
width:275, width:275,
height:50, height:50,
marginHorizontal:19, marginHorizontal:19,
marginTop:10, marginTop:10,
elevation:8, // elevation:8,
borderWidth:0.2, // borderWidth:0.2,
borderColor:'white', // borderColor:'white',
justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
}}> }}>
<TextInput <TextInput
style={{ style={{
fontSize:20, fontSize:20,
marginHorizontal:5, marginHorizontal:5,
fontFamily:'Poppins-Bold', fontFamily:'Poppins-SemiBold',
alignItems:'center', alignItems:'center',
textAlignVertical:'top', width:'100%',
// textAlignVertical:'top',
}} }}
placeholder="New List" placeholder="New List"
placeholderTextColor="grey" placeholderTextColor="grey"
...@@ -855,23 +874,27 @@ const EditListModal = () => { ...@@ -855,23 +874,27 @@ const EditListModal = () => {
}}> }}>
<View <View
style={{ style={{
backgroundColor:'white', backgroundColor:'#ededed',
borderRadius:7, borderRadius:9,
width:275, width:275,
height:50, height:50,
marginHorizontal:19, marginHorizontal:19,
marginTop:10, marginTop:10,
elevation:7, justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
}}> }}>
<TextInput <TextInput
style={{ style={{
fontSize:20, fontSize:20,
marginHorizontal:5, marginHorizontal:5,
fontFamily:'Poppins-Bold', fontFamily:'Poppins-SemiBold',
alignItems:'center', alignItems:'center',
textAlignVertical:'top', textAlignVertical:'top',
width:'100%'
}} }}
// placeholder="New List" placeholder="Rename List"
placeholderTextColor="grey" placeholderTextColor="grey"
onChangeText={(name) => setName(name)} onChangeText={(name) => setName(name)}
......
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