#DSDGROC-43 Recipe List Component - Home View

App.js

@@ -18,6 +18,7 @@ import ThirdPartySignIn from './components/ThirdPartySignIn';
 import FlexContainer from './components/FlexContainer';
 import AddProductCard from './components/AddProductCard';
 import Checkbox from './components/Checkbox';
+import RecipeList from './components/RecipeList';
 
 export default function App() {
   return (
@@ -100,6 +101,7 @@ export default function App() {
         </FlexContainer>
         <Nav />
         <Checkbox label='Vegetarian' isChecked={false} />
+        <RecipeList title='Favorite Recipes' />
       </View>
     </ScrollView>
   );

components/RecipeCard.jsx

@@ -2,20 +2,26 @@ import { Image, StyleSheet, Text, View } from 'react-native';
 import { Entypo } from '@expo/vector-icons';
 
 const RecipeCard = ({ title, image, minutes, rating }) => {
+  const placeholderImage = require('../assets/noImagePlaceholder.png');
   return (
     <View style={styles.cardContainer}>
       <View>
-        <Image style={styles.image} source={{ uri: image || '' }} />
+        <Image
+          style={styles.image}
+          source={image ? { uri: image } : placeholderImage}
+        />
       </View>
       <View>
-        <Text style={styles.cardTitle}>{title}</Text>
+        <Text style={styles.cardTitle} numberOfLines={2} ellipsizeMode='tail'>
+          {title}
+        </Text>
       </View>
       <View style={styles.cardDetails}>
         <Text style={styles.cardSubTitle}>{minutes || '0'} mins</Text>
         <Text>|</Text>
         <View style={styles.ratingDetails}>
           <Text>{rating || '0.0'}</Text>
-          <Entypo name='star' size={20} color='red' />
+          <Entypo name='heart' size={20} color='red' />
         </View>
       </View>
     </View>
@@ -27,15 +33,22 @@ export default RecipeCard;
 const styles = StyleSheet.create({
   cardContainer: {
     backgroundColor: '#52B175',
-    padding: 15,
-    justifyContent: 'center',
+    padding: 10,
+    marginRight: 5,
     alignItems: 'center',
     borderRadius: 15,
-    gap: 3,
+    minWidth: 190,
+    minHeight: 210,
+    maxWidth: 190,
+    height: 210,
   },
   image: {
-    height: 140,
-    width: 140,
+    height: 130,
+    width: 130,
+    minHeight: 130,
+    minWidth: 130,
+    maxHeight: 130,
+    maxWidth: 130,
     borderRadius: 15,
   },
   cardDetails: {
@@ -49,7 +62,10 @@ const styles = StyleSheet.create({
     gap: 1,
   },
   cardTitle: {
-    fontSize: 18,
+    fontSize: 15,
+    fontWeight: 'bold',
+    maxWidth: 150,
+    marginTop: 5,
   },
   cardSubTitle: {
     fontSize: 14,

components/RecipeList.jsx

@@ -0,0 +1,64 @@
+import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
+import RecipeCard from './RecipeCard';
+import { FlatList } from 'react-native';
+import { useEffect, useState } from 'react';
+
+const RecipeList = ({ title, scrollEnabled }) => {
+  const [recipes, setRecipes] = useState([]);
+  const apiKey = '90ce20e792384e9a99fa0bd3d950c094';
+
+  const fetchRecipes = async () => {
+    try {
+      const response = await fetch(
+        `https://api.spoonacular.com/recipes/random?apiKey=${apiKey}&number=10`
+      );
+      const data = await response.json();
+      setRecipes(data.recipes);
+    } catch (error) {
+      console.log('Error fetching data: ', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchRecipes();
+  }, []);
+
+  const renderRecipe = ({ item }) => {
+    return (
+      <Pressable onPress={() => console.log('Recipe Detail Page')}>
+        <RecipeCard
+          title={item.title}
+          image={item.image}
+          minutes={item.readyInMinutes || 0}
+          rating={item.aggregateLikes}
+        />
+      </Pressable>
+    );
+  };
+  return (
+    <>
+      <Text style={style.titleText}>{title}</Text>
+      <FlatList
+        numColumns={2}
+        scrollEnabled={scrollEnabled || false}
+        columnWrapperStyle={style.columnWrapper}
+        data={recipes}
+        renderItem={renderRecipe}
+      />
+    </>
+  );
+};
+
+export default RecipeList;
+
+const style = StyleSheet.create({
+  titleText: {
+    fontSize: 25,
+    fontWeight: 'bold',
+  },
+  columnWrapper: {
+    justifyContent: 'space-between',
+    marginVertical: 5,
+    marginHorizontal: 5,
+  },
+});