swimtracker-app/SwimTracker/components/IconCard.js

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import EntypoIcon from "react-native-vector-icons/Entypo";
import AntDesignIcon from "react-native-vector-icons/AntDesign";
import Fa5Icon from "react-native-vector-icons/FontAwesome5";

const IconCard = props => {
    let IconClass;
    if (props.iconType === "AntDesign") {
        IconClass = AntDesignIcon;
    }
    else if (props.iconType === "FontAwesome5") {
        IconClass = Fa5Icon;
    } else if (props.iconType === "Entypo") {
        IconClass = EntypoIcon;
    }

    return (
        <View style={styles.card}>

            <View style={{ paddingLeft: 20 }}>
                <Text style={{ color: 'white', fontSize: props.fontSize, textAlign: "center" }}> {props.value}</Text>
            </View>
            <View style={{ alignItems: 'center', justifyContent: 'center', paddingLeft: 20 }}>
                <IconClass style={{ color: 'white', fontSize: 30 }} name={props.iconName} />
                <Text style={{ color: 'white', marginTop: 5 }}> {props.label}</Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        flexDirection: 'row',
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        margin: 5,
        padding: 5,
        borderRadius: 6,
        justifyContent: 'space-between',
    }
});

IconCard.defaultProps = {
    fontSize: 65,
    flex: 1
};

export default IconCard;