react-native-carousel-library

A simple and fully customizable carousel library for React Native with Type Script. You can turn on the automatic image change, add a pagination or a title to the image.

Installation

  npm i react-native-carousel-library

Overview

https://user-images.githubusercontent.com/93936978/143039707-604963bf-0cf7-4de7-a992-99a0677dc25f.mp4

https://user-images.githubusercontent.com/93936978/143039788-5cd6030a-38b9-4f17-a819-0ed6a471eee7.mp4

Usage

import Carousel from 'react-native-ts-carousel-library';
import { Dimensions } from 'react-native';
import {images} from './src/data';

function App() {
  return (
      <Carousel
        data={images}
        autoScroll={true}
        pagination={true}
      />
  )
}

If you use the local images, pass the path using the require() method like below:

const imagesFromPath = [
  {url: require('./src/images/image1.jpg')},
  {url: require('./src/images/image2.jpg')},
  {url: require('./src/images/image3.jpg')},
];

For the images with url path the data array should look like below:

const images = [
  {url: 'https://images.unsplash.com/photo-1551316679-9c6ae9dec224?w=800&q=80'},
  {url: 'https://images.unsplash.com/photo-1562569633-622303bafef5?w=800&q=80'},
  {url: 'https://images.unsplash.com/photo-1503656142023-618e7d1f435a?w=800&q=80'},
];

      <Carousel
        data={images}
        autoScroll={true}
      />

Please make sure all your images have the similar size and orientation. You can decide, if you want to display landscape or portrait images. For landsape images, please set the landscapeImage props to true:

const landscapeImages = [
  {url: require('./src/images/horizontal1.jpg'), title: 'little church'},
  {url: require('./src/images/horizontal2.jpg'), title: 'river'},
  {url: require('./src/images/horizontal3.jpg'), title: 'tenements'},
];

      <Carousel
        data={landscapeImages}
        autoScroll={true}
        landscapeImage={true} // add this prop
      />

Available props

| Name | Type | Default |Required | Description | | -------------------------------- | -------------------- | ------------------------------ | ------------|------------------------------------------------------------------------------------------------------------------------------------------ | | data | object[] | [] | yes |An array of objects with url and title property, where only url is required | | autoScroll | boolean | true | yes |Determines if the scroll animation should be turned on | | autoScrollInterval | number | 5000 | no |Scroll interval (in ms) | | backgroundStyles | ViewStyle | | no | Carousel's background styles | | imageWrapperStyles | ViewStyle | | no | Image wrapper styles | | landscapeImage | boolean | false | no | Display the horizontal images | | pagination | boolean | true | no | Display the pagination | | paginationStyles | ViewStyle | | no | Styles available: dotSize, dotColor, indicatorColor, top, bottom, right, left, | | title | boolean | false | no | Render the image title | | titleStyles | ViewStyle | | no | Title text styles | | titleWrapperStyles | ViewStyle | | no | Title wrapper styles |