List of Exercises

App.js

@@ -1,20 +1,21 @@
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View, FlatList } from "react-native";
 import exercises from "./assets/data/exercises.json";
+import ExerciseListItem from "./src/components/ExerciseListItem";
 
-export default function App() {
-  const exercise = exercises[0];
 
-  console.log(exercises[0]);
 
+export default function App() {
   return (
     <View style={styles.container}>
-      <View style={styles.exerciseContainer}>
-        <Text style={styles.exerciseName} >{exercise.name}</Text>
-        <Text style={styles.exerciseSubtitle}>
-          {exercise.muscle.toUpperCase()} | {exercise.equipment.toUpperCase()}
-        </Text>
-      </View>
+      <FlatList
+        data={exercises}
+        contentContainerStyle = {{gap: 5}}
+        keyExtractor={(item, index) => item.name + index} 
+        renderItem={({ item }) => <ExerciseListItem item={item}/>}
+
+      />
+
       <StatusBar style="auto" />
     </View>
   );
@@ -26,23 +27,8 @@ const styles = StyleSheet.create({
     backgroundColor: "gainsboro",
     justifyContent: "center",
     padding: 10,
+    paddingTop: 70,
+
   },
 
-  exerciseContainer: {
-    backgroundColor: "#fff",
-    borderRadius: 10,
-    padding: 10,
-    gap: 5,
-  },
-
-  exerciseName: {
-    fontSize: 20,
-    fontWeight: 500,
-  },
-
-  exerciseSubtitle: {
-    color: "dimgray",
-  },
-
-
 });

src/components/ExerciseListItem.jsx

@@ -0,0 +1,31 @@
+import { StyleSheet, Text, View } from "react-native";
+
+export default function ExerciseListItem({ item }) {
+  return (
+    <View style={styles.exerciseContainer}>
+      <Text style={styles.exerciseName}>{item.name}</Text>
+      <Text style={styles.exerciseSubtitle}>
+        {item.muscle.toUpperCase()} | {item.equipment.toUpperCase()}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+
+  exerciseContainer: {
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    padding: 10,
+    gap: 5,
+  },
+
+  exerciseName: {
+    fontSize: 20,
+    fontWeight: 500,
+  },
+
+  exerciseSubtitle: {
+    color: "dimgray",
+  },
+});