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 = () => {
name="AddItemScreen"
component={AddItemScreen}
options={{
title: 'List name',
title: 'Add new item',
headerStyle: {
backgroundColor: 'white',
},
......
screens/AddItemScreen/index.js
View file @ 2db00341
......@@ -4,94 +4,316 @@ import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen';
import ItemScreen from '../ItemScreen';
const plusbutton = require('../../images/plusbutton.png');
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');
const AddItemScreen = ({navigation}) => {
const [addImageModalVisible, setAddImageModalVisible] = useState(false);
const AddImageModal = () => {
if(addImageModalVisible){
return(
<View
style={{
flex:1,
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'center',
flexDirection:'column'
}}>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-SemiBold',
color:'gray'
}}>
What do you need to buy?
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-Light',
color:'gray',
marginTop:10,
}}>
Tap + button to start adding products
</Text>
<TouchableOpacity
style={{
// backgroundColor:'red',
elevation:7,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
position:'absolute',
borderRadius:100,
right:24,
bottom:24
}}
// onPress={() =>
// setAddModalVisible(true)
// }
>
<View
style={{
backgroundColor: '#0077eb',
width:130,
height: 50,
flexDirection:'row',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
borderRadius:100
}}>
<MaterialCommunityIcons
name="plus"
size={25}
color='white'
/>
<Modal
animationType="none"
transparent={true}
visible={addImageModalVisible}
onRequestClose={() =>{
setAddImageModalVisible(!addImageModalVisible);
}}
>
<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={() => setAddImageModalVisible(false)}
/>
<View
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
style={{
marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}>
<Ionicons
name="camera"
size={30}
color="#838383"
/>
<Text
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
style={{
alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:18,
color:'white',
alignSelf:'center',
marginTop:5,
marginHorizontal:5
}}>
ADD ITEM
</Text>
</View>
</TouchableOpacity>
</View>
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
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({
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;
\ No newline at end of file
screens/ItemScreen/index.js
View file @ 2db00341
......@@ -4,94 +4,239 @@ import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen';
import AddItemScreen from '../AddItemScreen';
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 deletebutton = require ('../../images/deletebutton.png');
const ItemScreen = ({navigation}) => {
return(
<View
style={{
flex:1,
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'center',
flexDirection:'column'
const [addItemVisible, setAddItemVisible] = useState(false);
const addItemModal = () => {
if(addItemVisible){
return(
<Modal
animationType='none'
transparent={true}
visible={addItemVisible}
onRequestClose={()=> {
setAddItemVisible(!addItemVisible)
}}>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-SemiBold',
color:'gray'
<View
style={{
height:'100%',
width:'100%',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center',
alignItems:'center'
}}>
What do you need to buy?
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-Light',
color:'gray',
marginTop:10,
}}>
Tap + button to start adding products
</Text>
<TouchableOpacity
style={{
// backgroundColor:'red',
elevation:7,
justifyContent:'center',
alignItems:'center',
alignContent:'center',
position:'absolute',
borderRadius:100,
right:24,
bottom:24
}}
// onPress={() =>
// setAddModalVisible(true)
// }
>
<View
style={{
backgroundColor: '#0077eb',
width:130,
height: 50,
flexDirection:'row',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
borderRadius:100
}}>
<MaterialCommunityIcons
name="plus"
size={25}
color='white'
/>
<TouchableOpacity
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
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={{
alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:18,
color:'white',
alignSelf:'center',
marginTop:5,
marginHorizontal:5
}}>
ADD ITEM
</Text>
</View>
</TouchableOpacity>
fontSize:20,
color:'black',
marginTop:5
}}>
Rename
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
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>
);
};
const styles = StyleSheet.create({
container:{
backgroundColor:'white',
flex:1,
},
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;
\ No newline at end of file
screens/ListScreen/index.js
View file @ 2db00341
......@@ -572,7 +572,7 @@ const listItemView = ( item ) => (
style={{
height:'100%',
width:'100%',
// backgroundColor:'rgba(192,192,192,0.8)',
backgroundColor:'rgba(192,192,192,0.8)',
justifyContent:'center',
alignItems:'center'
}}>
......@@ -587,60 +587,75 @@ const listItemView = ( item ) => (
onPress={() => setManageListModalVisible(false)}
/>
<View
style={[styles.manageModalView,{}]}>
<TouchableOpacity
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
style={{
marginHorizontal:40,
flexDirection:'row',
marginTop:20,
}}
onPress={()=> setEditModalVisible(true)}
>
<MaterialCommunityIcons
name="camera"
size={30}
color="#838383"
/>
<Text
style={{
flexDirection:'row',
marginTop:15,
justifyContent:'center',
// width:'100%',
// height:'5%',
// marginHorizontal:50,
}}
onPress={()=>setEditModalVisible(true)}>
<MaterialCommunityIcons
name="pencil"
size={28}
color='grey'
/>
<Text
style={{
fontSize:20,
fontFamily:'Poppins-Regular',
color:'black',
textAlignVertical:'center',
marginHorizontal:25,
}}>
Rename
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flexDirection:'row',
marginTop:20,
justifyContent:'center',
marginRight:10
// width:'100%',
// height:'5%',
// marginHorizontal:10
}}
onPress={()=>setDeleteModalVisible(true)}>
<MaterialCommunityIcons
name="delete"
size={28}
color='#c60000'
/>
<Text
style={{
fontSize:20,
fontFamily:'Poppins-Regular',
color:'#c60000',
marginHorizontal:25,
}}>
Delete
</Text>
</TouchableOpacity>
alignSelf:'center',
textAlignVertical:'center',
marginHorizontal:30,
fontFamily:'Poppins-Regular',
fontSize:20,
color:'black',
marginTop:5
}}>
Rename
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
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>
......@@ -703,24 +718,28 @@ const listItemView = ( item ) => (
}}>
<View
style={{
backgroundColor:'white',
borderRadius:7,
backgroundColor:'#ededed',
borderRadius:9,
width:275,
height:50,
marginHorizontal:19,
marginTop:10,
elevation:8,
borderWidth:0.2,
borderColor:'white',
// elevation:8,
// borderWidth:0.2,
// borderColor:'white',
justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:5,
fontFamily:'Poppins-Bold',
fontFamily:'Poppins-SemiBold',
alignItems:'center',
textAlignVertical:'top',
width:'100%',
// textAlignVertical:'top',
}}
placeholder="New List"
placeholderTextColor="grey"
......@@ -855,23 +874,27 @@ const EditListModal = () => {
}}>
<View
style={{
backgroundColor:'white',
borderRadius:7,
backgroundColor:'#ededed',
borderRadius:9,
width:275,
height:50,
marginHorizontal:19,
marginTop:10,
elevation:7,
justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:5,
fontFamily:'Poppins-Bold',
fontFamily:'Poppins-SemiBold',
alignItems:'center',
textAlignVertical:'top',
width:'100%'
}}
// placeholder="New List"
placeholder="Rename List"
placeholderTextColor="grey"
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