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