react-native-anchor-carousel

react-native-anchor-carousel

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

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!