Browse Source

Upload files to ''

Última entrega. Incluye pantallas de insert de Laura y pantallas de display de Coral.  La última vez que se corrieron, todo corrió bien.  Para ver cuál fue el resultado, baje el app Expo y siga este enlace: https://expo.io/@coralsalort/projects/GroceryPolice_Final. Aún las pantallas no se hacen display solas, hay que retroceder y volver a la pantalla para ver reflejado cualquier insert.
coral.salort 3 years ago
parent
commit
b4cfec00ab
5 changed files with 857 additions and 0 deletions
  1. 131
    0
      ListInput.js
  2. 163
    0
      Listas.js
  3. 352
    0
      ProductInput.js
  4. 176
    0
      Productos.js
  5. 35
    0
      homeStack.js

+ 131
- 0
ListInput.js View File

@@ -0,0 +1,131 @@
1
+import React, { Component } from 'react';
2
+
3
+import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from 'react-native';
4
+
5
+export default class Lists extends Component {
6
+
7
+  constructor(props) {
8
+    // const {navigation,route}=props
9
+    // const {uid} = route.params;
10
+
11
+    super(props)
12
+
13
+    this.state = {
14
+      name_l: '',
15
+      store: '',
16
+      lid: '',
17
+	    uid: this.props.navigation.getParam('uid')
18
+    }
19
+  }
20
+
21
+  insertList_Function = () => {
22
+
23
+    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_l.php', {
24
+      method: 'POST',
25
+      headers: {
26
+        'Accept': 'application/json',
27
+        'Content-Type': 'application/json',
28
+      },
29
+      body: JSON.stringify({
30
+
31
+        name_l: this.state.name_l,
32
+
33
+        store: this.state.store,
34
+		
35
+		    uid: this.state.uid,
36
+
37
+      })
38
+
39
+    }).then((response) => response.json())
40
+      .then((responseJson) => {
41
+        // Showing response message coming from server after inserting records.
42
+      Alert.alert("Status",responseJson, [
43
+              {
44
+                  text: 'Cancel',
45
+                  style: 'cancel'
46
+                },
47
+                { text: 'OK', onPress:() => this.props.navigation.navigate('Lists') }
48
+              ],
49
+              { cancelable: false }
50
+            );
51
+      
52
+      });
53
+
54
+
55
+  }
56
+
57
+  render() {
58
+    return (
59
+
60
+      <View style={styles.MainContainer}>
61
+
62
+        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>List Form</Text>
63
+
64
+		 <TextInput
65
+          placeholder="Name the list!"
66
+          onChangeText={data => this.setState({ name_l: data })}
67
+          underlineColorAndroid='transparent'
68
+          style={styles.TextInputStyleClass}
69
+        />
70
+        
71
+        <TextInput
72
+          placeholder="Where are you using this list?"
73
+          onChangeText={data => this.setState({ store: data })}
74
+          underlineColorAndroid='transparent'
75
+          style={styles.TextInputStyleClass}
76
+        />
77
+		
78
+
79
+
80
+
81
+        <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >
82
+
83
+          <Text style={styles.text}>+</Text>
84
+        </TouchableOpacity>
85
+		<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your lists </Text>
86
+      </View>
87
+
88
+    );
89
+  }
90
+}
91
+
92
+const styles = StyleSheet.create({
93
+
94
+  MainContainer: {
95
+
96
+    justifyContent: 'center',
97
+    alignItems: 'center',
98
+    flex: 1,
99
+    margin: 10
100
+  },
101
+
102
+  TextInputStyleClass: {
103
+
104
+    textAlign: 'center',
105
+    marginBottom: 7,
106
+    height: 40,
107
+    width: '80%',
108
+    borderWidth: 1,
109
+    borderColor: '#3414B3',
110
+    borderRadius: 5,
111
+  },
112
+
113
+  button: {
114
+	  height:50,
115
+    width: 50,
116
+    paddingTop: 2,
117
+    paddingBottom: 2,
118
+    backgroundColor: '#3414B3',
119
+    borderRadius: 100,
120
+    marginTop: 20,
121
+    alignItems: 'center'
122
+  },
123
+
124
+  text: {
125
+    color: '#fff',
126
+    fontSize: 35,
127
+    textAlign: 'center',
128
+    padding: 0
129
+  }
130
+
131
+});

