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 Example

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;

Props

Name	Type	Required	Default	Description
title	string	✓	-	Resource or source title
titleStyle	StyleProp<TextStyle>	-	-	Custom title text styles
titleTestID	string	-	-	Test ID for title text
imageProps	OptimizedImageProps	-	-	Optional image properties
style	StyleProp<ViewStyle>	-	-	Custom container styles

Inherits all props from ViewProps

Component Behavior

Layout System

• 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 Integration

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

Styling

Theme Colors Used

• 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)