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

    7

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    36.7 kB

    Total Files

    20

    Last publish

    Collaborators

    • mrmuhammadali