+ 163
- 0
Listas.js View File

@@ -0,0 +1,163 @@
1
+import { StatusBar } from 'expo-status-bar';
2
+import 'react-native-gesture-handler';
3
+import { useEffect, useState } from 'react';
4
+import React from 'react';
5
+import { StyleSheet, Text, View, Image, ImageBackground, Button, TouchableOpacity, Platform, Alert, FlatList} from 'react-native';
6
+import { ScrollView } from 'react-native-gesture-handler';
7
+
8
+TouchableOpacity.defaultProps = { activeOpacity: 0.8 };
9
+
10
+export default function Listas({ navigation }) {
11
+  
12
+  const [data, setData] = useState([]);
13
+  useEffect(() => {
14
+    fetch('https://ada.uprrp.edu/~victor.hernandez17/groceryPolice/viewUserLists.php', {
15
+      method: 'POST',
16
+      mode: 'no-cors',
17
+      headers: {
18
+        Accept: 'application/json',
19
+        'Content-Type': 'application/json'
20
+      },
21
+      body: JSON.stringify({
22
+        uid: 1234
23
+      })
24
+    })
25
+    .then((response) => response.json())
26
+    .then((json) => {
27
+      setData(json);
28
+      console.log(json);
29
+
30
+    })
31
+    .catch((error) => {
32
+      console.error(error);
33
+    });
34
+  }, []);
35
+
36
+
37
+  return (
38
+    <View style = {styles.container} >
39
+      <View style = {styles.pageTitleView}>
40
+        <Text style = {styles.pageTitleText}> Lists </Text>
41
+      </View>
42
+      <View style = {styles.contents}>
43
+        <ScrollView style = {styles.scrollView}>
44
+          <FlatList
45
+            data={data}
46
+            keyExtractor={(list) => list.id}
47
+            renderItem={({ item }) => (
48
+              <TouchableOpacity style={styles.listCards} onPress={() => navigation.navigate('Products', item)} >
49
+                <Text key={item.lid} style={styles.listText}>{item.name_l}</Text>
50
+              </TouchableOpacity>
51
+            )}
52
+          />
53
+        </ScrollView>
54
+      </View>
55
+      <View style = {styles.contentsPlus}>
56
+        <TouchableOpacity style={styles.plusButton} onPress={() => navigation.navigate('NewList', { uid: '1234' })}>
57
+          <Text style={styles.plusText}>+</Text>
58
+        </TouchableOpacity>
59
+      </View>
60
+    </View>
61
+    );
62
+ };
63
+
64
+ // STYLING
65
+
66
+const styles = StyleSheet.create({
67
+  container: {
68
+    flex: 1,
69
+    backgroundColor: '#2F5597',
70
+  },
71
+
72
+  pageTitleView: {
73
+    flex: 1,
74
+    alignContent: 'flex-end',
75
+    justifyContent:  'flex-end'
76
+  },
77
+
78
+  contents: {
79
+    flex: 2,
80
+  },
81
+
82
+  contentsPlus: {
83
+    flex: 1,
84
+    justifyContent: 'center',
85
+    alignContent: 'center',
86
+    alignItems: 'center'
87
+  },
88
+
89
+  pageTitleText: {
90
+    color: 'white',
91
+    fontSize: 45,
92
+    paddingLeft: 10,
93
+    paddingBottom: 30,
94
+    fontFamily: 'Avenir'
95
+  },
96
+
97
+  listCards: {
98
+    flexDirection: 'row',
99
+    alignContent: 'flex-start',
100
+    justifyContent: 'flex-start',
101
+    alignItems: 'center',
102
+    backgroundColor: 'rgb(32,56,100)',
103
+    width: '99%',
104
+    borderRadius: 10,
105
+    paddingVertical: 20,
106
+    paddingHorizontal: 10,
107
+    marginBottom: 10,
108
+    shadowColor: 'rgba(0,0,0,.5)',
109
+    shadowOffset: { width: 2, height: 2},
110
+    shadowOpacity: 0.3,
111
+  },
112
+
113
+  plusButton: {
114
+    flexDirection: 'row',
115
+    alignContent: 'flex-start',
116
+    justifyContent: 'flex-start',
117
+    alignItems: 'center',
118
+    justifyContent: 'center',
119
+    backgroundColor: 'rgb(255,255,255)',
120
+    width: 90,
121
+    height: 90,
122
+    borderRadius: 45,
123
+    marginBottom: 50,
124
+    shadowColor: 'rgba(0,0,0,.5)',
125
+    shadowOffset: { width: 2, height: 2},
126
+    shadowOpacity: 0.3,
127
+  },
128
+
129
+  plusText: {
130
+    color: 'rgb(32,56,100)',
131
+    fontSize: 60,
132
+    fontWeight: '600',
133
+    fontFamily: 'Avenir'
134
+
135
+  },
136
+
137
+  listText: {
138
+    color: 'white',
139
+    fontSize: 20,
140
+    fontFamily: 'Avenir'
141
+
142
+  },
143
+
144
+  appButtonText: {
145
+    fontSize: 17,
146
+    color: "#fff",
147
+    alignSelf: "center",
148
+  },
149
+
150
+  bContainer: {
151
+    padding: 50,
152
+    paddingTop: -20,
153
+    flex: 2,
154
+    width: '100%',
155
+    justifyContent: "space-evenly",
156
+  },
157
+
158
+  scrollView: {
159
+    backgroundColor: 'transparent',
160
+    marginHorizontal: 20,
161
+  },
162
+
163
+});

