laxmanhalaki/NeoScan_Physician
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c7288f54a8
NeoScan_Physician/README.md
yashwin-foxy c7288f54a8 first commit for radiologist
2025-07-14 18:34:05 +05:30

699 lines
26 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

1. RADIOLOGIST APP - DETAILED WORKFLOW
1.1 App Launch & Authentication
App Launch → Biometric Auth → Dashboard Loading
↓
Load Case Queue → Priority Sort → Display Cases
↓
Critical (RED) → Urgent (ORANGE) → Routine (GREEN)
1.2 Critical Finding Workflow (Acute Subdural Hemorrhage)
STEP 1: Alert Reception
Push Notification → "CRITICAL - Acute Subdural Hemorrhage"
↓
Tap Notification → App Opens → Case Preview
↓
Patient: John Doe, Age 45, Head Trauma
AI Confidence: 93%
Midline Shift: 7mm
STEP 2: Full Case Review
Case Preview → Open DICOM Viewer
↓
AI Overlay ON → Hemorrhage Highlighted
↓
Review Images → Confirm Finding → Add Observations
↓
"Large acute subdural hemorrhage with mass effect"
STEP 3: Report Generation
Voice-to-Text → "Acute subdural hemorrhage..."
↓
Review Text → Edit if needed → Submit Report
↓
Preliminary Report Sent (< 5 minutes)
STEP 4: System Learning
System Logs → Radiologist Confirmation
↓
Time Metrics Recorded → Model Improvement Data
1.3 Routine Scan Workflow (Negative Finding)
STEP 1: Queue Processing
Dashboard → Routine Queue → Select Case
↓
Patient: Jane Smith, Age 30, Headache
AI: No acute abnormalities (99% confidence)
STEP 2: Confirmation Review
DICOM Viewer → Quick Review → Confirm Negative
↓
"No acute intracranial abnormality"
STEP 3: Report & Documentation
Submit Report → System Logs Concordance
↓
Next Case in Queue
1.4 System Uncertainty Protocol
AI Confidence 70-85% → "REVIEW RECOMMENDED"
↓
Special Yellow Flag → Enhanced Attention Required
↓
Detailed Review → Feedback to System
3. RADIOLOGIST APP WIREFRAMES
3.1 Login Screen
+------------------------+
| [HOSPITAL LOGO] |
| |
| Radiologist Portal |
| |
| [👤 Dr. Smith] |
| [🔒 Biometric Login] |
| |
| [Face ID Icon] |
| Touch to Login |
| |
| OR |
| |
| PIN: [****] |
| [LOGIN] |
| |
| Emergency Access |
+------------------------+
3.2 Dashboard - Case Queue
+------------------------+
| Dr. Smith [🔔3][⚙️] |
| On-Call Status: ACTIVE |
| |
| CRITICAL CASES |
| 🔴 Bed 3 - Hemorrhage |
| 📱 2 min ago |
| AI: 93% confidence |
| [REVIEW NOW] |
| |
| 🔴 Bed 7 - Stroke |
| 📱 5 min ago |
| AI: 87% confidence |
| [REVIEW NOW] |
| |
| URGENT CASES (4) |
| 🟡 Show All |
| |
| ROUTINE CASES (12) |
| 🟢 Show All |
+------------------------+
3.3 Critical Case Details
+------------------------+
| ← CRITICAL CASE |
| |
| Patient: John Doe, 45M |
| Bed: 3 | Time: 14:35 |
| Clinical: Head trauma |
| |
| AI ANALYSIS: |
| 🔴 Acute Subdural |
| Confidence: 93% |
| Midline Shift: 7mm |
| Mass Effect: Present |
| |
| [VIEW DICOM IMAGES] |
| [VOICE REPORT] |
| [QUICK REPORT] |
| |
| Status: PENDING REVIEW |
+------------------------+
3.4 DICOM Viewer
+------------------------+
| ← John Doe - CT Brain |
| |
| [ CT SCAN IMAGE ]|
| [ WITH AI OVERLAY ]|
| [ HEMORRHAGE ]|
| [ HIGHLIGHTED ]|
| |
| Tools: [🔍][📏][✏️] |
| AI: [ON] Conf: 93% |
| |
| Measurements: |
| • Hemorrhage: 3.2cm |
| • Midline: 7mm shift |
| |
| [🎤 START REPORT] |
+------------------------+
3.5 Voice Report Interface
+------------------------+
| ← Voice Report |
| |
| [🎤 RECORDING 01:23] |
| |
| "There is a large |
| acute subdural |
| hemorrhage in the |
| right frontoparietal |
| region..." |
| |
| [PAUSE] [STOP] [PLAY] |
| |
| [SAVE DRAFT] |
| [SUBMIT REPORT] |
| |
| Estimated: 2 min left |
+------------------------+
5.1 React Native Project Structure
🏥 RADIOLOGIST APP STRUCTURE
NeoScan_Radiologist/
│
├── app/
│ ├── modules/ # 🌐 Feature-wise modular architecture
│ │ ├── Auth/ # 🔐 Authentication Module
│ │ │ ├── components/
│ │ │ │ ├── BiometricLogin.tsx
│ │ │ │ ├── PinInput.tsx
│ │ │ │ ├── EmergencyAccess.tsx
│ │ │ │ └── index.ts
│ │ │ ├── screens/
│ │ │ │ ├── LoginScreen.tsx
│ │ │ │ ├── SetupBiometricScreen.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useAuth.ts
│ │ │ │ ├── useBiometric.ts
│ │ │ │ └── index.ts
│ │ │ ├── redux/
│ │ │ │ ├── authSlice.ts
│ │ │ │ ├── authActions.ts
│ │ │ │ ├── authSelectors.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── authAPI.ts
│ │ │ │ ├── biometricService.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── AuthService.test.ts
│ │ │ │ ├── LoginScreen.test.tsx
│ │ │ │ └── authSlice.test.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── Dashboard/ # 📊 Dashboard Module
│ │ │ ├── components/
│ │ │ │ ├── CaseQueue.tsx
│ │ │ │ ├── CaseCard.tsx
│ │ │ │ ├── PriorityIndicator.tsx
│ │ │ │ ├── StatsPanel.tsx
│ │ │ │ ├── FilterBar.tsx
│ │ │ │ └── index.ts
│ │ │ ├── screens/
│ │ │ │ ├── DashboardScreen.tsx
│ │ │ │ ├── CaseListScreen.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useCaseQueue.ts
│ │ │ │ ├── useRealTimeUpdates.ts
│ │ │ │ ├── useFilterCases.ts
│ │ │ │ └── index.ts
│ │ │ ├── redux/
│ │ │ │ ├── dashboardSlice.ts
│ │ │ │ ├── caseQueueSlice.ts
│ │ │ │ ├── dashboardActions.ts
│ │ │ │ ├── dashboardSelectors.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── caseAPI.ts
│ │ │ │ ├── websocketService.ts
│ │ │ │ ├── notificationService.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── CaseQueue.test.tsx
│ │ │ │ ├── dashboardSlice.test.ts
│ │ │ │ └── caseAPI.test.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── CaseReview/ # 🔍 Case Review Module
│ │ │ ├── components/
│ │ │ │ ├── DICOMViewer.tsx
│ │ │ │ ├── AIOverlay.tsx
│ │ │ │ ├── MeasurementTools.tsx
│ │ │ │ ├── AnnotationTools.tsx
│ │ │ │ ├── CaseMetadata.tsx
│ │ │ │ ├── PriorStudyComparison.tsx
│ │ │ │ └── index.ts
│ │ │ ├── screens/
│ │ │ │ ├── CaseDetailsScreen.tsx
│ │ │ │ ├── DICOMViewerScreen.tsx
│ │ │ │ ├── ComparisonScreen.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useDICOMViewer.ts
│ │ │ │ ├── useAIOverlay.ts
│ │ │ │ ├── useMeasurements.ts
│ │ │ │ ├── useAnnotations.ts
│ │ │ │ └── index.ts
│ │ │ ├── redux/
│ │ │ │ ├── caseReviewSlice.ts
│ │ │ │ ├── dicomSlice.ts
│ │ │ │ ├── aiAnalysisSlice.ts
│ │ │ │ ├── caseReviewActions.ts
│ │ │ │ ├── caseReviewSelectors.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── dicomAPI.ts
│ │ │ │ ├── aiAnalysisAPI.ts
│ │ │ │ ├── dicomParser.ts
│ │ │ │ ├── imageProcessor.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── DICOMViewer.test.tsx
│ │ │ │ ├── AIOverlay.test.tsx
│ │ │ │ ├── dicomParser.test.ts
│ │ │ │ └── caseReviewSlice.test.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── Reporting/ # 📝 Reporting Module
│ │ │ ├── components/
│ │ │ │ ├── VoiceRecorder.tsx
│ │ │ │ ├── ReportEditor.tsx
│ │ │ │ ├── ReportTemplate.tsx
│ │ │ │ ├── QuickReportButtons.tsx
│ │ │ │ ├── ReportPreview.tsx
│ │ │ │ └── index.ts
│ │ │ ├── screens/
│ │ │ │ ├── ReportingScreen.tsx
│ │ │ │ ├── VoiceReportScreen.tsx
│ │ │ │ ├── ReportHistoryScreen.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useVoiceRecording.ts
│ │ │ │ ├── useReportGeneration.ts
│ │ │ │ ├── useSpeechToText.ts
│ │ │ │ └── index.ts
│ │ │ ├── redux/
│ │ │ │ ├── reportingSlice.ts
│ │ │ │ ├── voiceRecordingSlice.ts
│ │ │ │ ├── reportingActions.ts
│ │ │ │ ├── reportingSelectors.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── reportAPI.ts
│ │ │ │ ├── voiceToTextAPI.ts
│ │ │ │ ├── reportTemplateService.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── VoiceRecorder.test.tsx
│ │ │ │ ├── reportingSlice.test.ts
│ │ │ │ └── voiceToTextAPI.test.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── Notifications/ # 🔔 Notifications Module
│ │ │ ├── components/
│ │ │ │ ├── NotificationPanel.tsx
│ │ │ │ ├── AlertBanner.tsx
│ │ │ │ ├── CriticalAlert.tsx
│ │ │ │ ├── NotificationSettings.tsx
│ │ │ │ └── index.ts
│ │ │ ├── screens/
│ │ │ │ ├── NotificationsScreen.tsx
│ │ │ │ ├── AlertDetailsScreen.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useNotifications.ts
│ │ │ │ ├── usePushNotifications.ts
│ │ │ │ ├── useAlertHandling.ts
│ │ │ │ └── index.ts
│ │ │ ├── redux/
│ │ │ │ ├── notificationsSlice.ts
│ │ │ │ ├── alertsSlice.ts
│ │ │ │ ├── notificationActions.ts
│ │ │ │ ├── notificationSelectors.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── pushNotificationService.ts
│ │ │ │ ├── alertService.ts
│ │ │ │ ├── notificationAPI.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── NotificationPanel.test.tsx
│ │ │ │ ├── alertService.test.ts
│ │ │ │ └── notificationsSlice.test.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── Analytics/ # 📈 Analytics Module
│ │ │ ├── components/
│ │ │ │ ├── PerformanceMetrics.tsx
│ │ │ │ ├── ResponseTimeChart.tsx
│ │ │ │ ├── ConcordanceStats.tsx
│ │ │ │ ├── WorkloadAnalysis.tsx
│ │ │ │ └── index.ts
│ │ │ ├── screens/
│ │ │ │ ├── AnalyticsScreen.tsx
│ │ │ │ ├── PerformanceScreen.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useAnalytics.ts
│ │ │ │ ├── usePerformanceMetrics.ts
│ │ │ │ └── index.ts
│ │ │ ├── redux/
│ │ │ │ ├── analyticsSlice.ts
│ │ │ │ ├── analyticsActions.ts
│ │ │ │ ├── analyticsSelectors.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── analyticsAPI.ts
│ │ │ │ ├── metricsCollector.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── PerformanceMetrics.test.tsx
│ │ │ │ ├── analyticsSlice.test.ts
│ │ │ │ └── metricsCollector.test.ts
│ │ │ └── index.ts
│ │ │
│ │ └── Profile/ # 👤 User Profile Module
│ │ ├── components/
│ │ │ ├── ProfileHeader.tsx
│ │ │ ├── SettingsPanel.tsx
│ │ │ ├── PreferencesForm.tsx
│ │ │ ├── SecuritySettings.tsx
│ │ │ └── index.ts
│ │ ├── screens/
│ │ │ ├── ProfileScreen.tsx
│ │ │ ├── SettingsScreen.tsx
│ │ │ ├── PreferencesScreen.tsx
│ │ │ └── index.ts
│ │ ├── hooks/
│ │ │ ├── useProfile.ts
│ │ │ ├── useSettings.ts
│ │ │ └── index.ts
│ │ ├── redux/
│ │ │ ├── profileSlice.ts
│ │ │ ├── settingsSlice.ts
│ │ │ ├── profileActions.ts
│ │ │ ├── profileSelectors.ts
│ │ │ └── index.ts
│ │ ├── services/
│ │ │ ├── profileAPI.ts
│ │ │ ├── settingsAPI.ts
│ │ │ └── index.ts
│ │ ├── __tests__/
│ │ │ ├── ProfileHeader.test.tsx
│ │ │ ├── profileSlice.test.ts
│ │ │ └── profileAPI.test.ts
│ │ └── index.ts
│ │
│ ├── navigation/ # 🧭 Navigation Setup
│ │ ├── AppNavigator.tsx
│ │ ├── AuthNavigator.tsx
│ │ ├── MainNavigator.tsx
│ │ ├── TabNavigator.tsx
│ │ ├── ModalNavigator.tsx
│ │ ├── navigationTypes.ts
│ │ └── index.ts
│ │
│ ├── redux/ # 🗃️ Redux Store Setup
│ │ ├── store.ts
│ │ ├── rootReducer.ts
│ │ ├── middleware.ts
│ │ ├── persistConfig.ts
│ │ └── index.ts
│ │
│ ├── constants/ # 📋 Global Constants
│ │ ├── apiEndpoints.ts
│ │ ├── appConstants.ts
│ │ ├── errorMessages.ts
│ │ ├── notificationTypes.ts
│ │ ├── priorityLevels.ts
│ │ └── index.ts
│ │
│ ├── App.tsx # 🎯 Root Component
│ └── index.ts # 🚀 App Bootstrap
│
├── shared/ # ✅ Shared Components & Utilities
│ ├── src/
│ │ ├── components/ # 🎨 Global UI Components
│ │ │ ├── Button/
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── Button.styles.ts
│ │ │ │ ├── Button.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── Input/
│ │ │ │ ├── TextInput.tsx
│ │ │ │ ├── SearchInput.tsx
│ │ │ │ ├── Input.styles.ts
│ │ │ │ ├── Input.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── Modal/
│ │ │ │ ├── Modal.tsx
│ │ │ │ ├── ConfirmModal.tsx
│ │ │ │ ├── AlertModal.tsx
│ │ │ │ ├── Modal.styles.ts
│ │ │ │ ├── Modal.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── Card/
│ │ │ │ ├── Card.tsx
│ │ │ │ ├── InfoCard.tsx
│ │ │ │ ├── Card.styles.ts
│ │ │ │ ├── Card.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── Loading/
│ │ │ │ ├── Spinner.tsx
│ │ │ │ ├── LoadingOverlay.tsx
│ │ │ │ ├── Loading.styles.ts
│ │ │ │ └── index.ts
│ │ │ ├── Icons/
│ │ │ │ ├── CustomIcon.tsx
│ │ │ │ ├── IconButton.tsx
│ │ │ │ ├── Icons.types.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── theme/ # 🎨 Design System
│ │ │ ├── colors.ts
│ │ │ ├── spacing.ts
│ │ │ ├── typography.ts
│ │ │ ├── shadows.ts
│ │ │ ├── borderRadius.ts
│ │ │ ├── animations.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── assets/ # 📁 Static Assets
│ │ │ ├── icons/
│ │ │ │ ├── critical-alert.svg
│ │ │ │ ├── urgent-alert.svg
│ │ │ │ ├── routine-alert.svg
│ │ │ │ └── index.ts
│ │ │ ├── images/
│ │ │ │ ├── logo.png
│ │ │ │ ├── placeholder.png
│ │ │ │ └── index.ts
│ │ │ ├── fonts/
│ │ │ │ ├── Roboto-Regular.ttf
│ │ │ │ ├── Roboto-Bold.ttf
│ │ │ │ └── index.ts
│ │ │ └── sounds/
│ │ │ ├── critical-alert.wav
│ │ │ ├── urgent-alert.wav
│ │ │ └── routine-alert.wav
│ │ │
│ │ ├── utils/ # 🛠️ Utility Functions
│ │ │ ├── dateTime/
│ │ │ │ ├── formatDate.ts
│ │ │ │ ├── timeAgo.ts
│ │ │ │ └── index.ts
│ │ │ ├── validation/
│ │ │ │ ├── validators.ts
│ │ │ │ ├── schemas.ts
│ │ │ │ └── index.ts
│ │ │ ├── helpers/
│ │ │ │ ├── debounce.ts
│ │ │ │ ├── throttle.ts
│ │ │ │ ├── formatters.ts
│ │ │ │ └── index.ts
│ │ │ ├── constants/
│ │ │ │ ├── regex.ts
│ │ │ │ ├── formats.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── hooks/ # 🎣 Shared Custom Hooks
│ │ │ ├── useTheme.ts
│ │ │ ├── useDebounce.ts
│ │ │ ├── useKeyboard.ts
│ │ │ ├── useNetworkStatus.ts
│ │ │ ├── useOrientation.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── types/ # 📝 TypeScript Types
│ │ │ ├── common.ts
│ │ │ ├── api.ts
│ │ │ ├── navigation.ts
│ │ │ ├── theme.ts
│ │ │ └── index.ts
│ │ │
│ │ └── index.ts # 📦 Barrel Export
│ │
│ ├── package.json # 📦 Shared Package Config
│ └── tsconfig.json # ⚙️ TypeScript Config
│
├── __tests__/ # 🧪 Global Tests
│ ├── App.test.tsx
│ ├── Navigation.test.tsx
│ ├── Redux.test.tsx
│ └── Integration.test.tsx
│
├── assets/ # 🖼️ App-wide Assets
│ ├── images/
│ ├── videos/
│ └── audio/
│
├── android/ # 🤖 Android Native
├── ios/ # 🍎 iOS Native
├── index.js # 🎯 RN Entry Point
├── package.json # 📦 Root Dependencies
├── tsconfig.json # ⚙️ Base TypeScript Config
├── metro.config.js # 📦 Metro Bundler Config
├── babel.config.js # 🔄 Babel Config
└── .eslintrc.js # 📏 ESLint Config
Key Features:
Real-time WebSocket connections
Offline caching for critical cases
Biometric authentication for radiologists
Performance monitoring with timing metrics
Radiologist App Options
Option 1: "Clinical Gray Spectrum"
Primary: #2C3E50 (Dark Blue-Gray)
Secondary: #34495E (Medium Blue-Gray)
Tertiary: #95A5A6 (Light Gray)
Text Primary: #2C3E50 (Dark Blue-Gray)
Text Secondary: #7F8C8D (Medium Gray)
Text Muted: #BDC3C7 (Light Gray)
Background: #F8F9FA (Light Gray)
Background Alt: #E9ECEF (Darker Light Gray)
Success: #27AE60 (Green)
Warning: #F39C12 (Orange)
Error: #E74C3C (Red)
Info: #3498DB (Blue)
Option 2: "Deep Tech Purple"
Primary: #6C5CE7 (Modern Purple)
Secondary: #A29BFE (Light Purple)
Tertiary: #DDD6FE (Very Light Purple)
Text Primary: #2D3436 (Charcoal)
Text Secondary: #636E72 (Gray)
Text Muted: #B2BEC3 (Light Gray)
Background: #FFFFFF (White)
Background Alt: #F8F7FF (Very Light Purple)
Success: #00B894 (Teal)
Warning: #FDCB6E (Yellow)
Error: #FD79A8 (Pink)
Info: #74B9FF (Light Blue)
Option 3: "Dark Professional"
Primary: #1A365D (Navy Blue)
Secondary: #2D3748 (Dark Gray)
Tertiary: #4A5568 (Medium Gray)
Text Primary: #1A202C (Very Dark Gray)
Text Secondary: #4A5568 (Medium Gray)
Text Muted: #718096 (Light Gray)
Background: #FFFFFF (White)
Background Alt: #F7FAFC (Off White)
Success: #38A169 (Green)
Warning: #DD6B20 (Orange)
Error: #E53E3E (Red)
Info: #3182CE (Blue)
Option 4: "Sophisticated Slate"
Primary: #475569 (Slate Gray)
Secondary: #64748B (Medium Slate)
Tertiary: #CBD5E1 (Light Slate)
Text Primary: #0F172A (Almost Black)
Text Secondary: #475569 (Slate Gray)
Text Muted: #94A3B8 (Light Slate)
Background: #FFFFFF (White)
Background Alt: #F8FAFC (Very Light Slate)
Success: #059669 (Emerald)
Warning: #D97706 (Amber)
Error: #DC2626 (Red)
Info: #0284C7 (Sky Blue)
Radiologist App - "Clinical Blue Interface"
Primary: #5B7CE6 (Blue Purple - from the selected buttons)
Secondary: #7B94F0 (Light Blue Purple)
Tertiary: #E8EFFF (Very Light Blue)
Quaternary: #3B5998 (Deep Blue)
Text Primary: #1A1D29 (Almost Black)
Text Secondary: #4A5568 (Medium Gray)
Text Muted: #9CA3AF (Light Gray)
Background: #FFFFFF (White)
Background Alt: #F8FAFF (Very Light Blue Tint)
Background Accent: #F1F5FF (Soft Blue)
Card Background: #FFFFFF (White with shadow)
Success: #10B981 (Green - from the security icon)
Warning: #F59E0B (Amber)
Error: #EF4444 (Red)
Info: #3B82F6 (Blue)
Border: #E5E7EB (Light Gray)
Selected State: #5B7CE6 (Same as Primary)
Inactive State: #F3F4F6 (Light Gray)
Shadow: rgba(91, 124, 230, 0.1) (Blue Shadow)
Gradient Background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Dark professional Prefered
```sh
# Using npm
npm start
# OR using Yarn
yarn start
```
## Step 2: Build and run your app
With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
### Android
```sh
# Using npm
npm run android
# OR using Yarn
yarn android
```
### iOS
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
```sh
bundle install
```
Then, and every time you update your native dependencies, run:
```sh
bundle exec pod install
```
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
```sh
# Using npm
npm run ios
# OR using Yarn
yarn ios
```
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
This is one way to run your app — you can also build it directly from Android Studio or Xcode.
Reference in New Issue View Git Blame Copy Permalink