60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
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; |