+ 352
- 0
ProductInput.js View File

@@ -0,0 +1,352 @@
1
+import React, { Component } from 'react';
2
+import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text, ScrollView, Platform,Picker,SafeAreaView} from 'react-native';
3
+import DatePicker from 'react-native-datepicker';
4
+import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
5
+import Constants from 'expo-constants';
6
+
7
+
8
+export default class Product extends Component {
9
+  
10
+  constructor(props) {
11
+
12
+    super(props)
13
+
14
+    this.state = {
15
+      uid:this.props.navigation.getParam('uid'),
16
+      lid:this.props.navigation.getParam('lid'),
17
+      name_p: '',
18
+	    bought_date:'',
19
+      expiration_date:'',
20
+      iso_date:'',
21
+      i:'',
22
+      typ:'',
23
+      quantity:'',
24
+      notes:'',
25
+      renew:'',
26
+      picked:'no'
27
+
28
+    }
29
+  }
30
+
31
+  insertList_Function = () => {
32
+    this.setState({ picked: "yes" })
33
+    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_p.php', {
34
+      method: 'POST',
35
+      headers: {
36
+        'Accept': 'application/json',
37
+        'Content-Type': 'application/json',
38
+      },
39
+      body: JSON.stringify({
40
+
41
+    name_p: this.state.name_p,
42
+
43
+    lid: this.state.lid,
44
+		
45
+		bought_date:this.state.bought_date,
46
+		
47
+		expiration_date:this.state.expiration_date,
48
+		
49
+		type:this.state.typ,
50
+		
51
+		quantity:this.state.quantity,
52
+		
53
+		renew:this.state.renew,
54
+		
55
+		notes:this.state.notes,
56
+
57
+      })
58
+
59
+    }).then((response) => response.json())
60
+      .then((responseJson) => {
61
+        // Showing response message coming from server after inserting records.
62
+          Alert.alert("Status",responseJson, [
63
+              {
64
+                  text: 'Cancel',
65
+                  style: 'cancel'
66
+                },
67
+                { text: 'OK', onPress:() => this.props.navigation.navigate('Products') }
68
+              ],
69
+              { cancelable: false }
70
+            );
71
+
72
+
73
+
74
+        //navigation.navigate('Landing');
75
+      });
76
+
77
+
78
+  }
79
+
80
+
81
+
82
+setBought=(data)=>{
83
+    this.setState({bought_date:data});
84
+    this.setExpiration;
85
+  }
86
+
87
+setType=(itemValue)=>{ 
88
+  this.setExpiration;
89
+  }
90
+
91
+setExpiration=()=>{
92
+
93
+if(this.state.typ!=='' && this.state.bought_date!=='' ){
94
+  const e_date=new Date(this.state.bought_date);
95
+  //this.setState({e_date: new Date(this.state.bought_date)});
96
+  if(this.state.typ==='fruits'){
97
+      e_date.setDate(e_date.getDate() + 5);
98
+   }
99
+   else if(this.state.typ==='eggs'){
100
+      e_date.setDate(e_date.getDate() + 28);
101
+   }
102
+   else if(this.state.typ==='meats'){
103
+      e_date.setDate(e_date.getDate() + 14);
104
+   }
105
+    else if(this.state.typ==='salads'){
106
+      e_date.setDate(e_date.getDate() + 3);
107
+   }
108
+
109
+   else if(this.state.typ==='poultry'){
110
+      e_date.setDate(e_date.getDate() + 2);
111
+   }
112
+
113
+  else if(this.state.typ==='soups'){
114
+      e_date.setDate(e_date.getDate() + 3);
115
+   }
116
+  else if(this.state.typ==='scr'){
117
+      e_date.setDate(e_date.getDate() + 4);
118
+   }
119
+  else if(this.state.typ==='bacon'){
120
+      e_date.setDate(e_date.getDate() + 7);
121
+   }
122
+  else if(this.state.typ==='sausage'){
123
+      e_date.setDate(e_date.getDate() + 2);
124
+   }
125
+
126
+  else if(this.state.typ==='gmeat'){
127
+      e_date.setDate(e_date.getDate() + 2);
128
+   }
129
+
130
+  else if(this.state.typ==='pizza'){
131
+      e_date.setDate(e_date.getDate() + 4);
132
+   }
133
+  this.setState({expiration_date: e_date.toISOString().slice(0,10)});
134
+  this.setState({ iso_date: e_date.toISOString().slice(0,10)});
135
+}
136
+}
137
+
138
+ 
139
+
140
+  render() {
141
+    return (
142
+
143
+
144
+      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
145
+       <View style={styles.MainContainer}>
146
+        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Products Form</Text>
147
+
148
+    		<TextInput
149
+          placeholder="Product Name"
150
+          onChangeText={data => this.setState({ name_p: data })}
151
+          underlineColorAndroid='transparent'
152
+          style={styles.TextInputStyleClass}
153
+        />      
154
+    
155
+
156
+
157
+    <RNPickerSelect
158
+          placeholder={{label: 'Select type of food to refrigerate',color: 'gray',}}
159
+            items={ [{label: 'Fruits',value: 'fruits'}, {label: 'Unopened Luncheon Meat',value: 'meats'},{label: 'Eggs',value: 'eggs'},{label: 'Salad',value: 'salads'},{label: 'Fresh Poultry',value: 'poultry'},{label: 'Soups',value: 'soups'},{label: 'Steaks, Chops or Roasts',value: 'scr'},{label: 'Bacon',value: 'bacon'},{label: 'Sausage',value: 'sausage'},{label: 'Ground Meat(Hamburguers)',value: 'gmeat'},{label: 'Pizza',value: 'pizza'}]}
160
+            
161
+            onValueChange={(itemValue, itemIndex) => {this.setState({typ:itemValue},()=>{ this.setExpiration();});}}
162
+            style={pickerSelectStyles}
163
+            useNativeAndroidPickerStyle={false}
164
+    />
165
+
166
+		<DatePicker
167
+          style={styles.TextInputStyleClass}
168
+          mode="date" // The enum of date, datetime and time
169
+          placeholder="Bought"
170
+          format="YYYY-MM-DD"
171
+          date={this.state.bought_date}
172
+          confirmBtnText="Confirm"
173
+          cancelBtnText="Cancel"
174
+          customStyles={{
175
+            dateIcon: {
176
+              position: 'absolute',
177
+              left: 2,
178
+              top: 3,
179
+              marginLeft: 0,
180
+            },
181
+            dateInput: {
182
+              marginLeft: 0,
183
+            },
184
+          }}
185
+          //onDateChange={data => this.setBought(data)}
186
+          onDateChange={data => {this.setState({bought_date:data},()=>{ this.setExpiration();});}}
187
+        />
188
+
189
+<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginBottom: 10 }}> Expected expiration date {this.state.iso_date} </Text>
190
+
191
+<Text style={{ fontSize: 10, color: "#3414B3", textAlign: 'center', marginBottom: 10 }}>Add date here if you  prefer to add your own expiration date</Text>
192
+
193
+  		<DatePicker
194
+          style={styles.datestyling}
195
+          mode="date" // The enum of date, datetime and time
196
+          date={this.state.expiration_date}
197
+          placeholder="Expiration"
198
+          format="YYYY-MM-DD"
199
+          confirmBtnText="Confirm"
200
+          cancelBtnText="Cancel"
201
+          customStyles={{
202
+            dateIcon: {
203
+              position: 'absolute',
204
+              left: 2,
205
+              top: 3,
206
+              marginLeft: 0,
207
+            },
208
+            dateInput: {
209
+              marginLeft: 0,
210
+            },
211
+          }}
212
+          onDateChange={data => this.setState({expiration_date:data})}
213
+          
214
+        />
215
+
216
+
217
+
218
+<TextInput 
219
+  placeholder="Quantity"
220
+  style={styles.TextInputStyleClass}
221
+  keyboardType = 'number-pad'
222
+  onChangeText = {(text)=> this.setState({quantity: text})}
223
+  value = {this.state.quantity}
224
+/>
225
+
226
+		<TextInput
227
+          placeholder="Notes"
228
+          onChangeText={data => this.setState({ notes: data })}
229
+          underlineColorAndroid='transparent'
230
+          style={styles.TextInputStyleClass}
231
+        />
232
+
233
+ 
234
+
235
+
236
+
237
+
238
+        <RNPickerSelect
239
+            placeholder={{label: 'Select to renew or not',color: '#9EA0A4',}}
240
+            items={ [{label: 'Renew',value: '1'}, {label: 'Do not Renew',value: '2'}]}
241
+              selectedValue={this.state.renew}
242
+              onValueChange={(itemValue, itemIndex) =>this.setState({renew: itemValue})} 
243
+              style={pickerSelectStyles}
244
+              useNativeAndroidPickerStyle={false}
245
+          />
246
+
247
+
248
+      <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >
249
+
250
+          <Text style={styles.text}>+</Text>
251
+
252
+        </TouchableOpacity>
253
+
254
+
255
+		<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your products </Text>
256
+
257
+</View>
258
+      </ScrollView>
259
+
260
+
261
+    );
262
+  }
263
+}
264
+
265
+const styles = StyleSheet.create({
266
+
267
+  MainContainer: {
268
+    marginTop: Constants.statusBarHeight,
269
+    justifyContent: 'center',
270
+    alignItems: 'center',
271
+    flex: 1,
272
+    margin: 10
273
+  },
274
+
275
+  TextInputStyleClass: {
276
+    color: 'gray',
277
+    textAlign: 'center',
278
+    marginBottom: 7,
279
+    height: 40,
280
+    width: '80%',
281
+    borderWidth: 1,
282
+    borderColor: '#3414B3'
283
+  },
284
+
285
+    datestyling: {
286
+    textAlign: 'center',
287
+    color: 'gray',
288
+    marginBottom: 7,
289
+    height: 40,
290
+    width: '80%',
291
+    borderWidth: 1,
292
+    borderColor: '#3414B3'
293
+  },
294
+
295
+  button: {
296
+	  height:50,
297
+    width: 50,
298
+    paddingTop: 2,
299
+    paddingBottom: 2,
300
+    backgroundColor: '#3414B3',
301
+    borderRadius: 100,
302
+    marginTop: 20,
303
+    alignItems: 'center'
304
+  },
305
+
306
+  text: {
307
+    color: '#fff',
308
+    fontSize: 30,
309
+    textAlign: 'center',
310
+    padding: 0
311
+  },
312
+
313
+
314
+}
315
+
316
+);
317
+
318
+const pickerSelectStyles = StyleSheet.create({
319
+  inputIOS: {
320
+    textAlign: 'center',
321
+    marginLeft:35,
322
+    borderWidth: 1,
323
+    fontSize: 16,
324
+    borderColor: '#3414B3',
325
+    marginBottom: 7,
326
+    height: 40,
327
+    width: '80%',
328
+    color: 'gray'
329
+  },
330
+  inputAndroid: {
331
+    textAlign: "center",
332
+    borderWidth: 1,
333
+    fontSize: 16,
334
+    borderColor: '#3414B3',
335
+    marginBottom: 7,
336
+    height: 40,
337
+    width: 270,
338
+    color: 'gray'
339
+  },
340
+
341
+    inputWeb: {
342
+    color: 'gray',
343
+    alignItems: 'center',
344
+    fontSize: 16,
345
+    textAlign: 'center',
346
+    marginBottom: 7,
347
+    height: 40,
348
+    width: '80%',
349
+    borderWidth: 1,
350
+    borderColor: '#3414B3',
351
+  }
352
+});

