improve the design and the composant

LeftOvers/App.js

@@ -1,12 +1,22 @@
 import React from 'react';
-import { StyleSheet, Text, View, Alert } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import RecipeElementImage from './components/RecipeElementImage';
 
+const generateImageList = () => {
+  const imageList = [];
+  const meat =  '../assets/images/meat.png'; 
+  for (let i = 0; i < 5; i++) {
+     imageList.push(meat);
+  }
+  return imageList;
+};
+
 export default function App() {
+  const imageList = [];
 
   return (
     <View style={styles.container}>
-      <RecipeElementImage title="Rice whith curry chicken" number="7" description="A delicious rice with a sweet chicken with curry sauce."></RecipeElementImage>
+      <RecipeElementImage title="Rice whith curry chicken" number="7" description="A delicious rice with a sweet chicken with curry sauce."  imageList={imageList}></RecipeElementImage>
     </View>
   );
 }

LeftOvers/components/FoodElementText.tsx

@@ -4,7 +4,15 @@ import Separator from '../components/Separator';
 import plus from '../assets/images/plus.png'; 
 import moins from '../assets/images/minus.png'; 
 
-export default function FoodElementText(props) {
+
+
+interface foodElementImageProps {
+  source : string
+  title  : string
+}
+
+
+export default function FoodElementText(props : any) {
   return (
     <Pressable style={styles.button}>
       <View style={styles.container}>
@@ -27,7 +35,7 @@ const styles = StyleSheet.create({
     height: 60,
     borderRadius: 5,
     elevation: 3,
-    backgroundColor: '#ACA279',
+    backgroundColor: '#E3DEC9',
   },
   text: {
     fontSize: 15,

LeftOvers/components/RecipeElementImage.tsx

@@ -3,13 +3,17 @@ import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
 import brochette from '../assets/images/brochette.png'; 
 import Union_left from '../assets/images/Union_left.png';
 import Union_right from '../assets/images/Union_right.png';
-import meat from '../assets/images/meat.png'; 
 import background from '../assets/images/Background.png'; 
 
 
+interface recipeElementImageProps {
+  number : number
+  title  : string
+  description : string
+  imageList : string[]
+}
 
-
+export default function RecipeElementImage(props : any) {
-export default function RecipeElementImage(props) {
   return (
     <Pressable style={styles.button}>
       <View style={styles.view}>
@@ -19,19 +23,20 @@ export default function RecipeElementImage(props) {
         <View style={{alignItems: 'center', justifyContent: 'center'}}>
         <Text style={styles.smallText}>{props.description}</Text>
         </View>
-        <View style={styles.horizontalAlignement}>
+        {props.imageList.length > 0 ? (
-            <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6}}></Image>
+          <View style={styles.horizontalAlignement}>
+            <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
             <Text style={styles.smallText}>Ingredients</Text>
-            <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6}}></Image>
+            <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
-        </View>
+          </View>
+        ) : null}
+        
         <View style={styles.horizontalAlignement}>
-            <Image source={meat} style={{width: 40, height: 40}}/>
+          {props.imageList.length > 0 && props.imageList.map((source, index) => (
-            <Image source={meat} style={{width: 40, height: 40}}/>
+          <Image key={index} source={source} style={{ width: 40, height: 40 }} />
-            <Image source={meat} style={{width: 40, height: 40}}/>
+          ))}
-            <Image source={meat} style={{width: 40, height: 40}}/>
-            <Image source={meat} style={{width: 40, height: 40}}/>   
         </View>
-        <Image source={background} style={{width: 210, height: 20, marginTop: 20}}></Image>
+        <Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
       </View>
     </Pressable>
   ); 
@@ -42,10 +47,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     width : 250,
-    height: 370,
+    height: 350,
     borderRadius: 40,
     elevation: 3,
-    backgroundColor: '#ACA279',
+    backgroundColor: '#E3DEC9',
   },
   text: {
     fontSize: 14,
@@ -71,7 +76,7 @@ const styles = StyleSheet.create({
   },
   view: {
     width : 240,
-    height: 360,
+    height: 340,
     borderRadius: 40,
     elevation: 3,
     borderWidth: 2,