Person Overview

Person class and test data added

screens/PersonDetailScreen.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+import ProgressiveImage from "../components/ProgressiveImage";
+const defaultImage = 'https://icon-library.com/images/full_name_1346459_83431.png';
+
+const PersonDetailScreen = (props) => {
+    const person = props.navigation.getParam('person');
+    return(
+        <View style={styles.screen}>
+            <ProgressiveImage style={styles.bannerImage}
+                              uri={person.image}
+                              loadingUri={defaultImage}
+                              errorUri={defaultImage}
+                              resizeMode={'contain'}
+            />
+            <View style={styles.titleContainer}>
+                <Text style={styles.titleText}>{person.name}</Text>
+            </View>
+            <Text style={styles.bodyText}>{person.birthday.toString()}</Text>
+
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        width: '100%',
+        height: '100%'
+    },
+    bannerImage: {
+        width: '100%',
+        height: 300
+    },
+    titleContainer: {
+        height: 50,
+        width: '100%',
+        backgroundColor: 'rgba(170, 170, 170, 0.7)',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    titleText: {
+        fontWeight: 'bold',
+        fontSize: 25
+    },
+    bodyContainer: {
+        width: '100%',
+        padding: 20,
+    },
+    bodyText: {
+        fontSize: 16,
+        lineHeight: 25
+    }
+});
+
+export default PersonDetailScreen;

screens/PersonOverviewScreen.js

@@ -0,0 +1,58 @@
+import { StatusBar } from "expo-status-bar";
+import { Text, View, StyleSheet, ScrollView } from "react-native";
+
+import FloatingButton from "../components/FloatingButton";
+import PersonCard from '../components/PersonCard';
+
+import { PERSONS } from '../data/PersonData';
+import Colors from "../constants/colors";
+
+const PersonOverviewScreen = (props) => {
+    const personSelected = (person) => {
+        console.log(person);
+        // props.navigation.navigate({
+        //     routeName: 'Details',
+        //     params: {
+        //         person: person
+        //     }
+        // })
+    }
+
+    const PersonsSorted = PERSONS.sort((a, b) => a.name.localeCompare(b.name));
+
+    const PersonsToDisplay = PersonsSorted.map( (person, index) => {
+        return(
+            <PersonCard
+                person={person}
+                onSelect={personSelected}
+                key={index}
+            />
+        );
+    });
+
+    return (
+        <View style={styles.container}>
+            <ScrollView contentContainerStyle={styles.cardsContainer}>
+                {PersonsToDisplay}
+            </ScrollView>
+            <FloatingButton/>
+            <StatusBar style="auto" />
+        </View>
+    );
+}
+
+export default PersonOverviewScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: Colors.primary500,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    cardsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        paddingBottom: 20
+    }
+});