@universal-health-chain/healthcards NPM

Reusable Components

This repository contains a collection of reusable components for React Native.

Installation

Using npm:

npm i healthcards-react-components

Buttons
Cards
Text
Images
Layouts
Headers
Lists
Modals
Views

Buttons

BackButtonCustom

Properties:

navigation: Navigation prop from @react-navigation/native. Required for the back functionality.
iconName: (Optional) Name of the icon. Default is arrow-back.
style: (Optional) Additional styles for the button. Accepts a style object.

BorderedButton

Properties:

title: Button title.
onPress: (Optional) Function to be executed on button press.
buttonStyle: (Optional) Style for the button. Accepts a StyleProp<ViewStyle>.
titleStyle: (Optional) Style for the button's title. Accepts a StyleProp<TextStyle>.

HealthcardButton

Properties:

allowFontScaling: (Optional) Allows font scaling. Default is false.
containerStyle: (Optional) Style for the container. Accepts a StyleProp<ViewStyle>.
textStyle: (Optional) Style for the text. Accepts a StyleProp<TextStyle>.
disabled: (Optional) Disables the button. Default is false.
children: (Optional) Button content. Default is empty.
onPress: Function to be executed on button press.
onPointerEnter: (Optional) Function to be executed on pointer enter.
onPointerLeave: (Optional) Function to be executed on pointer leave.

IconButton

It's advisable to use either iconName or imgSource.

Properties:

onPress: Function to be executed on button press.
iconName: (Optional) Name of the icon (from MaterialCommunityIcons).
imgSource: (Optional) Location of the image.
imgStyle: (Optional) Styles for image.
iconSize: (Optional) Icon size number.
color: (Optional) Color of the button. Default value is #4183B0.
type: (Optional) Button type. Either primary or secondary. Default is primary.
containerStyle: (Optional) Styles for the container. It receives StyleProp<ViewStyle>.
disabled: (Optional) Makes field disabled. Accepts a boolean.

ItemButton

It's advisable to use with ItemButtonListUI component if more than 1 button is needed.

Properties:

item: Objeto Item que contiene información genérica con un título(text), subtítulo (subtext), el objeto que representa, y un ícono o imagen.
onPress: Función a ejecutar cuando se presiona la tarjeta.
color: (Optional) Color de la tarjeta. El predeterminado es #4183B0.
mainTextStyle: (Optional) Estilo del texto principal. Acepta un StyleProp<TextStyle>.
subTextStyle: (Optional) Estilo del texto secundario. Acepta un StyleProp<TextStyle>.
buttonContainerStyle: (Optional) Estilo del contenedor del botón. Acepta un StyleProp<ViewStyle>.
imageStyle: (Optional) Style prop for customizing the image style in case there is one.
interfaceSize: (Optional) Tamaño de la interfaz, puede ser 'S', 'M', o 'L'. El predeterminado es 'S'.
type: (Optional) Tipo de tarjeta. Puede ser 'primary' o 'secondary'. El predeterminado es 'primary'.

LinkButton

Properties:

text: Button text.
onPress: (Optional) Function to be executed on button press.
buttonStyle: (Optional) Style for the button. Accepts a StyleProp<ViewStyle>.
textStyle: (Optional) Style for the text. Accepts a StyleProp<TextStyle>.

PlainIconButton

Properties:

onPress: (Optional) Function to be executed on button press.
title: Button title.
iconName: (Optional) Icon name.
iconSize: (Optional) Icon size. Default is 36.
iconColor: (Optional) Icon color. Default is #FFF.
buttonStyle: (Optional) Style for the button. Accepts a ViewStyle.
textStyle: (Optional) Style for the text. Accepts a TextStyle.

Cards

Esta sección contiene componentes de tarjetas que encapsulan información y acciones relacionadas en una sola unidad visual.

DropdownCard

It's advisable to use with DropdownCardList component if more than 1 card is needed.

Properties:

