The crash occurs because you're calling `document.getElementById()` inside your 
component. This is a web-only API that doesn't exist in React Native.

Here's what's happening: React Native doesn't use a DOM (Document Object Model) 
like web browsers do. Instead, it renders native mobile components directly. 
When your code tries to call `document.getElementById()`, JavaScript throws a 
ReferenceError because the `document` object simply doesn't exist in the React 
Native runtime environment.

In web development, you use `document.getElementById()` to access DOM elements 
directly. In React Native, you should use refs instead, which work the same way 
across web and native platforms. The `useRef` hook gives you a reference to a 
component instance without relying on browser-specific APIs.

// Problem: Bug hidden in complex nested logic
const getPatientStatus = (patient: Patient) => {
  return patient.admissions
    .filter(a => a.active)
    .reduce((status, admission) => {
      const vitals = admission.vitals?.filter(v => v.timestamp > Date.now() - 86400000)
      return vitals?.some(v => v.critical) ? 'critical' : 
             vitals?.some(v => v.abnormal) ? 'warning' : status
    }, 'stable')
}

// The bug: Recent critical vitals from inactive admissions are ignored, 
// and the reduce function doesn't properly aggregate statuses

// Solution: Simplify the logic into clear, testable steps
const getPatientStatus = (patient: Patient) => {
  // Get only active admissions
  const activeAdmissions = patient.admissions.filter(a => a.active)
  
  // Collect all recent vitals from active admissions
  const oneDayAgo = Date.now() - 86400000
  const recentVitals = activeAdmissions.flatMap(admission => 
    admission.vitals?.filter(v => v.timestamp > oneDayAgo) ?? []
  )
  
  // Check for critical conditions first
  if (recentVitals.some(v => v.critical)) {
    return 'critical'
  }
  
  // Then check for warnings
  if (recentVitals.some(v => v.abnormal)) {
    return 'warning'
  }
  
  // Default to stable
  return 'stable'
}

// Problem: Using document.getElementById (web-only API)
const handleFocus = () => {
  const input = document.getElementById('patient-name')
  input?.focus()
}

// Solution: Use useRef (works in both web and React Native)
import { useRef } from 'react'

const inputRef = useRef<TextInput>(null)

const handleFocus = () => {
  inputRef.current?.focus()
}

// In your JSX:
<TextInput
  ref={inputRef}
  placeholder="Patient Name"
/>

The bug is now fixed—your component will no longer crash when the patient data 
updates. However, I notice this component has several interrelated issues beyond 
the immediate bug:

1. The conditional rendering logic is deeply nested (4 levels of ternaries)
2. The mapped list items maintain local state that gets lost on re-renders
3. RTK Query is fetching the entire patient object when you only need vitals
4. The complexity of these interactions is what allowed this bug to hide

These issues didn't cause the crash directly, but they created the environment 
where bugs thrive—complex code with many moving parts and hidden dependencies. 
I recommend engaging the Refactoring Skill to simplify this component now that 
it's working correctly. The refactoring would reduce complexity, make future 
bugs obvious instead of hidden, and improve both readability and performance.

The goal isn't to make the code more sophisticated, but to make it simpler and 
more obvious. Simple code is debuggable code.

Would you like me to hand this off to the Refactoring Skill, or would you prefer 
to address these issues later?

The `expo-image` library you're using is version 1.x in SDK 53, which doesn't 
support the `contentPosition` prop you're trying to use. That feature was added 
in version 2.x (SDK 54+).

For now, you can achieve similar positioning using the `contentFit` prop combined 
with `style` positioning. If you need the exact `contentPosition` behavior, 
consider whether upgrading to SDK 54 is feasible for your project.

// Mutation must invalidate tags
updatePatient: builder.mutation<Patient, UpdatePatientParams>({
  query: ({ id, data }) => ({
    url: `/patients/${id}`,
    method: 'PUT',
    body: data
  }),
  invalidatesTags: (result, error, { id }) => [
    { type: 'Patient', id },
    'PatientList' // Also invalidate list views
  ]
})

// Query must provide tags
getPatient: builder.query<Patient, string>({
  query: (id) => `/patients/${id}`,
  providesTags: (result, error, id) => [
    { type: 'Patient', id }
  ]
})

// Over-fetching: Re-renders when any patient field changes
const { data: patient } = useGetPatientQuery(patientId)

// Optimized: Only re-renders when name changes
const { name } = useGetPatientQuery(patientId, {
  selectFromResult: ({ data }) => ({
    name: data?.name
  })
})

// Problem: Both queries run immediately, but second needs first's result
const { data: patient } = useGetPatientQuery(patientId)
const { data: vitals } = useGetVitalsQuery(patient?.mrn) // mrn might be undefined

// Solution: Use skipToken to prevent second query until data is ready
import { skipToken } from '@reduxjs/toolkit/query'

const { data: patient } = useGetPatientQuery(patientId)
const { data: vitals } = useGetVitalsQuery(patient?.mrn ?? skipToken)

import { useFocusEffect } from '@react-navigation/native'
import { useCallback, useState } from 'react'

function MonitorScreen({ patientId }: Props) {
  const [pollingInterval, setPollingInterval] = useState(0)
  
  // Start polling when screen is focused, stop when unfocused
  useFocusEffect(
    useCallback(() => {
      setPollingInterval(5000)
      return () => setPollingInterval(0)
    }, [])
  )
  
  const { data } = useGetVitalsQuery(patientId, {
    pollingInterval,
    skip: !pollingInterval
  })
}

Root Cause: [One-sentence description of what's causing the bug]

What's Happening: [2-3 sentence explanation of the execution flow]

Why It Fails in React Native: [Explain RN-specific constraints if applicable]

Fix:
[Code snippet showing the change]

Why This Works: [Explain how the fix addresses the root cause]

Prevention: [Brief guidance on avoiding similar issues]

Investigation Summary:
[Brief overview of what you investigated]

Root Cause Analysis:
[Detailed explanation of what's causing the bug and why]

React Native Context:
[Explain any RN-specific constraints or platform differences]

Solution:
[Code snippets with clear before/after comparison]

Verification:
[How to test that the fix works correctly]

Related Considerations:
[Other potential issues this fix might affect]

Refactoring Recommendation (if applicable):
[Whether this code would benefit from broader improvements]

Bug Status: ✓ Fixed

The immediate issue is resolved—[brief summary of what was fixed].

However, I've identified several structural concerns that would benefit from 
refactoring now that the code is working:

[List 2-4 specific refactoring opportunities]

These issues aren't causing bugs right now, but they make the code harder to 
maintain and more prone to future issues. The Refactoring Skill can help address 
these systematically.

Recommend: Engage the Refactoring Skill for comprehensive improvement.

User: "My component crashes when I update patient vitals"

Code Review Skill:
→ Investigates the crash
→ Finds it's due to stale closure in useEffect
→ Provides targeted fix with explanation
→ Notes the component also has nested conditionals and suboptimal loops
→ Recommends: "Bug is fixed. Consider refactoring for better maintainability."

User: "Yes, let's refactor"

Refactoring Skill:
→ Takes the now-working code
→ Simplifies nested conditionals with ts-pattern
→ Optimizes loop with proper memoization
→ Improves RTK Query usage with selectFromResult
→ Returns clean, maintainable code