Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Native Circular Carousel

Circular Carousel for use on iOS and Android.

Demo

Installation

Open a Terminal in your project's folder and run,

yarn add react-native-circular-carousel
					or
npm install --save react-native-circular-carousel

Usage

import CircularCarousel from  'react-native-circular-carousel';

const dataSource = [
  {name: 'Ahmed'},
  {name: 'Ali'},
  {name: 'Umar'},
  {name: 'Bilal'}
]

<CircularCarousel
	style={{ width: 350 }}
	dataSource={dataSource}
	renderItem={(data) => <CarouselItem data={data} />}
	onItemPress={handleItemPress}
/>;

Props

Prop Type Description
dataSource* Array Items datasource
dropAreaLayout Object: { height, width, x, y } Layout of component where carousel items are going to be dropped
renderItem (data) => Component Render a single carousel item component
onItemPress (index) => void This handler function is called when front carousel item is tapped.
onItemDrop (index) => void This handler function is called when carousel item is dropped upon Drop Area.
style Object: { width, height } Styles given to container component. Default: { width: 350, height: 200 }
itemStyle Object: { width, height } Styles given to a carousel item component. Default: { width: 110, height: 120 }

**Provide correct styles as these are used in arranging items in circle.

Thanks to contributors:

About

Circular Carousel Component for React Native

Resources

License

Releases

No releases published

Packages

No packages published