title: Title of the card. Required.
subtitle: Subtitle of the card. Required.
dropdownData: Object DropdownCardDataProps that contains information when dropdown is open.
type: (Optional) Button type. Either primary or secondary. Default is primary.
color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.
buttonText: (Optional) Text for dropdown button. There wont be a button if the text isn't specified.
object: (Optional) Any kind of object for data handling with onPressButton.
onPressButton: (Optional) Function to be called when dropdown text button is pressed. Has as parameter the object prop.
onPressShare: (Optional) Function to be called when dropdown share button is pressed. Has as parameter the object prop.
onPressEdit: (Optional) Function to be called when dropdown edit button is pressed. Has as parameter the object prop.
onPressDelete: (Optional) Function to be called when dropdown delete button is pressed. Has as parameter the object prop.
interfaceSize: (Optional) Size of the interface, affecting the font size. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.
titleStyle: (Optional) Style prop for customizing the title text style.
subtitleStyle: (Optional) Style prop for customizing the subtitle text style.

HealthSectionCardUI

Properties:

title: Título de la sección de salud.
type: (Deprecated) Tipo de tarjeta, puede ser 'primary' o 'secondary'. Este campo es opcional y está marcado como obsoleto.
color: (Optional) Color de la tarjeta. El predeterminado es #4183B0.
disabled: (Optional) Opcion de botón deshabilitado.
interfaceSize: (Optional) Tamaño de la interfaz, puede ser 'S', 'M', o 'L'.
iconName: (Deprecated) Nombre del ícono. Este campo es opcional y está marcado como obsoleto.
icon: (Optional) Componente de ícono a mostrar. Acepta un componente React, como un ícono de react-native-elements.
titleStyle: (Optional) Estilo del título. Acepta un StyleProp<TextStyle>.
cardContainerStyle: (Optional) Estilo del contenedor de la tarjeta. Acepta un StyleProp<ViewStyle>.
iconStyle: (Optional) Estilo del ícono. Acepta un StyleProp<ViewStyle>. Este campo es opcional y está marcado como obsoleto.
onPress: Función a ejecutar cuando se presiona la tarjeta.

Text

BigCenteredText

Properties:

text: The text to be displayed. Required.
style: (Optional) Custom style for the text. Accepts a StyleProp<TextStyle>.
Other props inherited from TextProps.

HealthcareText

Properties:

allowFontScaling: (Optional) Whether the font should scale to respect Text Size accessibility settings. Defaults to false.
testID: (Optional) ID for testing purposes.
Other props inherited from TextProps.

LabelViewUI

Properties:

text: The text to be displayed. Required.
interfaceSize: (Optional) Size of the interface, affecting the font size. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.

Pill

Properties:

text: The text to be displayed within the pill. Required.
color: (Optional) Background color of the pill. Defaults to #7BC1DF.
textColor: (Optional) Color of the text within the pill. Defaults to #020202.
testID: (Optional) ID for testing purposes.
interfaceSize: (Optional) Size of the interface, affecting the font size. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.

MediumCenteredText

Properties:

text: The text content to be displayed. Required.
style: (Optional) Additional styles for the text. Accepts a style object.
Other props inherited from TextProps.

Images

BigHeadingImage

Properties:

source: The image source. Required.
style: (Optional) Additional styles for the image. Accepts a style object.

CenteredBigImage

Properties:

source: The image source. Required. Accepts an object of type ImageSourcePropType.
style: (Optional) Additional styles for the image. Accepts a style object.

HeaderSideImage

Properties:

source: The image source. Required. Accepts an object of type ImageSourcePropType.
style: (Optional) Additional styles for the image. Accepts a style object of type ImageStyle.

Inputs

CheckboxUI

Properties:

name: Unique name for the checkbox field. Required. Accepts a string.
label: Label text to be next to the checkbox. Optional. Accepts a string.
color: (Optional) Color of the checkbox. Accepts a ColorValue.
control: Control object from react-hook-form. Required.
rules: (Optional) Validation rules from react-hook-form. Accepts an object.
interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
labelStyle: (Optional) Additional styles for the text next to the checkbox. Accepts a StyleProp.
checkboxElement: (Optional) Element next to the checkbox in case you need something personalized like a URL. Advisable to use either the label or the checkboxElement. Accepts a ReactElement.
disabled: (Optional) Makes field disabled. Accepts a boolean.

