Name: React Native Image Slider Component
Author: exist08

Usage Examples

Simple and powerful

import React, { useState } from 'react';
import { ImageSlider } from 'react-native-image-slider-component';

const App = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  
  const images = [
    { uri: 'https://picsum.photos/seed/a/600/400' },
    { uri: 'https://picsum.photos/seed/b/600/400' },
    { uri: 'https://picsum.photos/seed/c/600/400' },
  ];

  return (
    <ImageSlider
      images={images}
      currentIndex={currentIndex}
      onIndexChange={setCurrentIndex}
      height={300}
    />
  );
};

import { ChevronLeft, ChevronRight } from 'lucide-react-native';

<ImageSlider
  images={images}
  currentIndex={currentIndex}
  onIndexChange={setCurrentIndex}
  leftArrowComponent={<ChevronLeft size={30} color="#fff" />}
  rightArrowComponent={<ChevronRight size={30} color="#fff" />}
  arrowContainerStyle={{
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    borderRadius: 25,
    padding: 12,
  }}
/>

<ImageSlider
  images={images}
  currentIndex={currentIndex}
  onIndexChange={setCurrentIndex}
  autoPlay={true}
  autoPlayInterval={5000}
  loop={true}
  height={300}
/>

<ImageSlider
  images={images}
  currentIndex={currentIndex}
  onIndexChange={setCurrentIndex}
  showDots={true}
  dotColor="rgba(255,255,255,0.5)"
  activeDotColor="#ff6b6b"
  dotSize={10}
  height={300}
/>

Props

Complete API reference

Prop	Type	Default	Description
`images`	`{ uri: string }[]`	required	Array of images to display
`height`	`number`	`220`	Height of the slider
`currentIndex`	`number`	`0`	Current visible image index
`onIndexChange`	`(index: number) => void`	`() => {}`	Callback when index changes
`showNavigationArrows`	`boolean`	`true`	Show/hide navigation arrows
`showPlaceholder`	`boolean`	`true`	Show loading placeholder
`placeholderBackgroundColor`	`string`	`'#e0e0e0'`	Background color while loading
`loaderColor`	`string`	`'#007AFF'`	Color of loading indicator
`leftArrowComponent`	`React.ReactNode`	Default chevron	Custom left arrow component
`rightArrowComponent`	`React.ReactNode`	Default chevron	Custom right arrow component
`arrowContainerStyle`	`ViewStyle`	Default style	Custom style for arrow containers
`showDots`	`boolean`	`true`	Show/hide dot indicators
`dotColor`	`string`	`'#ccc'`	Color of inactive dots
`activeDotColor`	`string`	`'#007AFF'`	Color of active dot
`dotSize`	`number`	`8`	Size of dots in pixels
`autoPlay`	`boolean`	`false`	Enable auto play
`autoPlayInterval`	`number`	`3000`	Time between slides (ms)
`loop`	`boolean`	`false`	Enable infinite loop
`imageResizeMode`	`'cover' \| 'contain' \| 'stretch' \| 'center'`	`'cover'`	How images should fit
`onImagePress`	`() => void`	`undefined`	Callback when image is pressed

React Native Image Slider Component

Features

Zero Dependencies

Fully Customizable

Cross-Platform

Performance

TypeScript Support

Loading States

Auto Play & Loop

Dot Indicators

Interactive Demo

Image Slider Demo

Installation

Usage Examples

Props