From 45ab6bd7d37bcef7de068c0b214b76bfe866f373 Mon Sep 17 00:00:00 2001
From: Rayhan Hassou <Rayhan.HASSOU@etu.uca.fr>
Date: Mon, 13 Nov 2023 10:38:21 +0100
Subject: [PATCH] add a few component like tabbar and selected ingredient,
 changes the recipe display and create a new page

---
 LeftOvers/App.js                            |  10 +-
 LeftOvers/assets/images/backward_arrows.png | Bin 0 -> 2099 bytes
 LeftOvers/components/RecipeElement.tsx      |  57 +++++--
 LeftOvers/components/SelectedIngredient.tsx |   9 +-
 LeftOvers/components/TopBar.tsx             |  28 ++++
 LeftOvers/package-lock.json                 | 171 ++++++++++++++++++++
 LeftOvers/package.json                      |   4 +
 LeftOvers/screens/RecipeSuggestion.tsx      |  46 ++++++
 8 files changed, 297 insertions(+), 28 deletions(-)
 create mode 100644 LeftOvers/assets/images/backward_arrows.png
 create mode 100644 LeftOvers/components/TopBar.tsx

diff --git a/LeftOvers/App.js b/LeftOvers/App.js
index ed37109..1310760 100644
--- a/LeftOvers/App.js
+++ b/LeftOvers/App.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import SelectedIngredient from './components/SelectedIngredient';
-import RecipeElementReduce from './components/RecipeElementReduce';
-import RecipeElement from './components/RecipeElement';
+import TopBar from './components/TopBar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import RecipeSuggestion from './screens/RecipeSuggestion';
 
 const generateList = () => {
   const list = [];
@@ -18,9 +18,7 @@ export default function App() {
   const list = generateList();
 
   return (
-    <View style={styles.container}>
-      <SelectedIngredient ListImage={imageList} listeIngredient={list}></SelectedIngredient>
-    </View>
+    <RecipeSuggestion list={list}></RecipeSuggestion>  
   );
 }
 
diff --git a/LeftOvers/assets/images/backward_arrows.png b/LeftOvers/assets/images/backward_arrows.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea48792f95739da698b9268b6034920e42641950
GIT binary patch
literal 2099
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
L2nlQmfLZ?q;Ut#h

literal 0
HcmV?d00001

diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx
index b7925e9..c53f34e 100644
--- a/LeftOvers/components/RecipeElement.tsx
+++ b/LeftOvers/components/RecipeElement.tsx
@@ -16,19 +16,23 @@ interface recipeElementProps {
 }
 
 export default function RecipeElement(props : any) {
+
+  const totalContentCount = props.imageList.length + 11;
+  const dynamicHeight = totalContentCount * 40;
+  const scrollViewHeight = 100;
+
+
   return (
-    <Pressable style={styles.button}>
-      <View style={styles.view}>
+    <Pressable style={[styles.button, { height: dynamicHeight }]}>
+      <View style={[styles.view, { height: dynamicHeight - 10}]}>
         <Text style={styles.text}>{props.number}</Text>
         <Text style={styles.title}>{props.title}</Text>
         <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
-        {props.imageList.length > 0 ? (
           <View style={styles.horizontalAlignement}>
             <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
-            <Text style={styles.smallText}>Ingredients</Text>
+            <Text style={styles.text}>Ingredients</Text>
             <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
           </View>
-        ) : null}
         
         <View style={styles.horizontalAlignement}>
           {props.imageList.length > 0 && props.imageList.map((source, index) => (
@@ -36,14 +40,30 @@ export default function RecipeElement(props : any) {
           ))}
         </View>
 
-        <View style={{alignItems: 'center', justifyContent: 'center'}}>
+        
+        {props.imageList.length <= 0 ? (
+          <View style={styles.horizontalAlignement}>
+                  {props.textList.length > 0 && props.textList.map((source, index) => (
+                    <Text key={index} style={styles.smallText}>{source}</Text>
+                  ))}
+          </View>
+          ) : null}
+
+
+        <View style={styles.scrollViewContainer}>
           <SafeAreaView>
-            <ScrollView>
-                  <Text style={styles.smallText}>{props.description}</Text>
+            <View style={styles.horizontalAlignement}>
+              <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
+              <Text style={styles.text}>Description</Text>
+              <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
+            </View>
+            <ScrollView style={{ marginTop: 5, height: scrollViewHeight }}>
+              <Text style={styles.smallText}>{props.description}</Text>
             </ScrollView>
           </SafeAreaView>
-          </View>
-        <Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
+        </View>
+
+        <Image source={background} style={{width: 210, height: 20, marginTop: dynamicHeight - 50, position: 'absolute'}}></Image>
       </View>
     </Pressable>
   ); 
@@ -54,8 +74,7 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 250,
-    height: 350,
+    width : 300,
     borderRadius: 40,
     elevation: 3,
     backgroundColor: '#E3DEC9',
@@ -75,7 +94,7 @@ const styles = StyleSheet.create({
     letterSpacing: 0.25,
     color: '#71662A',
     textAlign: "center",
-    marginTop: 5,
+    margin : 5
   },
   title:{
     fontSize: 18,
@@ -85,8 +104,7 @@ const styles = StyleSheet.create({
     color: '#524B1A',
   },
   view: {
-    width : 240,
-    height: 340,
+    width : 290,
     borderRadius: 40,
     elevation: 3,
     borderWidth: 2,
@@ -99,6 +117,11 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection : 'row',
     alignItems: 'center', 
-    marginTop: 10,
-  }
+    justifyContent: 'space-between',
+    marginTop : 5,
+    flexWrap: 'wrap',
+  },
+  scrollViewContainer: {
+    flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant
+  },
 });
\ No newline at end of file
diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx
index e739d41..6886287 100644
--- a/LeftOvers/components/SelectedIngredient.tsx
+++ b/LeftOvers/components/SelectedIngredient.tsx
@@ -37,12 +37,11 @@ export default function SelectedIngredient(props : any) {
         <View id="Top" style={styles.horizontalAlignement}>
             <Text style={styles.text}>Selected ingredients</Text>
             <Pressable>
-                <Image source={parameter} style={{ width: 20, height: 20 }} />
+                <Image source={parameter} style={{ width: 15, height: 15 }} />
             </Pressable>
         </View>
 
         <View id="IngredientList" style={styles.horizontalAlignement}>
-
             <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
                 <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
             </Pressable>
@@ -60,8 +59,8 @@ export default function SelectedIngredient(props : any) {
 const styles = StyleSheet.create({
       view: {
         width : 350,
-        height: 120,
-        borderRadius: 10,
+        height: 110,
+        borderRadius: 15,
         elevation: 3,
         borderWidth: 2,
         borderColor: 'black',
@@ -71,7 +70,7 @@ const styles = StyleSheet.create({
       },
       horizontalAlignement: {
         display: "flex",
-        height : 40,
+        height : 30,
         width: 350,
         flexDirection : 'row',
         justifyContent : 'space-around',
diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx
new file mode 100644
index 0000000..c305bfc
--- /dev/null
+++ b/LeftOvers/components/TopBar.tsx
@@ -0,0 +1,28 @@
+import React, { startTransition } from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import { Appbar } from 'react-native-paper';
+import backward from '../assets/images/backward_arrows.png'; 
+
+interface TopBarProps{
+    source : string
+    firstImage  : string
+    lastImage : string
+  }
+  
+  
+  export default function TopBar(props : any) {
+
+    const _goBack = () => console.log('Went back');
+
+    const _handleSearch = () => console.log('Searching');
+
+    const _handleMore = () => console.log('Shown more');
+    return (
+        <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
+            <Appbar.BackAction onPress={_goBack} />
+            <Appbar.Content title="Title" />
+            <Appbar.Action icon="magnify" onPress={_handleSearch} />
+            <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
+      </Appbar.Header>
+    );
+  }
\ No newline at end of file
diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json
index 9c11e5c..dca14c6 100644
--- a/LeftOvers/package-lock.json
+++ b/LeftOvers/package-lock.json
@@ -16,7 +16,11 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
+        "react-native-linear-gradient": "^2.8.3",
+        "react-native-paper": "^5.11.1",
+        "react-native-safe-area-context": "^4.7.4",
         "react-native-splash-screen": "^3.3.0",
+        "react-native-vector-icons": "^10.0.2",
         "react-native-web": "~0.19.6",
         "typescript": "^5.1.3"
       },
@@ -1968,6 +1972,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -7673,6 +7697,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7686,6 +7719,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -10116,6 +10158,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -14790,6 +14845,40 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-linear-gradient": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz",
+      "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-paper": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.11.1.tgz",
+      "integrity": "sha512-axqRTagGL8LtuYh172cx2Q2THOVJ3PTpPjCKhL5ECRdpJs2ceiboVecSiOIBuO3H7dVpaneptBA0vJr9HeVHwg==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz",
+      "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-splash-screen": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
@@ -14798,6 +14887,67 @@
         "react-native": ">=0.57.0"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.2.tgz",
+      "integrity": "sha512-ZwhUkJhIMkGL3cW7IT4sEEHu2AOzerqsRQ73UzXsB+ecBpVK5bRmp0XswiQleZKZalZfs/WIfWLXLfTQHcQo6A==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -15519,6 +15669,19 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -16565,6 +16728,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/LeftOvers/package.json b/LeftOvers/package.json
index 54de2b4..bcb7fd0 100644
--- a/LeftOvers/package.json
+++ b/LeftOvers/package.json
@@ -17,7 +17,11 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-paper": "^5.11.1",
+    "react-native-safe-area-context": "^4.7.4",
     "react-native-splash-screen": "^3.3.0",
+    "react-native-vector-icons": "^10.0.2",
     "react-native-web": "~0.19.6",
     "typescript": "^5.1.3"
   },
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index e69de29..f02b18c 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import TopBar from '../components/TopBar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SelectedIngredient from '../components/SelectedIngredient';
+import RecipeElement from '../components/RecipeElement';
+
+interface RecipeSuggestionProps{
+    source : string
+    firstImage  : string
+    lastImage : string
+  }
+
+  export default function RecipeSuggestion(props : any) {
+
+    const imageList=[]
+    return (
+        <SafeAreaProvider>
+            <TopBar></TopBar>
+          
+                <View style={styles.page}>
+                    <SelectedIngredient listeIngredient={props.list}  imageList={imageList} style={styles.element}></SelectedIngredient>
+                    <View style={{marginTop: 100}}>
+                        <RecipeElement number="13" title="Pizza with Pineaples"  imageList={imageList} textList={props.list} description="delicious plate that will please you" style={styles.element}></RecipeElement>
+                    </View>
+                </View>
+
+        </SafeAreaProvider>
+    );
+  }
+
+  const styles = StyleSheet.create({
+    page: {
+      flex: 1, 
+      backgroundColor: '#59BDCD',
+      alignItems: 'center',
+      display: "flex",
+      flexWrap: "wrap",
+      padding: 20,   
+    },
+    element: {
+        marginTop: 20,
+    }
+});
+