# ObservationDetail.Resource

Canonical page: https://docs.ovok.com/native-sdk/guide/components/observation-detail/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 [#basic-example]

```typescript
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/observation-detail` API reference](/native-sdk/reference/observation-detail).

## Component Behavior [#component-behavior]

### Layout System [#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 [#image-integration]

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

## Styling [#styling]

### Theme Colors Used [#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)