rna
5.0/51
react-native-anchor-carousel
npm i react-native-anchor-carousel
rna

react-native-anchor-carousel

A simple swipeable carousel for React Native which anchor two side of list.

by Le Hoang Nam

4.0.1 (see all)License:MITTypeScript:Not Found
npm i react-native-anchor-carousel
Readme

react-native-anchor-carousel


Build Status

A simple swipeable carousel for React Native which anchor two side of list.

Installation

Install the dependency.

$ npm install react-native-anchor-carousel 
$ yarn add react-native-anchor-carousel 

\ For older version, install 3.1.2

$ npm install react-native-anchor-carousel@3.1.2
$ yarn add react-native-anchor-carousel@3.1.2 

Example

Expo snack demo here


full example here

import Carousel from 'react-native-anchor-carousel';
const {width: windowWidth} = Dimensions.get('window');
const styles = StyleSheet.create({
 carousel: {
  flexGrow: 0,
  height: 150,
 }
});

\ Hook Component version:

const carouselRef = React.useRef(null);
renderItem = ({item, index}) => {
 return (
         <TouchableOpacity
                 style={styles.item}
                 onPress={() => {
                  carouselRef.current.scrollToIndex(index);
                 }}>
          ...
         </TouchableOpacity>
 );
}
return (<Carousel
        ref={carouselRef}
        data={Array(3).fill(0)}
        renderItem={renderItem}
        style={styles.carousel}
        itemWidth={windowWidth * 0.8}
        containerWidth={windowWidth}
        separatorWidth={0}
/>)

\ Traditional Class Component version:

renderItem = ({item, index}) => {
 return (
         <TouchableOpacity
                 style={styles.item}
                 onPress={() => {
                  this.numberCarousel.scrollToIndex(index);
                 }}>
          ...
         </TouchableOpacity>
 );
};

render() {
 return (
         <Carousel
                 style={styles.carousel}
                 ref={c => {
                  this.numberCarousel = c;
                 }}
                 data={Array(3).fill(0)}
                 renderItem={this.renderItem}
                 itemWidth={windowWidth * 0.8}
                 separatorWidth={0}
                 containerWidth={windowWidth}
         />
 );
}

Usages

This component currently just support only carousel for horizontal side carousel From version 2.2.0. \ It is now supported Flatlist props from version 3.0.0 Change scroll behavior of previous versions \ From version 4.0.0 it has been moved to Functional component and fix separator bug

PropsDescriptionTypeDefaultRequired
dataArray of data for renderingArray[]Yes
renderItemstake each item from data and renders it. Function receives one agrument {item,index} and must return as React.ElementFunction() => {}Yes
keyExtractorKey extractor for each item of listFunction(item, index) => index.toString()Should
Other Flatlist PropsOther Flatlist Props
minScrollDistanceMinimum distance when scrolling to move to the next item. Notice this property when you need to improve smoothnessNumber5No
containerWidthWidth of the carousel container boxNumberScreen widthYes
itemWidthWidth of each item in carouselNumber90% of screen widthYes
separatorWidthWidth of separator in carousel (cause it only support horizontal side at the present time)Number10No
inActiveScaleValue of the scale effect applied to inactive itemNumber0.8No
inActiveOpacityValue of the opacity effect applied to inactive itemNumber0.8No
styleStyle of the carousel container boxView style{}No
itemContainerStyleStyle for each carousel container itemView style{}No
onScrollEndFired while scrollview end of scrollingFunction()=> {}No
initialIndexInitial starting focused item of listNumber0No

References from

This library is written after taking reference from react-native-snap-carousel

Development

Welcome everybody to contribute ! Hope this simple carousel can help somebody for fast develope react-native app!

Todos

  • Cover vertical side carousel

License


MIT

Free Software, Hell Yeah!