react-native-custom-image-carousel

React Native Simple Carousel

The Image Carousel component is a React Native component designed to display a carousel of images with pagination dots at the bottom. It allows users to swipe through images horizontally or automatically cycle through them at a specified interval.

Installation

1npm install react-native-custom-image-carousel

Dependencies

1npm i react-native-webview@13.6.4
2npm i react-native-youtube-iframe

Usage

1import React from 'react';
2import { View, StyleSheet } from 'react-native';
3import ImageCarousel from 'react-native-custom-image-carousel';
4
5const images = [
6  require('./images/image1.jpg'),
7  require('./images/image2.jpg'),
8  require('./images/image3.jpg'),
9];
10
11const App = () => {
12  return (
13    <View style={styles.container}>
14      <ImageCarousel
15        images={images}
16        height={200}
17        width={300}
18        inactiveDotColor="#BCBCBC"
19        activeDotColor="#333333"
20        resizeMode="cover"
21        carouselTiming={3000} // Set to 0 to disable automatic scrolling
22      />
23    </View>
24  );
25};
26
27const styles = StyleSheet.create({
28  container: {
29    flex: 1,
30    alignItems: 'center',
31    justifyContent: 'center',
32  },
33});
34
35export default App;
36

Props

• images: An array of image sources.
• height: Height of the carousel.
• width: Width of the carousel.
• inactiveDotColor: Color of inactive pagination dots (optional, default: #BCBCBC).
• activeDotColor: Color of active pagination dot (optional, default: #333333).
• resizeMode: Image resize mode (optional, default: 'cover').
• carouselTiming: Interval in milliseconds for automatic carousel scrolling (optional, default: 1000). Set to 0 to disable automatic scrolling.

Screenshots

https://github.com/shrutigxuriti/react-native-custom-image-carousel/assets/131851981/151d1eaf-4c0f-4e66-8780-ce60c05f3c04

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library