1.2.3 • Published 2 years ago

react-native-carousel-cards v1.2.3

Weekly downloads
10
License
MIT
Repository
github
Last release
2 years ago

react-native-carousel-cards

A simple and fully customizable React Native carousel card component.

npm.io

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

PropTypeDescription
dataArrayImages data
imageResizeModeStringImage resize mode, similar to resize mode in Images in react native.default: cover
indicatorBorderColorStringBullets border color.default: white
indicatorActiveBackgroundColorStringBullets active fill color.default: white
heightNumberHeight of the container.default: 200
arrowSizeNumberSize of the navigation arrow.default: 25
loopBooleanAuto looping the images for every 4seconds.default: true
showArrowsBooleanTo show the arrow or not.default: true
showIndicatorBooleanTo show the bullets or not.default: true
showsHorizontalScrollIndicatorBooleanTo show the scroll view default horizontal scroll indicator or not.default: false
isCustomCarouselContentBooleanTo show the custom carousel content.default: false
indicatorStyleObjectTo change indicator style.
contentContainerStyleObjectTo change scroll view container style.
indicatorContainerStyleObjectTo change indicator container style.
carouselContentReact componentCustom carousel content component.
onImagePressCbFunctionCallback function called when the image item is pressed.