react-native-anchor-carousel

----

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

$3

Install the dependency.
``sh
$ npm install react-native-anchor-carousel
`
`sh
$ yarn add react-native-anchor-carousel
`
\
For older version, install 3.1.2
`sh
$ npm install react-native-anchor-carousel@3.1.2
`
`sh
$ yarn add react-native-anchor-carousel@3.1.2
`

$3

__Expo snack demo here__


__full example here__

`javascript
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:
`javascript
const carouselRef = React.useRef(null);
renderItem = ({item, index}) => {
return (
style={styles.item}
onPress={() => {
carouselRef.current.scrollToIndex(index);
}}>
...

);
}
return ( ref={carouselRef}
data={Array(3).fill(0)}
renderItem={renderItem}
style={styles.carousel}
itemWidth={windowWidth * 0.8}
containerWidth={windowWidth}
separatorWidth={0}
/>)
`

\
Traditional Class Component version:

`javascript
renderItem = ({item, index}) => {
return (
style={styles.item}
onPress={() => {
this.numberCarousel.scrollToIndex(index);
}}>
...

);
};

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


$3


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 |

$3

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

$3

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

$3

- Cover vertical side carousel

License
----
MIT

Free Software, Hell Yeah!