Refactor FoodListItem component styling

cs60apa · Mar 10, 2024 · d60f288 · d60f288
1 parent a727f8b
commit d60f288
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/src/components/FoodListItem.tsx b/src/components/FoodListItem.tsx
@@ -3,16 +3,7 @@ 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={styles.container}>
       <View style={{ flex: 1, gap: 5 }}>
         <Text style={{ fontWeight: "bold", fontSize: 16 }}>{item.label}</Text>
         <Text style={{ color: "dimgray" }}>
@@ -24,4 +15,15 @@ const FoodListItem = ({ item }) => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "gainsboro",
+    padding: 10,
+    borderRadius: 5,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+});
+
 export default FoodListItem;