React Native component using styled components https://styled-components.com/

StyledCard.js

import React from 'react';
import styled from 'styled-components/native';
import {Color} from '../../styles';
import {IconButton} from './IconButton';

const MAX_STRING_LENGTH = 15;

const StyledView = styled.View`
  flex: 1;
  flex-direction: row;
  background-color: ${(props) => props.backgroundColor};
  border-bottom-color: #e1e1e1;
  border-style: solid;
  border-bottom-width: 1px;
  padding: 15px 10px 5px 10px;
  margin: 10px;
  border-radius: 10px;
  padding-top: 15px;
`;

const Info = styled.View`
  flex: 1;
`;

const Buttons = styled.View`
  width: 50px;
`;

const Row = styled.View`
  width: 100%;
  flex-direction: row;
  margin-top: 5px;
  margin-bottom: 5px;
`;

const RowContainer = styled.View``;

const Label = styled.Text`
  font-weight: bold;
  font-size: 18px;
  height: 25px;
  margin-right: 10px;
  margin-left: 10px;
`;

const Value = styled.Text`
  font-size: 16px;
`;

const ValueWithMargin = styled(Value)`
  margin-left: 20px;
`;

// TODO: Buscar manera de desplegar textos largos

/**
 * Display labeled attributes
 *
 * - Each item in the attributes array should be an object with the keys 'label' and 'value'
 * For instance:
 *
 * {
 *
 *      label: 'Dog:',
 *      value: 'chihuahua',
 *
 * }
 *
 * - showDetails and remove are functions
 */
function Card({attributes, showDetails, remove, backgroundColor}) {
  backgroundColor =
    typeof backgroundColor !== 'undefined' ? backgroundColor : Color.white;

  return (
    <StyledView backgroundColor={backgroundColor}>
      <Info>
        {attributes[0].value.length < MAX_STRING_LENGTH ? (
          <>
            <Row>
              <Label>{attributes[0].label}</Label>
              <Value>{attributes[0].value}</Value>
            </Row>
          </>
        ) : (
          <>
            <Row>
              <Label>{attributes[0].label}</Label>
            </Row>
            <Row>
              <ValueWithMargin>{attributes[0].value}</ValueWithMargin>
            </Row>
          </>
        )}
        {attributes.slice(1).map((a, k) =>
          a.value.length < MAX_STRING_LENGTH ? (
            <Row key={k}>
              <Label>{a.label}</Label>
              <Value>{a.value}</Value>
            </Row>
          ) : (
            <RowContainer key={k}>
              <Row>
                <Label>{a.label}</Label>
              </Row>
              <Row>
                <ValueWithMargin>{a.value}</ValueWithMargin>
              </Row>
            </RowContainer>
          ),
        )}
      </Info>
      <Buttons>
        {typeof showDetails !== 'undefined' ? (
          <IconButton
            left={0}
            marginTop={0}
            marginLeft={0}
            onPress={() => showDetails()}
          />
        ) : typeof remove !== 'undefined' ? (
          <IconButton
            left={0}
            marginTop={0}
            marginLeft={0}
            onPress={remove}
            backgroundColor={Color.red}
            name="remove"
          />
        ) : (
          <></>
        )}
      </Buttons>
    </StyledView>
  );
}

export {Card};