Refactor food items view in App component

Author: marksikaundi

src/app/index.tsx

@@ -1,26 +1,12 @@
 import { StyleSheet, Text, View } from "react-native";
-import { AntDesign } from "@expo/vector-icons";
+import FoodListItem from "../components/FoodListItem";
 
 export default function App() {
   return (
     <View style={styles.container}>
       {/* Food Items View */}
-      <View
-        style={{
-          backgroundColor: "gainsboro",
-          padding: 10,
-          borderRadius: 5,
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <View style={{ flex: 1, gap: 5 }}>
-          <Text style={{ fontWeight: "bold", fontSize: 16 }}>Pizza</Text>
-          <Text style={{ color: "dimgray" }}>350 cal, Dominos</Text>
-        </View>
-        <AntDesign name="pluscircleo" size={24} color="royalblue" />
-      </View>
+      <FoodListItem item={{ label: "Pizza", cal: 75, brand: "Dominos" }} />
+      <FoodListItem item={{ label: "Apple", cal: 50, brand: "Generic" }} />
     </View>
   );
 }
@@ -31,5 +17,6 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
     justifyContent: "center",
     padding: 10,
+    gap: 5,
   },
 });

src/components/FoodListItem.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, Text, View } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
+
+const FoodListItem = ({ item }) => {
+  return (
+    <View
+      style={{
+        backgroundColor: "gainsboro",
+        padding: 10,
+        borderRadius: 5,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <View style={{ flex: 1, gap: 5 }}>
+        <Text style={{ fontWeight: "bold", fontSize: 16 }}>{item.label}</Text>
+        <Text style={{ color: "dimgray" }}>
+          {item.cal} cal, {item.brand}
+        </Text>
+      </View>
+      <AntDesign name="pluscircleo" size={24} color="royalblue" />
+    </View>
+  );
+};
+
+export default FoodListItem;