react-native-carousel-cards

A simple and fully customizable React Native carousel card component.

Getting started

npm i react-native-carousel-cards

Usage

import React from 'react';
import {
  View,
  Text
} from 'react-native';

import { RNCarousel } from 'react-native-carousel-cards';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{ padding: 20 }}>
          <Text style={{ fontSize: 20, fontWeight: "bold" }}>React Native Carousel</Text>
        </View>
        <RNCarousel 
          data={[
            { url: "https://multimediarepository.amadeus.com/cmr/retrieve/hotel/366DB6FB8EFD44C4B2ADC90D38D82C2E" },
            { url: "https://multimediarepository.amadeus.com/cmr/retrieve/hotel/AF63CB0620F94B6FAE8B5BD390C58213" },
            { url: "https://multimediarepository.amadeus.com/cmr/retrieve/hotel/895A263C718547B38011E65E53A7085A" },
            { url: "https://multimediarepository.amadeus.com/cmr/retrieve/hotel/186D75B7A075470F95C7DF5E99F87380" }
          ]} 
        />
      </View>
    )
  }
};

Props

Prop	Type	Description
data	Array	Images data
imageResizeMode	String	Image resize mode, similar to resize mode in Images in react native.default: cover
indicatorBorderColor	String	Bullets border color.default: white
indicatorActiveBackgroundColor	String	Bullets active fill color.default: white
height	Number	Height of the container.default: 200
arrowSize	Number	Size of the navigation arrow.default: 25
loop	Boolean	Auto looping the images for every 4seconds.default: true
showArrows	Boolean	To show the arrow or not.default: true
showIndicator	Boolean	To show the bullets or not.default: true
showsHorizontalScrollIndicator	Boolean	To show the scroll view default horizontal scroll indicator or not.default: false
isCustomCarouselContent	Boolean	To show the custom carousel content.default: false
indicatorStyle	Object	To change indicator style.
contentContainerStyle	Object	To change scroll view container style.
indicatorContainerStyle	Object	To change indicator container style.
carouselContent	React component	Custom carousel content component