Healthcare-specific React Native UI components including ContactCard, EmergencyCard, PathwayCard, and DocumentAttachmentList for building healthcare mobile applications.
npm install @egintegrations/healthcare-uiHealthcare-specific React Native UI components for building healthcare mobile applications. Includes contact cards, emergency information, care pathways, and document management.
- 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
``bash`
npm install @egintegrations/healthcare-ui
`bash`
npm install react react-native @expo/vector-icons
Display healthcare staff contact information with action buttons:
`tsx
import { ContactCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';
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 objecttheme?
- : Custom theme overridesonCall?
- : 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)
Display emergency contact information with prominent call buttons:
`tsx
import { EmergencyCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';
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 overridesonCall?
- : Custom call handlericonComponent?
- : Icon component
Display care pathways with color-coded icons and notifications:
`tsx
import { PathwayCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';
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 objectonPress
- (required): Handler when pathway is tappedtheme?
- : Custom theme overridesiconComponent?
- : Icon component
Display a list of downloadable documents:
`tsx
import { DocumentAttachmentList } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';
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 overridesonDownload?
- : Download handler (receives document object)iconComponent?
- : Icon component
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,
},
});
`
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,
},
},
}
Full TypeScript support with exported types:
`tsx`
import type {
Contact,
DocumentAttachment,
Pathway,
EmergencyInfo,
EmergencyNumber,
HealthcareTheme,
ContactCardProps,
EmergencyCardProps,
PathwayCardProps,
DocumentAttachmentListProps,
} from '@egintegrations/healthcare-ui';
`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 (
iconComponent={Ionicons}
theme={customTheme}
/>
{pathways.map((pathway) => (
pathway={pathway}
onPress={() => console.log('Pathway:', pathway.name)}
iconComponent={Ionicons}
theme={customTheme}
/>
))}
{contacts.map((contact) => (
contact={contact}
iconComponent={Ionicons}
theme={customTheme}
/>
))}
iconComponent={Ionicons}
theme={customTheme}
onDownload={(doc) => console.log('Download:', doc.label)}
/>
);
}
`
Extracted from Care-Resources:
- ContactCard: src/components/ContactCard.tsxsrc/components/EmergencyCard.tsx
- EmergencyCard: src/components/PathwayCard.tsx
- PathwayCard: src/components/DocumentAttachmentList.tsx`
- DocumentAttachmentList:
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
MIT
See the main egi-comp-library repository for contribution guidelines.