Reusable Components

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

Installation

Using npm:

npm i healthcards-react-components

Table of Contents

• 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.