# ObservationDetail.PhotoPreview

Canonical page: https://docs.ovok.com/native-sdk/guide/components/observation-detail/photo-preview

An advanced photo gallery component with thumbnail navigation and full-screen modal preview. Built on FlashList for high performance with large photo sets and includes rotation, navigation, and zoom capabilities.

## Basic Example [#basic-example]

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

const photos = Array.from(
  { length: 10 },
  (_, index) => `https://placehold.co/600x400/FFFFFF/000000/png?text=${index}`
);

const BasicPhotoPreview = () => (
  <ObservationDetail.PhotoPreview photos={photos} />
);

export default BasicPhotoPreview;
```

## 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]

### Thumbnail Gallery [#thumbnail-gallery]

- Horizontal scrolling FlashList for performance
- Active photo highlighting with theme colors
- Touch selection for photo navigation
- Configurable thumbnail sizes and spacing

### Modal Preview [#modal-preview]

- Full-screen photo viewing with animated transitions
- Left/right navigation between photos
- Rotation controls (90° increments)
- Safe area handling for modern devices

### Performance Features [#performance-features]

- FlashList optimization for large photo sets
- Efficient image loading and caching
- Smooth 60fps scrolling and transitions
- Memory-conscious image handling

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.primary` - Active thumbnail border
- `theme.colors.surface` - Modal button backgrounds
- `theme.colors.onSurface` - Modal button icons
- `theme.colors.outline` - Modal button borders
- `theme.spacing(3)` - Default gap between thumbnails
- `theme.borderRadius(2)` - Thumbnail corner radius
- `theme.borderRadius(99)` - Modal button corner radius

## Modal Features [#modal-features]

### Navigation Controls [#navigation-controls]

- Left/right arrow buttons for photo navigation
- Automatic disable on first/last photos
- Smooth transitions between images

### Rotation Controls [#rotation-controls]

- 90° rotation increments (left/right)
- Smooth animated rotations using react-native-reanimated
- Rotation state maintained per photo session

## Performance Considerations [#performance-considerations]

### Large Image Sets [#large-image-sets]

- FlashList optimization for 100+ photos
- Efficient viewport management and recycling
- Lazy loading of non-visible thumbnails
- Memory-conscious image caching

### Image Loading [#image-loading]

- OptimizedImage integration for efficient loading
- Placeholder and image-wrapper loading behavior; progressive rendering is not
  guaranteed by this component
- Placeholder handling during load states
- Error state management for failed loads