Person Overview

Person class and test data added

components/PersonCard.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import ProgressiveImage from "./ProgressiveImage";
+
+import Colors from "../constants/colors";
+
+const defaultImage = 'https://icon-library.com/images/full_name_1346459_83431.png';
+
+const PersonCard = (props) => {
+    return (
+        <TouchableOpacity
+            style={ {...styles.cardContainer, ...props.style} }
+            onPress={() => props.onSelect(props.person)}
+        >
+            <ProgressiveImage style={styles.image}
+                              uri={props.person.image}
+                              loadingUri={defaultImage}
+                              errorUri={defaultImage}
+                              resizeMode={'contain'}
+            />
+            <View style={styles.textContainer}>
+                <Text
+                    numberOfLines={2}
+                    adjustsFontSizeToFit
+                    style={styles.personText}
+                >{props.person.name}
+                </Text>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    cardContainer: {
+        height: 180,
+        width: '42.5%',
+        backgroundColor: Colors.primary500,
+        elevation: 10,
+        marginLeft: '5%',
+        marginTop: '5%',
+    },
+    personText: {
+        textAlign: 'center',
+        color: 'black',
+        fontSize: 20
+    },
+    image: {
+        height: 150,
+        width: '100%',
+
+    },
+    textContainer: {
+        justifyContent: 'center',
+        height: 40,
+        width: '100%',
+        backgroundColor: Colors.accent500,
+    }
+});
+
+export default PersonCard;

components/ProgressiveImage.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Image } from 'react-native';
+
+export default class ProgressiveImage extends Component {
+    state = { showDefault: true, error: false };
+
+    render() {
+        var image = this.state.showDefault ? { uri: this.props.loadingUri } : ( this.state.error ? { uri: this.props.errorUri } : { uri: this.props.uri } );
+        if (image.uri == null) {
+            image = { uri: this.props.errorUri };
+        }
+        return (
+            <Image style={this.props.style}
+                   source={image}
+                   onLoadEnd={() => this.setState({showDefault: false})}
+                   onError={() => this.setState({error: true})}
+                   resizeMode={this.props.resizeMode}/>
+        );
+    }
+}