ObservationDetail.PhotoPreview

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

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

Name	Type	Required	Default	Description
photos	string[]	✓	-	Array of photo URIs to display
gap	number	-	theme.spacing(3)	Space between thumbnail items
thumbnailSize	number	-	100	Size of thumbnail images in pixels
previewContainerStyle	StyleProp<ViewStyle>	-	-	Custom styles for preview container
renderItem	ListRenderItem<string>	-	Default renderer	Custom thumbnail rendering function

Inherits all props from FlashListProps except specific overrides

Component Behavior

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

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

Performance Features

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

Styling

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

Navigation Controls

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

Rotation Controls

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

Performance Considerations

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

• OptimizedImage integration for efficient loading
• Progressive loading for large medical images
• Placeholder handling during load states
• Error state management for failed loads