react-native-ts-carousel-library

react-native-ts-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-ts-carousel-library
  cd ios
  pod install

Overview

https://user-images.githubusercontent.com/93936978/142192166-d07aebd4-7086-4804-aac9-36517202f5a1.mp4

https://user-images.githubusercontent.com/93936978/142192203-62728966-be56-49ef-b066-df4edca436e0.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
      />

Other props

required:

• data - an array of objects with url and title property, where only url is required
• autoScroll - determines if the scroll animation should be turned on,

optional:

• autoScrollInterval - scroll interval,
• pagination - determines if the pagination should be displayed,
• title - set to true if you want to display the title,
• backgroundStyles - styles for the carousel background,
• imageWrapperStyles - styles for the image wrapper,
• titleWrapperStyles - styles for the title wrapper,
• titleStyles - title styles,
• paginationStyles - styles available: dotSize, dotColor, indicatorColor, top, bottom, right, left,
• landscapeImage - set to true if you have horizontal oriented images.