Reusable Components

This project is a reusable library specifically designed for LHE Company's React Native projects. It provides a collection of components that can be easily integrated into your applications.

Installation

To install the Reusable Components library, you can use npm or yarn:

npm install @life-health-emergency/lhe-reusable-rn-ui

Components

Background

The Background component is LHE specific and is used to display a background image which is designed as per the LHE branding guidelines.

import { LHEBackgroundComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEBackgroundComponent
  type="FULL" // FULL, PLAIN, ELLIPSE, HALF
>
  <Text>Content goes here</Text>
</LHEBackgroundComponent>;

here type is the type of background you want to display. The options are FULL, PLAIN, ELLIPSE, and HALF.

Button

The Button component is a reusable button component that can be used throughout the application.

import { LHEButtonComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEButtonComponent
  onPress={onPress} // Function to be called on button press
  isLoading={isLoading} // Boolean to show loading indicator
  text={text} // Text to be displayed on the button
  type={type} // Type of button. Options are NORMAL, REVERSE, BORDER_LESS_NORMAL and LINK
/>;

Error Message

The ErrorMessage component is a reusable component that can be used to display error messages.

import { LHEErrorMessageComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEErrorMessageComponent
  message={message} // Error message to be displayed
  condition={condition} // Condition to display the error message
  style={style} // Style for the error message
/>;

File Picker

The FilePicker component is a reusable component that can be used to pick files from the device.

import { LHEFilePickerComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEFilePickerComponent
  onSelect={onSelect} // Function to be called on file selection.
/>;

LHE Input Component

The LHEInputComponent is a reusable component that can be used to display input fields.

LHE Input Component

import { LHEInputComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEInputComponent
  placeholder={placeholder} // Placeholder text for the input field
  keyboardType={keyboardType} // Keyboard type for the input field
  editable={editable} // Boolean to make the input field editable
  secureTextEntry={secureTextEntry} // Boolean to show/hide the text
  name={name} // Name of the input field
  control={control} // Control object from react-hook-form
  rules={rules} // Validation rules for the input field
  defaultValue={defaultValue} // Default value for the input field
  autocomplete={autocomplete} // Autocomplete type for the input field
  maxLength={maxLength} // Maximum length of the input field
/>;

LHE Icon Input Component

import { LHEIconInputComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEIconInputComponent
  placeholder={placeholder} // Placeholder text for the input field
  keyboardType={keyboardType} // Keyboard type for the input field
  editable={editable} // Boolean to make the input field editable
  secureTextEntry={secureTextEntry} // Boolean to show/hide the text
  children={children} // Children to be displayed in the input field0
  icons={icons} // Icons to be displayed in the input field
  name={name} // Name of the input field
  control={control} // Control object from react-hook-form
  rules={rules} // Validation rules for the input field
  customValue={customValue} // Custom value for the input field
/>;

LHE Text Area Component

import { LHETextAreaComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHETextAreaComponent
  placeholder={placeholder} // Placeholder text for the input field
  keyboardType={keyboardType} // Keyboard type for the input field
  name={name} // Name of the input field
  control={control} // Control object from react-hook-form
  rules={rules} // Validation rules for the input field
  editable={editable} // Boolean to make the input field editable
  numberOfLines={numberOfLines} // Number of lines for the text area
  hint={hint} // Hint text for the text area
/>;

LHE Image Component

The LHEImageComponent is a reusable component that can be used to display images.

import { LHEImageComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEImageComponent
  url={url} // URL of the image
  style={style} // Style for the image
  imageStyle={imageStyle} // Style for the image
  securityKey={securityKey} // Security key for the image
  baseURL={baseURL} // Base URL for the image
  children={children} // Children to be displayed in the image
/>;

LHE Image List Component

The LHEImageListComponent is a reusable component that can be used to display a list of images.

import { LHEImageListComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEImageListComponent
  images={images} // Array of images
  onPress={onPress} // Function to be called on image press
  onDelete={onDelete} // Function to be called on image delete
/>;

LHE Text Component

The LHETextComponent is a reusable component that can be used to display text.

import { LHETextComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHETextComponent
  style={style} // Style for the text
  children={children} // Children to be displayed in the text
  ignoreTranslation={ignoreTranslation} // Boolean to ignore translation
/>;

LHE Language Picker Component

The LHELanguagePickerComponent is a reusable component that can be used to select the language.

import { LHELanguagePickerComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHELanguagePickerComponent
  onSelect={onSelect} // Function to be called on language selection
/>;

LHE Location Picker Component

The LHELocationPickerComponent is a reusable component that can be used to select the location.

import { LHELocationPickerComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHELocationPickerComponent
  defaultValue={defaultValue} // Default value for the location picker
  control={control} // Control object from react-hook-form
  name={name} // Name of the location picker
  rules={rules} // Validation rules for the location picker
  placeholder={placeholder} // Placeholder text for the location picker
/>;

LHE Logo Picker Component

The LHELogoPickerComponent is a reusable component that can be used to select the logo.

LHE Logo Picker Component

import { LHELogoPickerComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHELogoPickerComponent
  onPress={onPress} // Function to be called on logo selection
  isLoading={isLoading} // Boolean to show loading indicator
  source={source} // Source of the logo
  error={error} // Error message for the logo
  baseURL={baseURL} // Base URL for the logo
/>;

LHE Static Logo COmponent

import { LHEStaticLogoComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEStaticLogoComponent />;

New LHE Logo Selector Component

import { LHENewLogoSelector } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHENewLogoSelector
  size={size} // Size of the logo
  onPress={onPress} // Function to be called on logo selection
  uri={uri} // URI of the logo
/>;

LHE Progressbar Component

The LHEProgressbarComponent is a reusable component that can be used to display a progress bar.

import { LHEProgressBarComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEProgressBarComponent
  progress={progress} // Progress value
  color={color} // Color of the progress bar
  showPercentage={showPercentage} // Boolean to show percentage
/>;

LHE Select Component

The LHESelectComponent is a reusable component that can be used to display a select field.

LHE Multi Select Component

The LHEMultiSelectComponent is a reusable component that can be used to display a multi select field.

import { LHEMultiSelectComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHEMultiSelectComponent
  placeholder={placeholder} // Placeholder text for the select field
  name={name} // Name of the select field
  control={control} // Control object from react-hook-form
  rules={rules} // Validation rules for the select field
  defaultValue={defaultValue} // Default value for the select field
  options={options} // Options for the select field
  filterProps={filterProps} // Filter props for the select field
  selectionLimit={selectionLimit} // Selection limit for the select field
/>;

LHE Single Select Component

The LHESingleSelectComponent is a reusable component that can be used to display a single select field.

import { LHESingleSelectComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHESingleSelectComponent
  placeholder={placeholder} // Placeholder text for the select field
  name={name} // Name of the select field
  control={control} // Control object from react-hook-form
  rules={rules} // Validation rules for the select field
  defaultValue={defaultValue} // Default value for the select field
  options={options} // Options for the select field
  filterProps={filterProps} // Filter props for the select field
/>;

LHE Timings selector Component

The LHETimingsSelectorComponent is a reusable component that can be used to select timings.

import { LHETimingsSelectorComponent } from "@life-health-emergency/lhe-reusable-rn-ui";

<LHETimingsSelectorComponent
  name={name} // Name of the timings selector
  control={control} // Control object from react-hook-form
/>;

Auto Complete Component

The AutoCompleteComponent is a reusable component that can be used to display an auto complete field.

It uses google api key to fetch the address suggestions.

import { AutocompleteAddress } from "@life-health-emergency/lhe-reusable-rn-ui";

<AutocompleteAddress
  styles={styles} // Styles for the auto complete field
  onSelect={onSelect} // Function to be called on auto complete selection
  placeholder={placeholder} // Placeholder text for the auto complete field
/>;

Data Store

The data store module is a reusable module that can be used to store data in the application.

it uses AsyncStorage and SecureStore to store data in the device.

It exports 3 objects:

1. LHEDB - To store language and remember me information in the device
2. LHETokensDB - To store tokens in the device either access token or refresh token.
3. LHEDataStore - To store any other data in the device. this is more secure than AsyncStorage.

import {
  LHEDB,
  LHETokensDB,
  LHEDataStore,
} from "@life-health-emergency/lhe-reusable-rn-ui";

Utility Functions

The utility functions module is a reusable module that can be used to perform utility functions in the application.

Pick Multiple Media Files

The pickMultipleMediaFiles function is a utility function that can be used to pick multiple media files from the device.

import { LHEPickMultipleMedia } from "@life-health-emergency/lhe-reusable-rn-ui";

LHEPickMultipleMedia(
  mediaType, // Media type to be picked - ALL, Images and Videos
  quality, // Quality of the media
  selectionLimit, // Selection limit for the media
  base64, // Boolean to get base64 of the media file
  debug // Boolean to show debug logs
);

Pick Single Media File

The pickSingleMediaFile function is a utility function that can be used to pick a single media file from the device.

import { LHEPickSingleMedia } from "@life-health-emergency/lhe-reusable-rn-ui";

LHEPickSingleMedia(
  mediaType, // Media type to be picked - ALL, Images and Videos
  quality, // Quality of the media
  base64, // Boolean to get base64 of the media file
  debug, // Boolean to show debug logs
  allowEditing // Boolean to allow editing the media file
);

Object to form data conversion function

The objectToFormData function is a utility function that can be used to convert an object to form data.

import { objectToFormData } from "@life-health-emergency/lhe-reusable-rn-ui";

objectToFormData(
  object, // Object to be converted to form data
  form, // Form data object
  namespace // Namespace for the form data
);

Example:

const object = {
  name: "John Doe",
  age: 30,
};

const form = new FormData();

objectToFormData(object, form);

Output:

FormData {
  "name": "John Doe",
  "age": 30,
}