Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-native-circular-carousel

0.0.6 • Public • Published

React Native Circular Carousal

Circular Carousal for use on iOS and Android.

Installation

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

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

Usage

 
import CircularCarousal from  'react-native-circular-carousal';
 
const dataSource = [
  {name: 'Ahmed'},
  {name: 'Ali'},
  {name: 'Umar'},
  {name: 'Bilal'}
]
 
<CircularCarousal
    style={{ width: 350 }}
    dataSource={dataSource}
    renderItem={(data) => <CarousalItem data={data} />}
    onItemPress={handleItemPress}
/>;
 

Props

Prop Type Description
dataSource* Array Items datasource
dropAreaLayout Object: { height, width, x, y } Layout of component where carousal items are going to be dropped
renderItem (data) => Component Render a single carousal item component
onItemPress (index) => void This handler function is called when front carousal item is tapped.
onItemDrop (index) => void This handler function is called when carousal 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 carousal item component. Default: { width: 110, height: 120 }

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

Thanks to contributors:

Install

npm i react-native-circular-carousel

DownloadsWeekly Downloads

2

Version

0.0.6

License

MIT

Unpacked Size

36.7 kB

Total Files

20

Last publish

Collaborators

  • avatar