Component

PhotoCarousel

Swipeable image carousel with pagination dots and optional auto-scroll.

React Native

Photo carousel

Swipeable image carousel with pagination dots.

import { PhotoCarousel } from '@sohantalukder/rn-kit';

const photos = [
  {
    id: 'front',
    uri: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee',
    accessibilityLabel: 'Front view',
  },
  {
    id: 'inside',
    uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156',
    accessibilityLabel: 'Interior view',
  },
];

export function ListingPhotos() {
  return (
    <PhotoCarousel
      photos={photos}
      carouselHeight={220}
      onPhotoChange={(index) => console.log('Current photo', index)}
    />
  );
}

Live component

defaultsingle imageauto scroll

Use consistent image aspect ratios.
Avoid auto-scroll on dense forms.

Usage

import { PhotoCarousel } from '@sohantalukder/rn-kit';

import { PhotoCarousel } from '@sohantalukder/rn-kit';

const photos = [
  {
    id: 'front',
    uri: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee',
    accessibilityLabel: 'Front view',
  },
  {
    id: 'inside',
    uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156',
    accessibilityLabel: 'Interior view',
  },
];

export function ListingPhotos() {
  return (
    <PhotoCarousel
      photos={photos}
      carouselHeight={220}
      onPhotoChange={(index) => console.log('Current photo', index)}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

photosPhotoItem[][]Images rendered by the carousel.

carouselHeightunknown-Configures carousel height for PhotoCarousel.

autoScrollbooleanfalseAutomatically advances carousel items on an interval.

onPhotoChangeunknown-Configures on photo change for PhotoCarousel.

Theme

PhotoCarousel reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
single image
auto scroll

Best Practices

Use consistent image aspect ratios.
Avoid auto-scroll on dense forms.