Skip to content

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

Add new screen

parent 4aa41b36
Show whitespace changes
Inline Side-by-side
Showing with 522 additions and 130 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(
<Modal
animationType="none"
transparent={true}
visible={addImageModalVisible}
onRequestClose={() =>{
setAddImageModalVisible(!addImageModalVisible);
}}
>
<View <View
style={{ style={{
flex:1, height:'100%',
width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', justifyContent:'center',
alignContent:'center', alignItems:'center'
alignItems:'center', }}>
alignSelf:'center', <TouchableOpacity
flexDirection:'column' style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress={() => setAddImageModalVisible(false)}
/>
<View
style={{
backgroundColor:'white',
width:"100%",
height:200,
justifyContent:'flex-start',
position:'absolute',
bottom:0,
borderRadius:15,
}}> }}>
<Text <Text
style={{ style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-SemiBold', fontFamily:'Poppins-SemiBold',
color:'gray' fontSize:20,
color:'black',
alignSelf:'center',
marginTop:20
}}> }}>
What do you need to buy? Photo
</Text> </Text>
<TouchableOpacity
style={{
marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}>
<Ionicons
name="camera"
size={30}
color="#838383"
/>
<Text <Text
style={{ style={{
fontSize: 20, alignSelf:'center',
textAlign: 'center', textAlignVertical:'center',
fontFamily:'Poppins-Light', marginHorizontal:30,
color:'gray', fontFamily:'Poppins-Regular',
marginTop:10, fontSize:20,
color:'black',
marginTop:5
}}> }}>
Tap + button to start adding products Take a photo
</Text> </Text>
</TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={{ style={{
// backgroundColor:'red', marginHorizontal:40,
elevation:7, flexDirection:'row',
justifyContent:'center', marginTop:20,
alignItems:'center', }}>
alignContent:'center', <Ionicons
position:'absolute', name="md-images"
borderRadius:100, size={30}
right:24, color="#838383"
bottom:24 />
}} <Text
// onPress={() => style={{
// setAddModalVisible(true) alignSelf:'center',
// } textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:20,
color:'black',
marginTop:5
}}>
Pick from gallery
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
)
}
}
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 <View
style={{ style={{
backgroundColor: '#0077eb',
width:130,
height: 50,
flexDirection:'row',
justifyContent:'center', justifyContent:'center',
alignContent:'center', alignContent:'center',
alignItems:'center', alignItems:'center',
borderRadius:100 alignSelf:'center'
}}> }}>
<MaterialCommunityIcons <InputSpinner
name="plus" // value={quantity}
size={25} 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' 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 <Text
style={{ style={{
fontFamily:'Poppins-Regular', fontSize:20,
fontSize:18,
color:'white', color:'white',
alignSelf:'center', alignItems:'center',
marginTop:5, alignContent:'center',
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
CANCEL
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5 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,
}}> }}>
ADD ITEM <Text
style={{
fontSize:20,
color:'white',
fontFamily:'Poppins-Medium'
}}>
SAVE
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </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}) => {
const [addItemVisible, setAddItemVisible] = useState(false);
const addItemModal = () => {
if(addItemVisible){
return( return(
<Modal
animationType='none'
transparent={true}
visible={addItemVisible}
onRequestClose={()=> {
setAddItemVisible(!addItemVisible)
}}>
<View <View
style={{ style={{
flex:1, height:'100%',
width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center', justifyContent:'center',
alignContent:'center', alignItems:'center'
alignItems:'center', }}>
alignSelf:'center', <TouchableOpacity
flexDirection:'column' style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress ={()=> setAddItemVisible(false)}
/>
<View
style={{backgroundColor:'white',
width:"90%",
height:300,
justifyContent:'flex-start',
// position:'absolute',
// bottom:0,
borderRadius:20,
}}> }}>
<Text <Text
style={{ style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-SemiBold', fontFamily:'Poppins-SemiBold',
color:'gray' fontSize:20,
color:'black',
alignSelf:'center',
marginTop:20
}}> }}>
What do you need to buy? Photo
</Text> </Text>
<TouchableOpacity
style={{
marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}
onPress={()=> setEditModalVisible(true)}
>
<MaterialCommunityIcons
name="camera"
size={30}
color="#838383"
/>
<Text <Text
style={{ style={{
fontSize: 20, alignSelf:'center',
textAlign: 'center', textAlignVertical:'center',
fontFamily:'Poppins-Light', marginHorizontal:30,
color:'gray', fontFamily:'Poppins-Regular',
marginTop:10, fontSize:20,
color:'black',
marginTop:5
}}> }}>
Tap + button to start adding products Rename
</Text> </Text>
</TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={{ style={{
// backgroundColor:'red', marginHorizontal:40,
elevation:7, flexDirection:'row',
justifyContent:'center', marginTop:20,
alignItems:'center',
alignContent:'center',
position:'absolute',
borderRadius:100,
right:24,
bottom:24
}} }}
// onPress={() => onPress={()=>setDeleteModalVisible(true)}
// setAddModalVisible(true)
// }
> >
<View
style={{
backgroundColor: '#0077eb',
width:130,
height: 50,
flexDirection:'row',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
borderRadius:100
}}>
<MaterialCommunityIcons <MaterialCommunityIcons
name="plus" name="delete"
size={25} size={30}
color='white' color="#c60000"
/> />
<Text <Text
style={{ style={{
fontFamily:'Poppins-Regular',
fontSize:18,
color:'white',
alignSelf:'center', alignSelf:'center',
marginTop:5, textAlignVertical:'center',
marginHorizontal:5 marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:20,
color:'#c60000',
marginTop:5
}}> }}>
ADD ITEM Delete
</Text> </Text>
</TouchableOpacity>
</View> </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> </TouchableOpacity>
</View> </View>
<TouchableOpacity style={{backgroundColor:'red', width:50, height:50, borderRadius:100}}
// onPress={() => navigation.navigate('AddItemScreen')}
onPress={() => setAddItemVisible(true)}
></TouchableOpacity>
{addItemModal()}
</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,56 +587,71 @@ const listItemView = ( item ) => ( ...@@ -587,56 +587,71 @@ const listItemView = ( item ) => (
onPress={() => setManageListModalVisible(false)} onPress={() => setManageListModalVisible(false)}
/> />
<View <View
style={[styles.manageModalView,{}]}> style={{backgroundColor:'white',
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 <TouchableOpacity
style={{ style={{
marginHorizontal:40,
flexDirection:'row', flexDirection:'row',
marginTop:15, marginTop:20,
justifyContent:'center',
// width:'100%',
// height:'5%',
// marginHorizontal:50,
}} }}
onPress={()=>setEditModalVisible(true)}> onPress={()=> setEditModalVisible(true)}
>
<MaterialCommunityIcons <MaterialCommunityIcons
name="pencil" name="camera"
size={28} size={30}
color='grey' color="#838383"
/> />
<Text <Text
style={{ style={{
fontSize:20, alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular', fontFamily:'Poppins-Regular',
fontSize:20,
color:'black', color:'black',
textAlignVertical:'center', marginTop:5
marginHorizontal:25,
}}> }}>
Rename Rename
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={{ style={{
marginHorizontal:40,
flexDirection:'row', flexDirection:'row',
marginTop:20, marginTop:20,
justifyContent:'center',
marginRight:10
// width:'100%',
// height:'5%',
// marginHorizontal:10
}} }}
onPress={()=>setDeleteModalVisible(true)}> onPress={()=>setDeleteModalVisible(true)}
>
<MaterialCommunityIcons <MaterialCommunityIcons
name="delete" name="delete"
size={28} size={30}
color='#c60000' color="#c60000"
/> />
<Text <Text
style={{ style={{
fontSize:20, alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular', fontFamily:'Poppins-Regular',
fontSize:20,
color:'#c60000', color:'#c60000',
marginHorizontal:25, marginTop:5
}}> }}>
Delete Delete
</Text> </Text>
...@@ -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