DateTimePickerUI

Properties:

name: Unique name for the input field. Required. Accepts a string.
control: Control object from react-hook-form. Required.
_value: (Optional) Default value for the input field. Accepts a string.
label: (Optional) Label text for the input field. Accepts a string.
color: (Optional) Color of the icon container. Accepts a ColorValue.
placeholder: (Optional) Text for placeholder. Accepts a string. Default is 'dd/mm/aaaa'.
placeholderTextColor: (Optional) Color for text placeholder. Accepts a ColorValue.
iconColor: (Optional) Color of the icon. Accepts a ColorValue.
rules: (Optional) Validation rules from react-hook-form. Accepts an object.
interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
labelStyle: (Optional) Additional styles for the label text. Accepts a StyleProp.
inputStyle: (Optional) Additional styles for the input text. Accepts a StyleProp.
disabled: (Optional) Makes field disabled. Accepts a boolean.

DropdownUI

Properties:

name: Unique name for the input field. Required. Accepts a string.
control: Control object from react-hook-form. Required.
_value: (Optional) Default value for the input field. Accepts a string.
label: (Optional) Label text for the input field. Accepts a string.
color: (Optional) Color of the icon container. Accepts a ColorValue.
iconColor: (Optional) Color of the icon. Accepts a ColorValue.
data: Data for the dropdown menu. Required. Accepts an array of DropdownData objects.
rules: (Optional) Validation rules from react-hook-form. Accepts an object.
placeholder: (Optional) Placeholder text for the input field. Accepts a string.
interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
labelStyle: (Optional) Additional styles for the label text. Accepts a StyleProp.
inputStyle: (Optional) Additional styles for the input text. Accepts a StyleProp.
disabled: (Optional) Makes field disabled. Accepts a boolean.

EditValueViewUI

Properties:

text: Initial text for the input field. Required. Accepts a string.

NumPad

Properties:

onComplete: Callback function when the PIN is completed. Required. Accepts a function.
color: (Optional) Color for the buttons. Accepts a ColorValue.
PIN: Current PIN value. Required. Accepts a string.
setPIN: Function to update the PIN value. Required. Accepts a function.
buttonTextStyle: (Optional) Additional styles for the button text. Accepts a StyleProp.
digitsTextStyle: (Optional) Additional styles for the digits text. Accepts a StyleProp.

TextInputUI

Properties:

name: Unique name for the input field. Required. Accepts a string.
control: Control object from react-hook-form. Required.
_value: (Optional) Default value for the input field. Accepts a string.
label: (Optional) Label text for the input field. Accepts a string.
placeholder: (Optional) Placeholder text for the input field. Accepts a string.
placeholderTextColor: (Optional) Color for text placeholder. Accepts a ColorValue.
secureTextEntry: (Optional) Flag to secure text entry. Accepts a boolean.
rules: (Optional) Validation rules from react-hook-form. Accepts an object.
keyboardType: (Optional) Keyboard type for the input field. Accepts a KeyboardTypeOptions.
interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
labelStyle: (Optional) Additional styles for the label text. Accepts a StyleProp.
inputStyle: (Optional) Additional styles for the input text. Accepts a StyleProp.
disabled: (Optional) Makes field disabled. Accepts a boolean.

Layouts

MainContainer

Properties:

children: The content to be rendered inside the container. Required. Accepts any valid React Node.
source: (Optional) The background image source for the container. Accepts an object of type ImageSourcePropType.

PinValueContainer

Properties:

text: The text to be displayed inside the pill. Required.
color: (Optional) Color for the pill. Defaults to '#7BC1DF'.
interfaceSize: (Optional) Size variation for the pill, accepts 'S', 'M', or 'L'. Defaults to 'S'.

Lists

DropdownCardList

Properties:

