swimtracker-app/components/IconCard.js

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Icon } from "native-base";

const IconCard = props => {

    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 }}>
                <Icon style={{ color: 'white', fontSize: 40 }} name={props.iconName} type={props.iconType} />
                <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;