ObservationDetail.Resource

A resource information component for displaying data source details with optional imagery. Used to indicate the origin or method of data collection in healthcare observations.

Basic ExampleCopy Anchor Link

import { ObservationDetail } from "@ovok/native";
import * as React from "react";

const BasicResource = () => (
  <ObservationDetail.Resource
    title="Manual added observation"
    imageProps={{
      uri: "https://placehold.co/30x30",
    }}
  />
);

export default BasicResource;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/observation-detail API reference.

Component BehaviorCopy Anchor Link

Layout SystemCopy Anchor Link

• Horizontal row layout with image and text
• Optional image display with fallback to text-only
• Consistent padding and spacing
• Theme-based border and styling

Image IntegrationCopy Anchor Link

• Uses OptimizedImage for efficient loading
• Automatically sizes and styles image container
• Graceful handling when no image provided

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.outlineVariant - Top border color
• theme.spacing(4) - Vertical padding (16px default)
• theme.spacing(6) - Horizontal padding (24px default)
• theme.spacing(2) - Gap between image and text (8px default)
• theme.spacing(6) - Image dimensions (24x24px default)
• theme.borderRadius(1) - Image border radius (4px default)