dropdowns: Array of objects containing information for each dropdown card. Each object corresponds to a DropdownCardProps instance. Required.
onPressButton: (Optional) Function to be called when a dropdown text button is pressed. Receives object of any type.
onPressShare: (Optional) Function to be called when a dropdown share button is pressed. Receives object of any type.
onPressEdit: (Optional) Function to be called when a dropdown edit button is pressed. Receives object of any type.
onPressDelete: (Optional) Function to be called when a dropdown delete button is pressed. Receives object of any type.
buttonText: (Optional) Text for dropdown button.
color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.
interfaceSize: (Optional) Size variation for the interface, accepts 'S', 'M', or 'L'.
type: (Optional) The type of styling applied to the UI, accepts 'default', 'reverse', 'primary' or 'secondary'. Defaults to 'default'.

HealthSectionsSummaryUI

Properties:

gridData: Array of objects containing information for each health section. Each object corresponds to a HealthSectionCardUIProps instance. Required.
interfaceSize: Size variation for the interface, accepts 'S', 'M', or 'L'. Required.
titleStyle: (Optional) Style prop for customizing the title text style.
cardContainerStyle: (Optional) Style prop for customizing the card container style.
contentContainerStyle: (Optional) Style prop for customizing the content container style.
iconStyle: (Optional) Style prop for customizing the icon style.
color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.

ItemButtonListUI

Properties:

items: Array of Item objects containing a text (Required) and subtext, icon or image (recommended just one), and iconAlign (to position the icon/image either on the right or left of button). Also an object property to handle item details once pressed.
onSelectButton: Function with item as param to be called when an item is selected. Required.
color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.
mainTextStyle: (Optional) Style prop for customizing the main text style.
subTextStyle: (Optional) Style prop for customizing the subtext style.
buttonContainerStyle: (Optional) Style prop for customizing the button container style.
imageStyle: (Optional) Style prop for customizing the image style in case there is one.
interfaceSize: (Optional) Size variation for the interface, accepts 'S', 'M', or 'L'. Defaults to 'S'.
type: (Optional) The type of styling applied to the UI, accepts 'primary' or 'secondary'. Defaults to 'primary'.

Headers

HeaderCustom

Properties:

leftComponent: (Optional) Component to be rendered on the left side of the header. Accepts a valid React Node.
rightComponent: (Optional) Component to be rendered on the right side of the header. Accepts a valid React Node.
title: The title text to be displayed in the center of the header. Required. Accepts a string.
style: (Optional) Additional styles for the title text. Accepts an object.
containerStyle: (Optional) Additional styles for the header container. Accepts a StyleProp<ViewStyle>.
centerTextStyle: (Optional) Additional styles for the center component text. Accepts a StyleProp<TextStyle>.

Views

FormViewUI

Properties:

formArray: Array of form data. Required. Accepts an array of FormData.
submitText: (Optional) Text for the submit button. Defaults to 'Submit'.
submitTextColor: (Optional) Color of the submit text. Defaults to #fff.
submitButtonColor: (Optional) Color of the submit button. Defaults to #4183B0.
onSubmit: Function to be called on form submission. Required.
interfaceSize: (Optional) Size of the interface. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.
labelStyle: (Optional) Custom style for the labels. Accepts a StyleProp<TextStyle>.
inputStyle: (Optional) Custom style for the inputs. Accepts a StyleProp<TextStyle>.
buttonStyle: (Optional) Custom style for the button. Accepts a StyleProp<ViewStyle>.
buttonTextStyle: (Optional) Custom style for the button text. Accepts a StyleProp<TextStyle>.
containerStyle: (Optional) Custom style for the container of the form and the button. Accepts a StyleProp<ViewStyle>.
formStyle: (Optional) Custom style for the container of the form. Accepts a StyleProp<ViewStyle>.
submitOnPointerEnter: (Optional) Function to be called when pointer enters the submit button.
submitOnPointerLeave: (Optional) Function to be called when pointer leaves the submit button.
placeholderTextColor: (Optional) Color for placeholder text. Accepts a ColorValue.
children: The content to be rendered inside the form container. Accepts any valid React Node.