🎠 React Native Carousel Image Slider

✨ Features

• 🎯 Fully customizable
• 📱 iOS and Android support
• 🎨 Customizable dots and styling
• 🔄 Auto-play functionality
• ♾️ Infinite loop support
• 🖼️ Custom image component support
• ⚡️ High performance
• 📦 Zero dependencies
• 🔍 TypeScript support

📋 Requirements

• React Native >= 0.72.0
• React >= 18.0.0

🚀 Installation

1# Using npm
2npm install react-native-carousel-image-slider
3
4# Using yarn
5yarn add react-native-carousel-image-slider

🎮 Basic Usage

Function Component Example

1import React, { useState } from "react";
2import { View } from "react-native";
3import { CarouselSlider } from "react-native-carousel-image-slider";
4
5export default function App() {
6  const [images, setImages] = useState([]);
7
8  return (
9    <View style={{ width: "100%", flex: 1, padding: 24 }}>
10      <CarouselSlider images={images} />
11    </View>
12  );
13}

Class Component Example

1import React from "react";
2import { View } from "react-native";
3import { CarouselSlider } from "react-native-carousel-image-slider";
4
5export class App extends React.Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      images: [],
10    };
11  }
12
13  render() {
14    return (
15      <View style={{ width: "100%", flex: 1, padding: 24 }}>
16        <CarouselSlider images={this.state.images} />
17      </View>
18    );
19  }
20}

🎨 Advanced Usage

Using Local Images

1import React from "react";
2import { View } from "react-native";
3import { CarouselSlider } from "react-native-carousel-image-slider";
4
5export default function App() {
6  const images = [
7    require('./assets/image1.jpg'),
8    require('./assets/image2.jpg'),
9    require('./assets/image3.jpg'),
10  ];
11
12  return (
13    <View style={{ width: "100%", flex: 1, padding: 24 }}>
14      <CarouselSlider images={images} />
15    </View>
16  );
17}

Using Custom Image Component

1import React from "react";
2import { View, Image, Text } from "react-native";
3import { CarouselSlider } from "react-native-carousel-image-slider";
4
5export default function App() {
6  const images = [
7    { uri: 'https://example.com/image1.jpg', title: 'Image 1' },
8    { uri: 'https://example.com/image2.jpg', title: 'Image 2' },
9  ];
10
11  const CustomImage = (item, index) => (
12    <View>
13      <Image source={{ uri: item.uri }} style={{ width: 300, height: 200 }} />
14      <Text>{item.title}</Text>
15    </View>
16  );
17
18  return (
19    <View style={{ width: "100%", flex: 1, padding: 24 }}>
20      <CarouselSlider 
21        images={images}
22        customImageComponent={CustomImage}
23        autoPlay={true}
24        autoPlayInterval={2000}
25      />
26    </View>
27  );
28}

📚 Props

Prop	Type	Default	Description
images	Array	required	Array of image sources (URL strings or require() objects)
renderDots	boolean	true	Whether to show pagination dots
onImagePress	function	undefined	Callback when an image is pressed
activeDotColor	string	'red'	Color of the active dot
inactiveDotColor	string	'gray'	Color of inactive dots
dotStyle	ViewStyle	undefined	Custom style for dots
dotSize	number	8	Size of the dots
dotSpacing	number	4	Spacing between dots
resizeMethod	'auto' | 'resize' | 'scale'	'auto'	Image resize method
resizeMode	ImageResizeMode	'cover'	Image resize mode
imageStyle	ImageStyle	undefined	Custom style for images
disabledOnPress	boolean	false	Disable image press
buttonActiveOpacity	number	1	Opacity when pressing images
autoPlay	boolean	false	Enable auto-play
autoPlayInterval	number	3000	Interval between auto-play slides (ms)
loop	boolean	true	Enable infinite loop
customImageComponent	function	undefined	Custom component to render images
containerStyle	ViewStyle	undefined	Custom style for the container
imageContainerStyle	ViewStyle	undefined	Custom style for the image container
dotsContainerStyle	ViewStyle	undefined	Custom style for the dots container
showNavigationButtons	boolean	false	Show navigation buttons
navigationButtonColor	string	'#fff'	Color of navigation buttons
navigationButtonSize	number	30	Size of navigation buttons
swipeEnabled	boolean	true	Enable swipe gestures
bounceEnabled	boolean	true	Enable bounce effect
scrollEnabled	boolean	true	Enable scroll
overlayStyle	ViewStyle	undefined	Custom style for image overlay
captionStyle	ViewStyle	undefined	Custom style for image caption container
captionTextStyle	TextStyle	undefined	Custom style for caption text
loadingIndicator	ReactNode	undefined	Custom loading indicator component
errorComponent	ReactNode	undefined	Custom error component
onSlideChange	function	undefined	Callback when slide changes
onScroll	function	undefined	Callback during scroll
onScrollBegin	function	undefined	Callback when scroll begins
onScrollEnd	function	undefined	Callback when scroll ends
initialIndex	number	0	Initial slide index
windowSize	number	3	Number of slides to keep in memory
maxToRenderPerBatch	number	3	Maximum number of slides to render per batch
updateCellsBatchingPeriod	number	50	Period for updating cells
accessibilityLabel	string	undefined	Accessibility label
accessibilityHint	string	undefined	Accessibility hint
accessibilityRole	string	'image'	Accessibility role
aspectRatio	number	undefined	Image aspect ratio
height	number	undefined	Custom height for images
width	number	undefined	Custom width for images
longPressEnabled	boolean	false	Enable long press gesture
onLongPress	function	undefined	Callback for long press gesture

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

• Gustavo Castilho - GitHub

⭐️ Show your support

Give a ⭐️ if this project helped you!