Skip to content

namlehoangdev/react-native-anchor-carousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 [email protected]
$ yarn add [email protected] 

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

Props Description Type Default Required
data Array of data for rendering Array [] Yes
renderItems take each item from data and renders it. Function receives one agrument {item,index} and must return as React.Element Function () => {} Yes
keyExtractor Key extractor for each item of list Function (item, index) => index.toString() Should
Other Flatlist Props Other Flatlist Props
minScrollDistance Minimum distance when scrolling to move to the next item. Notice this property when you need to improve smoothness Number 5 No
containerWidth Width of the carousel container box Number Screen width Yes
itemWidth Width of each item in carousel Number 90% of screen width Yes
separatorWidth Width of separator in carousel (cause it only support horizontal side at the present time) Number 10 No
inActiveScale Value of the scale effect applied to inactive item Number 0.8 No
inActiveOpacity Value of the opacity effect applied to inactive item Number 0.8 No
style Style of the carousel container box View style {} No
itemContainerStyle Style for each carousel container item View style {} No
onScrollEnd Fired while scrollview end of scrolling Function ()=> {} No
initialIndex Initial starting focused item of list Number 0 No

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!