+ 176
- 0
Productos.js View File

@@ -0,0 +1,176 @@
1
+import { StatusBar } from 'expo-status-bar';
2
+import { useEffect, useState } from 'react';
3
+import React from 'react';
4
+import { StyleSheet, Text, View, Image, ImageBackground, Button, TouchableOpacity, Platform, Alert, FlatList} from 'react-native';
5
+import { ScrollView } from 'react-native-gesture-handler';
6
+
7
+TouchableOpacity.defaultProps = { activeOpacity: 0.8 };
8
+
9
+export default function Listas  ({ navigation }) {
10
+
11
+    
12
+  
13
+  const [data, setData] = useState([]);
14
+
15
+  useEffect(() => {
16
+    fetch('https://ada.uprrp.edu/~victor.hernandez17/groceryPolice/viewListProducts.php', {
17
+      method: 'POST',
18
+      mode: 'no-cors',
19
+      headers: {
20
+        Accept: 'application/json',
21
+        'Content-Type': 'application/json'
22
+      },
23
+      body: JSON.stringify({
24
+        lid: navigation.getParam('lid')
25
+      })
26
+    })
27
+    .then((response) => response.json())
28
+    .then((json) => {
29
+      setData(json);
30
+      console.log(json);
31
+
32
+    })
33
+    .catch((error) => {
34
+      console.error(error);
35
+    });
36
+  }, []);  
37
+
38
+
39
+  return (
40
+    <View style = {styles.container} >
41
+      <View style = {styles.pageTitleView}>
42
+        <Text style = {styles.pageTitleText}>{ navigation.getParam('name_l') } </Text>
43
+        <Text style = {styles.location}>{ navigation.getParam('store') } </Text>
44
+      </View>
45
+      <View style = {styles.contents}>
46
+        <ScrollView style = {styles.scrollView}>
47
+          <FlatList
48
+            data={data}
49
+            keyExtractor={(list) => list.id}
50
+            renderItem={({ item }) => (
51
+              <TouchableOpacity style={styles.listCards}>
52
+                <Text key={item.lid} style={styles.listText}>{item.name_p}</Text>
53
+              </TouchableOpacity>
54
+            )}
55
+          />
56
+        </ScrollView>
57
+      </View>
58
+      <View style = {styles.contentsPlus}>
59
+            <TouchableOpacity style={styles.plusButton} onPress={() => navigation.navigate('NewProduct', { lid:navigation.getParam('lid')})}>
60
+                <Text style={styles.plusText}>+</Text>
61
+            </TouchableOpacity>
62
+        </View>
63
+    </View>
64
+    );
65
+ };
66
+
67
+//  navigation.getParam('lid')
68
+ // STYLING
69
+
70
+const styles = StyleSheet.create({
71
+  container: {
72
+    flex: 1,
73
+    backgroundColor: '#F2F2F2',
74
+  },
75
+
76
+  pageTitleView: {
77
+    flex: 1,
78
+    alignContent: 'flex-end',
79
+    justifyContent:  'flex-end'
80
+  },
81
+
82
+  contents: {
83
+    flex: 2,
84
+  },
85
+
86
+  contentsPlus: {
87
+    flex: 1,
88
+    justifyContent: 'center',
89
+    alignContent: 'center',
90
+    alignItems: 'center'
91
+  },
92
+
93
+  pageTitleText: {
94
+    color: '#888',
95
+    fontSize: 35,
96
+    paddingLeft: 10,
97
+    paddingBottom: -10,
98
+    fontFamily: 'Avenir'
99
+  },
100
+
101
+  location: {
102
+    color: 'rgb(32,56,100)',
103
+    fontSize: 25,
104
+    paddingLeft: 15,
105
+    paddingBottom: 30,
106
+    fontFamily: 'Avenir'
107
+  },
108
+
109
+
110
+  listCards: {
111
+    flexDirection: 'row',
112
+    alignContent: 'flex-start',
113
+    justifyContent: 'flex-start',
114
+    alignItems: 'center',
115
+    backgroundColor: 'rgb(32,56,100)',
116
+    width: '99%',
117
+    borderRadius: 10,
118
+    paddingVertical: 20,
119
+    paddingHorizontal: 10,
120
+    marginBottom: 10,
121
+    shadowColor: 'rgba(0,0,0,.5)',
122
+    shadowOffset: { width: 2, height: 2},
123
+    shadowOpacity: 0.3,
124
+  },
125
+
126
+  listText: {
127
+    color: 'white',
128
+    fontSize: 20,
129
+    fontFamily: 'Avenir'
130
+
131
+  },
132
+
133
+  plusButton: {
134
+    flexDirection: 'row',
135
+    alignContent: 'flex-start',
136
+    justifyContent: 'flex-start',
137
+    alignItems: 'center',
138
+    justifyContent: 'center',
139
+    backgroundColor: 'rgb(32,56,100)',
140
+    width: 90,
141
+    height: 90,
142
+    borderRadius: 45,
143
+    marginBottom: 50,
144
+    shadowColor: 'rgba(0,0,0,.5)',
145
+    shadowOffset: { width: 2, height: 2},
146
+    shadowOpacity: 0.3,
147
+  },
148
+
149
+  plusText: {
150
+    color: '#F2F2F2',
151
+    fontSize: 60,
152
+    fontWeight: '600',
153
+    fontFamily: 'Avenir'
154
+
155
+  },
156
+
157
+  appButtonText: {
158
+    fontSize: 17,
159
+    color: "#fff",
160
+    alignSelf: "center",
161
+  },
162
+
163
+  bContainer: {
164
+    padding: 50,
165
+    paddingTop: -20,
166
+    flex: 2,
167
+    width: '100%',
168
+    justifyContent: "space-evenly",
169
+  },
170
+
171
+  scrollView: {
172
+    backgroundColor: 'transparent',
173
+    marginHorizontal: 20,
174
+  },
175
+
176
+});

+ 35
- 0
homeStack.js View File

@@ -0,0 +1,35 @@
1
+import { createStackNavigator } from 'react-navigation-stack';
2
+import { createAppContainer } from 'react-navigation';
3
+import WelcomeScreen from './WelcomeScreen.js';
4
+import Listas from './Listas.js';
5
+import Productos from './Productos.js';
6
+import InputP from './ProductInput.js';
7
+import InputL from './ListInput.js';
8
+
9
+const screens = {
10
+
11
+    Welcome: {
12
+        screen: WelcomeScreen
13
+    },
14
+
15
+    Lists: {
16
+        screen: Listas
17
+    },
18
+
19
+    Products: {
20
+        screen: Productos
21
+    },
22
+
23
+    NewProduct: {
24
+        screen: InputP
25
+    },
26
+
27
+    NewList: {
28
+        screen: InputL
29
+    },
30
+
31
+}
32
+
33
+const HomeStack = createStackNavigator(screens);
34
+
35
+export default createAppContainer(HomeStack);