Skip to content
Circular Carousel Component for React Native
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.release-it.json
LICENSE.md
README.md
TODOs.md
demo.gif
jest-setup.js
package.json
yarn.lock

README.md

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:

You can’t perform that action at this time.