react-native-zi-carousel

react-native-zi-carousel is a custom carousel component designed to address the issue of carousel implementations in newer versions of React Native, specifically when react-native-snap-carousel is not fully supported. This component is highly customizable and comes with various options to handle pagination, auto-scrolling, and effects such as scaling.

Author:

• Mohammed Sadaqathullah

Installation

To install the react-native-zi-carousel package, you can use npm or yarn:

npm install react-native-zi-carousel

Usage

You can use the ZiCarousel component by importing it and passing the necessary props.

Example Usage:

import React from 'react';
import { View, Text } from 'react-native';
import ZiCarousel from 'react-native-zi-carousel';

const App = () => {
 const data = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

 return (
   <View style={{ flex: 1 }}>
     <ZiCarousel
       data={data}
       renderItem={({ item }) => (
         <View style={{ justifyContent: 'center', alignItems: 'center' }}>
         {customize}
         </View>
       )}
       itemSize={200}
       spacing={15}
       pagination={true}
       autoScroll={true}
       loop={true}
       scaleEffect={0.8}
       declarationRate={0.9}
       itemWidth={150}
     />
   </View>
 );
};

export default App;

Props

| Prop | Type | Default | Description | |--------------------|----------|--------------------------|----------------------------------------------------------------------------------------------------------| | data | Array | [] | The data array that will be rendered in the carousel. | | renderItem | Function | () => {} | Function to render each item in the carousel. | | itemSize | Number | width * 0.85 | The size of each item (width or height depending on the orientation). | | spacing | Number | 10 | The spacing between each item in the carousel. | | vertical | Boolean | false | Set to true to make the carousel vertical. | | pagingEnabled | Boolean | true | Set to true to enable paging, where the carousel scrolls one item at a time. | | showsHorizontalScrollIndicator | Boolean | false | Set to true to show the horizontal scroll indicator. | | showsVerticalScrollIndicator | Boolean | false | Set to true to show the vertical scroll indicator. | | snapToAlignment | String | 'center' | Defines how the content should align when snapping. Possible values: start, center, or end. | | snapToInterval | Number | itemSize + spacing | Defines the interval at which items snap. | | onMomentumScrollEnd | Function | () => {} | Callback when the scrolling animation ends. | | onScroll | Function | () => {} | Callback function to handle scroll events. | | contentContainerStyle | Object | {} | Style to apply to the content container of the carousel. | | maxToRenderPerBatch | Number | 1 | Defines the maximum number of items to render in a batch for performance optimization. | | initialNumToRender | Number | 1 | Number of items to render initially. | | pagination | Boolean | true | Set to true to show pagination dots at the bottom of the carousel. | | paginationStyle | Object | {} | Custom style for the pagination container. | | dotStyle | Object | {} | Custom style for the pagination dots. | | activeDotStyle | Object | {} | Custom style for the active pagination dot. | | inactiveDotStyle | Object | {} | Custom style for the inactive pagination dots. | | autoScroll | Boolean | false | Set to true to enable automatic scrolling after a set interval. | | autoScrollInterval | Number | 3000 | Interval (in milliseconds) for auto-scrolling. | | loop | Boolean | false | Set to true to loop the carousel indefinitely. | | loopInterval | Number | 5000 | Interval (in milliseconds) to reset the carousel when looping. | | scaleEffect | Number | 0.85 | Scale effect applied to the items as they are scrolled. | | animationDuration| Number | 500 | Duration (in milliseconds) for the item scale animation. | | declarationRate | Number | 0.8 | Controls the smoothness of the scrolling. A lower value will make the scrolling smoother. | | itemWidth | Number | width * 0.85 | Custom width for each item in the carousel. | | itemHeight | Number | height * 0.85 | Custom height for each item in the carousel. | | keyExtractor | Function | () => {} | Function to extract the unique key for each item. Example: (item, index) => item.id. |

Notes

Key Extractor

You can specify a custom key extractor for your data items by providing a keyExtractor function. For example:

<ZiCarousel
  data={data}
  renderItem={({ item }) => (
    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
      <Text>{item}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id.toString()} // Extracting key from item.id
/>

License

MIT License

ContactPackageSupport

[email protected]