react-native-carousel-library v1.0.0

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