@egintegrations/healthcare-ui

Healthcare-specific React Native UI components for building healthcare mobile applications. Includes contact cards, emergency information, care pathways, and document management.

Features

- ContactCard: Display healthcare staff with call, email, and WhatsApp actions
- EmergencyCard: Show emergency contacts with quick-call functionality
- PathwayCard: Display care pathways with icons and notifications
- DocumentAttachmentList: Manage downloadable healthcare documents
- Customizable Theme: Override colors, fonts, spacing, and shadows
- TypeScript: Full type safety with comprehensive interfaces

Installation

``bash
npm install @egintegrations/healthcare-ui
`

$3

`bash
npm install react react-native @expo/vector-icons
`

Usage

$3

Display healthcare staff contact information with action buttons:

`tsx
import { ContactCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

contact={{
id: '1',
name: 'Dr. Sarah Johnson',
title: 'Cardiologist',
avatar: 'https://example.com/avatar.jpg',
phone: '+1234567890',
email: 'sarah.johnson@hospital.com',
department: 'Cardiology',
extension: '1234',
group: 'Primary Care',
}}
iconComponent={Ionicons}
onCall={(phone) => console.log('Calling:', phone)}
onEmail={(email) => console.log('Emailing:', email)}
onWhatsApp={(phone) => console.log('WhatsApp:', phone)}
/>
`

#### Props

- contact (required): Contact information object
- theme?: Custom theme overrides
- onCall?: Custom call handler (default: uses Linking.openURL)
- onEmail?: Custom email handler (default: uses mailto:)
- onWhatsApp?: Custom WhatsApp handler (default: uses whatsapp://)
- iconComponent?: Icon component (e.g., Ionicons from @expo/vector-icons)

$3

Display emergency contact information with prominent call buttons:

`tsx
import { EmergencyCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

emergencyInfo={{
title: 'Emergency Contacts',
location: 'London, UK',
numbers: [
{ label: 'Emergency Services', number: '999', urgent: true },
{ label: 'Hospital', number: '+44 20 1234 5678', urgent: false },
],
resources: {
embassy: 'US Embassy: +44 20 7499 9000',
localHospitals: ['London Hospital', 'St. Mary\'s Hospital'],
},
}}
iconComponent={Ionicons}
loading={false}
onCall={(number, label) => console.log('Emergency call:', label, number)}
/>
`

#### Props

- emergencyInfo: Emergency contact information (or null if unavailable)
- loading?: Show loading state (default: false)
- theme?: Custom theme overrides
- onCall?: Custom call handler
- iconComponent?: Icon component

$3

Display care pathways with color-coded icons and notifications:

`tsx
import { PathwayCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

pathway={{
id: '1',
name: 'Emergency Services',
description: 'Emergency contact information and protocols',
color: '#DC2626',
icon: 'medkit',
notification: {
enabled: true,
message: 'Updated today',
},
}}
onPress={() => navigation.navigate('PathwayDetail', { id: '1' })}
iconComponent={Ionicons}
/>
`

#### Props

- pathway (required): Pathway information object
- onPress (required): Handler when pathway is tapped
- theme?: Custom theme overrides
- iconComponent?: Icon component

$3

Display a list of downloadable documents:

`tsx
import { DocumentAttachmentList } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

heading="Patient Resources"
documents={[
{
id: '1',
label: 'Treatment Guide',
url: 'https://example.com/guide.pdf',
fileType: 'pdf',
description: 'Comprehensive guide to your treatment plan',
},
{
id: '2',
label: 'Medication List',
url: 'https://example.com/meds.pdf',
fileType: 'pdf',
description: 'Current medications and dosages',
},
]}
iconComponent={Ionicons}
onDownload={(doc) => {
// Handle document download
console.log('Downloading:', doc.label);
}}
/>
`

#### Props

- documents?: Array of document objects (component hidden if empty)
- heading?: Section heading (default: 'Downloads')
- theme?: Custom theme overrides
- onDownload?: Download handler (receives document object)
- iconComponent?: Icon component

Theme Customization

All components accept a theme prop for customization:

`tsx
import { ContactCard, defaultTheme, mergeTheme } from '@egintegrations/healthcare-ui';

const customTheme = mergeTheme({
colors: {
primary: '#0066CC',
danger: '#DC2626',
// ... other color overrides
},
fonts: {
small: 12,
body: 14,
h2: 20,
h3: 16,
},
spacing: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
radii: {
sm: 4,
md: 8,
},
});


`

$3

The package includes a default healthcare theme:

`tsx
{
colors: {
primary: '#0066CC',
secondary: '#00A86B',
white: '#FFFFFF',
navy: '#1A365D',
blue: '#0066CC',
green: '#00A86B',
danger: '#DC2626',
error: '#D14343',
grey200: '#E5E7EB',
grey600: '#6B7280',
grey700: '#4B5563',
grey800: '#1F2937',
},
fonts: {
small: 12,
body: 14,
h2: 20,
h3: 16,
},
spacing: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
radii: {
sm: 4,
md: 8,
},
shadows: {
medium: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
},
}
`

TypeScript

Full TypeScript support with exported types:

`tsx
import type {
Contact,
DocumentAttachment,
Pathway,
EmergencyInfo,
EmergencyNumber,
HealthcareTheme,
ContactCardProps,
EmergencyCardProps,
PathwayCardProps,
DocumentAttachmentListProps,
} from '@egintegrations/healthcare-ui';
`

Complete Example

`tsx
import React from 'react';
import { ScrollView, View } from 'react-native';
import {
ContactCard,
EmergencyCard,
PathwayCard,
DocumentAttachmentList,
mergeTheme,
} from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

const customTheme = mergeTheme({
colors: {
primary: '#0066CC',
danger: '#DC2626',
},
});

export default function HealthcareScreen() {
const contacts = [
{
id: '1',
name: 'Dr. Sarah Johnson',
title: 'Cardiologist',
avatar: 'https://example.com/avatar.jpg',
phone: '+1234567890',
email: 'sarah@hospital.com',
department: 'Cardiology',
},
];

const pathways = [
{
id: '1',
name: 'Emergency Services',
description: 'Emergency contact information',
color: '#DC2626',
icon: 'medkit',
},
];

const documents = [
{
id: '1',
label: 'Treatment Guide',
url: 'https://example.com/guide.pdf',
fileType: 'pdf',
description: 'Your treatment plan',
},
];

const emergencyInfo = {
title: 'Emergency Contacts',
location: 'London, UK',
numbers: [
{ label: 'Emergency', number: '999', urgent: true },
],
};

return (


emergencyInfo={emergencyInfo}
iconComponent={Ionicons}
theme={customTheme}
/>

{pathways.map((pathway) => (
key={pathway.id}
pathway={pathway}
onPress={() => console.log('Pathway:', pathway.name)}
iconComponent={Ionicons}
theme={customTheme}
/>
))}

{contacts.map((contact) => (
key={contact.id}
contact={contact}
iconComponent={Ionicons}
theme={customTheme}
/>
))}

documents={documents}
iconComponent={Ionicons}
theme={customTheme}
onDownload={(doc) => console.log('Download:', doc.label)}
/>


);
}
`

Source Project

Extracted from Care-Resources:
- ContactCard: src/components/ContactCard.tsx
- EmergencyCard: src/components/EmergencyCard.tsx
- PathwayCard: src/components/PathwayCard.tsx
- DocumentAttachmentList: src/components/DocumentAttachmentList.tsx`

Refactored with:
- Theme provider extraction to pluggable theme system
- Service dependencies removed (download manager, location service)
- Custom handler props for flexibility
- Optional icon component for different icon libraries

License

MIT

Contributing

See the main egi-comp-library repository for contribution guidelines.