feat: rendering a list

miscellaneous/react-native/App.js

@@ -2,6 +2,7 @@ import { createAppContainer } from "react-navigation";
 import { createStackNavigator } from "react-navigation-stack";
 import HomeScreen from "./src/screens/HomeScreen";
 import ComponentsScreen from "./src/screens/ComponentsScreen";
+import ListScreen from "./src/screens/ListScreen";
 
 /**
  * * From react-navigation library used for routing
@@ -10,9 +11,10 @@ const navigator = createStackNavigator(
   {
     Home: HomeScreen,
     Components: ComponentsScreen,
+    List: ListScreen,
   },
   {
-    initialRouteName: "Components",
+    initialRouteName: "List",
     defaultNavigationOptions: {
       title: "App",
     },

miscellaneous/react-native/assets/data.json

@@ -0,0 +1,122 @@
+[
+  {
+    "id": 1,
+    "first_name": "Marge",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 2,
+    "first_name": "Clevie",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 3,
+    "first_name": "Seumas",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 4,
+    "first_name": "Dyan",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 5,
+    "first_name": "Grannie",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 6,
+    "first_name": "Terese",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 7,
+    "first_name": "Ludwig",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 8,
+    "first_name": "Luther",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 9,
+    "first_name": "Mitchael",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 10,
+    "first_name": "Cherlyn",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 11,
+    "first_name": "Ignacio",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 12,
+    "first_name": "Stephen",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 13,
+    "first_name": "Yves",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 14,
+    "first_name": "Grady",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 15,
+    "first_name": "Fanchon",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 16,
+    "first_name": "Shermie",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 17,
+    "first_name": "Aile",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 18,
+    "first_name": "Melessa",
+    "email": "[email protected]",
+    "gender": "Female"
+  },
+  {
+    "id": 19,
+    "first_name": "Frank",
+    "email": "[email protected]",
+    "gender": "Male"
+  },
+  {
+    "id": 20,
+    "first_name": "Tallie",
+    "email": "[email protected]",
+    "gender": "Male"
+  }
+]

miscellaneous/react-native/src/screens/ListScreen.js

@@ -1,14 +1,35 @@
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View, FlatList } from "react-native";
 import React from "react";
 
+import studentData from "../../assets/data.json";
+
 const ListScreen = () => {
   return (
     <View>
       <Text>ListScreen</Text>
+      <FlatList
+        // horizontal // having horizontal scroll
+        // showsHorizontalScrollIndicator={false} // hiding horizontal scroll indicator
+        data={studentData}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.textStyle}>
+              <Text>Name: {item.first_name}</Text>
+              <Text>Gender:{item.gender}</Text>
+              <Text>Email: {item.email}</Text>
+            </View>
+          );
+        }}
+      />
     </View>
   );
 };
 
 export default ListScreen;
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  textStyle: {
+    marginVertical: 20,
+  },
+});