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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

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

Component BehaviorCopy Anchor Link

Thumbnail GalleryCopy Anchor Link

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

Modal PreviewCopy Anchor Link

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

Performance FeaturesCopy Anchor Link

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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• 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 FeaturesCopy Anchor Link

Navigation ControlsCopy Anchor Link

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

Rotation ControlsCopy Anchor Link

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

Performance ConsiderationsCopy Anchor Link

Large Image SetsCopy Anchor Link

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

Image LoadingCopy Anchor Link

• 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